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

  • PayuMOney React
    June 29, 2021

    Integrate Payumoney Using React

    Payumoney is the most popular and the best online payment gateway provider that allows anyone to explore a lot of benefits. To start with integration, you ....

  • Node Js Projects
    December 23, 2021

    Create a Node Js Projects

    Node.js is a server-side application runtime environment. It is used to build and execute applications that use the JavaScript programming language and can ....

  • Top 10 Website Designing
    August 25, 2021

    Top 10 Website Designing Company in Gurgaon

    With the growing IT and Website Application Development, website designing is essential and has a reputation. When compared to others, the website designs ....