Home ยป How to reduce react native expo apk size

How to reduce react native expo apk size

React Native Reduce APK Size

Hi Friends, I am a developer of React native, Earlier I facing a problem that the app which was built in react native is heavy in size and a fresh apk without a dummy content take min 25 MB. Due to this I do not prefer to build applications in React Native. Now I got one solution but build apk less than 10 MB.

First You need to set an Expo Project. For that, you need to install Node Js Recommended Version from Node js official website.

npm install -g expo-cli

Then after you need to run below command to set up a projects

expo init AwesomeProject

By using this command a project will be set up in your system. Now you need to start an Expo App in your android mobile and run below command to start the app.

cd AwesomeProject
npm start

The expo project is now starting on your mobile. You can start your development here.

After completing your work on expo if you need to build an APK for android. You need to do the following setup to build an android APK.

In App.json File You need to add your package name

{
"expo": {
"name": "acil",
"slug": "acil",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#de1d22"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.acil.acil",
"versionCode": 1,
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}

Replace your package name ( com.yourcompany.yourappname ) to your company name. Suppose your android App name is ACIl then your package name is com.acil.acil. Here you need to set Name of Project and slug also.

Then after you need to optimize your expo assets which are used in the assets folder. You need to run below command to optimize the expo.

npx expo-optimize

By using this command your expo assets will be optimized and assets size will be reducted.

Then after you need to set a Lean build to React Native Expo. This lean build helps you to create a smaller application to react to the native expo. You need to add the following command in your app.json file.

android.enableDangerousExperimentalLeanBuilds:true { "expo": {
"name": "acil",
"slug": "acil",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#de1d22"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.acil.acil",
"versionCode": 1,
"enableDangerousExperimentalLeanBuilds": true
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}

By using the command your binary app size is down is about 10 MB in Android. There are no features yet to reduce size in IOS yet it was in progress.

Then after you need to run expo build:android command to create and apk.

If you want to upload it in play store then it much better that you run expo build:android -t app-bundle and upload it. At play store bundle reduce their size approx. 30-40% of its actual size.

If you want to run build directly to your android without uploading play store then you need to run expo build:android -t apk. It will provide you an apk file to run in your android.

Note: While you are going to upload in play store please fetch expo key and store in a safe place which used to build again with the same key otherwise your play store and updates 2nd version of apk. Use the below command to fetch the key.

expo fetch:android:keystore

These are the few methods where you can reduce your apk size. If you are looking for a react native course or expert react native developer then you need to contact us.

Related Blogs

  • MongoDb and Node Js
    January 1, 2022

    Build a Project using MongoDb and Node Js

    This post will cover two very popular technologies - MongoDB and Node.js. MongoDB is a document-oriented database and Node.js is a runtime environment for ....

  • Javascript ES6
    November 5, 2021

    What new in Javascript ES6

    Javascript ES6 is the newest version of Javascript which was introduced in 2015. It has a lot of features that can be used by developers for enhancing thei ....

  • January 31, 2022

    Future of TypeScript

    TypeScript is a superset of JavaScript. In other words, TypeScript is a typed superset of JavaScript. It is a programming language that compiles to JavaScr ....