How to reduce APK size in react native expo
As per a survey conducted by Statista, there will be a steady increase in the revenue of all categories of mobile applications. It will reach about 613 billion USD by the end of 2025. Given the increase in the market growth of mobile apps, developers of react native are in huge demand. One of the major reasons is that React Native framework supports cross platform app development so, you can Hire React Native developers.
You can use two approaches for building a react native app. One is using React Native CLI or the bare workflow and the other one is by the managed workflow of Expo CLI. If you want to learn the app building and running process, you should check the article on ‘How to create and run react native apps in android phone.
However, in this article, we are more into addressing and solving the major size issue of Expo build apk.
Addressing the issue of APK size
Building applications using react native expo framework has always been exciting. However, the major issue that users have to face is its huge apk size. For a simple ‘Hello World’ app, the apk size is more than 25MB. This requires users to compromise on their other vital applications. Hence, the issue can reduce the acceptance rate of the React Native framework.
If you are facing the same issue, you can count on this article.
Before getting directly into the possible solution, let’s become familiar with the core of this issue.
Why is the Expo app size so big? The large size of the Expo app is because of the numerous built-in APIs and huge architectural layout regardless of its use. In simpler terms, the huge size of the expo build app is because the entire Expo software development Kit is created within the application. Although new APIs, it makes the app publishing process hassle-free, it unnecessarily increases the binary size of the app.
4 methods to reduce the apk size
1. Considering Classic build or EAS build
EAS Build is known as the hosted service which you can use to build app binaries for both React Native and Expo projects.
Using the EAS build can allow you to ship the code base that you have used to develop your app. If you want to reduce the apk size, you should use EAS build since it runs prebuild in JavaScript projects. It also makes the compilation of the project much easier.
What happens when using EAS build is that it connects all installed dependencies while building native projects in the built package.json.
Considering this process, you can build an application of a minimum size of 3MB. Please note, that the size can vary based on the react Native or Expo SDK version.
2. Consideration of the Play Store data
This method may not be a realistic approach to reduce the apk size but can clarify what you should focus on.
You don't need to worry about the large size of the initial build. Google Play Store or Apple store has a unique technique to slice the build-up into fragmented binaries. Since we are here more concerned about the large apk size of Android OS, we suggest you create the .aab (Android App Bundle) version of the app and not the .apk version (Android Application Package). We also recommend you to upload the app as an AAB format. It will be the easiest way to immediately save the app size.
Ultimately you need to look at the final download size for different devices after you are done with providing the binaries to all the individual app stores.
Difference between .apk and .aab file
Google developed the app bundle
feature, which is more or less similar to the concept of the application package of Android differences. Both have differences in their architectural layout and flexibility. Let's find out more about their differences in the following table and come up with the concept of how AAB files can be better than large APK files.
APK | AAB |
---|---|
This is the packaging format | This is the publishing format that is installed on real devices. |
When using an APK file, you are dealing with heavy codes that may not be necessary for your device’s configuration. | With an AAB file, you have to only consider the code that is useful to run the app on your device. |
It does not support dynamic delivery | It supports dynamic delivery |
It is the app package of Android that includes heavy app codes and large resources like audio and image. It also consists of the app signing key. | It is a container that comprises fragmented APKs and a base APK. |
Image credit: Ayoub Boumzebra
From the above image, you can get a clear visualization of why using the AAB format can help optimize the download size of the app by about 15%. The bundle format of the android app is used to build and distribute apps as per the device configuration of each user. Thus, you don’t have to carry the burden of the entire Android Package on your device.
3. Migrating Expo app to RN
Although building an app using Expo caters you several benefits like
- No need to deal with native setup
- Exp builds binaries based on the written javascript code.
But what about the large-sized binaries (approx 20 MB) that you receive as a complementary with your main app? In this case, you can migrate the project to React Native to decrease its size.
Follow the steps to get this into action.
- Create a new project by passing
react-native init
in the Command prompt. This step will allow you to initialize the project. - Now, you have to copy all the
source
files from the Expo-built project. - Don’t install Expo-based libraries. This will unnecessarily load your app with heavy binaries. You have to install only the dependencies that your Expo project may need.
- Make some modifications in the
app.json
file inside your VS Code. The modifications may require changing the version of the application, logo, or UI designs. - Pass the
.git
folder in the built project. - Now with,
exp fetch:android:keystore
, download the signing key of the built Android app. This is also called an Encryption key. It allows you to publish the app in the Google Play store. - After setting up the app, test the application. This will give you a much smaller APK version of about 7 MB.
If you want to make the app size to titbit, you should definitely opt for this fourth process.
4. Alteration in android/ app/ build.gradle setting of VSCode
Follow along the steps and get your mind blown by the dramatic reduction of the app size.
- Go to
android/app
and then tobuild.gradle
. You can find this in your application root directory. - Search for ‘enablepro’ and turn
def enableProguardInReleaseBuilds
= false
into true. This would direct the Progaurd to shrink the Java Bytecode. - Repeat the same thing for def
enableSeparateBuildPerCPUArchitecture = false
into true. This will also do certain alterations in the Progaurd operations.
You will be directed to a similar screen as shown below.
- Turning both
def enableProguardInReleaseBuilds = false
anddef enableSeparateBuildPerCPUArchitecture = false
into true will activate the build configurations so that you can generate independent.apkS
for separate architectures. - Enabling
enableProguardInReleaseBuilds
into true will allow you to minimize the Javaytecode produced during the app building. - Finally, you have to add one line
enableProguardInReleaseBuildsshrinkResources true
immediately afterminifyEnabled.
- You are ready to build the application and find separate .
apkS
for your application in theoutput
directory. It will show youx86
andarmebifor
distinct device architectures.
It is done. You have successfully removed irrelevant codebases from the final apk build thereby shrinking all the resources.
Final suggestion
You have 4 methods to deal with the large size of the Expo apk build into your app. However, if you are not willing to choose any of these, you can use the version of Turtle CLI to build the Expo standalone apps. It is a command line interface that you can use both on the private computer and CI. this has been developed particularly for the React Native Expo users to get the benefits:
- No need to wait in the queue for the standalone applications
- No dependence on builder’s stability
- Apps built with Tutrtle CLI are 10 times smaller than those developed with
expo build
. - Freedom to use “custom native codebase”.
If you are planning to build apps, I will suggest you use Turtle CLI rather than the conventional expo build
. However, the expo build
will be in operation probably till 4th January 2023. So this is the time to upgrade yourself and befriend new app development technologies.
A science graduate who has a keen interest to lean about new technologies and research area. With an experience in the field of data analytics and content writing, she aims to share her knowledge among passionate tech readers.