How do I reduce the size of a file in React Native?

Based on a survey by Statista, a gradual increase in the market of mobile applications is likely to occur. The same survey highlighted that mobile app revenue will rise up to 613 billion USD by 2025. React native framework, being one of the most popular cross-platform mobile app frameworks, is rising in demand and so are react native app development companies. Here, this article will cover one of the vital segments of app development, which is to explain the possible process of reducing the size of APK files in React Native.

For developing a react native app, you can consider either React Native CLI tool or Expo CLI. The choice of tool is based on the project requirements. However, the major issue with using Expo CLI is the large size of the APK file.

Why is the Expo app size so big?

The key reason behind this issue is that the whole SDK of Expo is built into the Expo app. This creates a burden on the phone's memory. The heavy architectural layout along with several APIs are built in the app. As a user, you may not want to carry a simple ‘Hello World’ expo app with a huge binary size. Thus, this issue needs an urgent solution ensuring that the user does not have to compromise with other vital apps.

Let’s see what are the possible solutions.

4 ways to shrink the Expo-built APK size

1. Using either Classic Build or EAS build

You can use the EAS Build to develop app binaries for Expo along with RN projects. This is the hosted service that lets you modify the codebase of the app as per the requirements. It helps in reducing the size of APK files by running prebuilds within JS projects. With EAS build, you can also easily compile the created RN or expo project.

In simpler words, Classic build or EAS build creates a link between installed dependencies in the created package.json of native projects. With this approach, you can develop a minimum of 3 MB-sized apps. However, the file size can differ based on the RN or Expo SDK version you are using.

2. Focusing on data after apps publish on App Store

This can be a significant approach since it tells which data you should primarily consider while reducing the size of APK files of the Expo app. App stores either for iOS or Android have a specific technique to disintegrate the huge build-up segments into smaller binaries. In this note, you must build an Android App Bundle or .aab file rather than the .apk file of apps. While uploading an app to app stores, you should upload it as AAB files. This not only reduces the time consumption but also allows you to use the smaller files of the app as per your needs.

As we have suggested you deal with aab files and not APK files, let’s understand the difference between these two file formats.

The bundle version of an android app can let you reduce the app size by approx 15%. It considers the device configuration of users while distributing apps. This way, you don't have to carry all the files you may not need.

3. Expo app migration to React Native

Building an Expo app may be easier since it does not require users to consider the native setup. Also, Expo tool creates binaries on the JS code. However, the huge binaries of an Expo built app should need an effective solution. Here, we have brought another approach of migrating Expo apps to react native.

Follow along the below-give steps.

• Cratea a project using the command react-native init in the cmd. This is the step of new project initialization.
• Copy source files from the already Expo-built app.
• Install the dependencies which you may need. Don't crowd the app with the entire Expo-based libraries.
• Make some changes in app.jsonfiles of the app. The alteration may compromise the UI design and logo changes.
• Select the .git files of the newly built React Native project.
• Now, you have to download the Encryption key or the app signing key using the command exp fetch:android:keystore. It lets users publish apps in the Play Store.
• Test these applications after you are done with the app setting. You will get the APK version of the app to be 7 MB.

There is another solution, which for me is the most effective.

4. Change in the android →app →build.gradle setting

• Go to the code editor of the expo app that you have built. . Here, I have edited the code in VS code. Select ‘android’ and then ‘app’. Go to ‘build.gradle’.
• Go to ‘enablepro’ on the right side of the root directory and change the def enableProguardInReleaseBuilds = false to true. This way you allow Proguard to reduce the size of Java Bytecode.
• Repeat the process for def enableSeparateBuildPerCPUArchitecture = false and change it to true. Save the entire process. Refer to the given image.

• These two steps make the build configurations active and thus generating individual .apks for different architectures becomes much easier.
• Turning enableProguardInReleaseBuilds to true reduces the Java Bytecode size while you are developing an app.
• Lastly insert a line enableProguardInReleaseBuildsshrinkResources true after the ‘minifyEnabled’.
• Now you can build applications with individual .apks in outputdirectory. You can see armebiand x86 for various device architectures.

Successfully, you have eliminated all the irrelevant resources of your app; thereby bringing the final apk file of the app to the smallest size possible.

Conclusion

Even if Expo app brings heavy binary files with it, there are 4 possible ways that you can use to make it much smaller. If you want to bring the simple 20 MB (approx) sized ‘Hello World’ app to a titbit-sized app, you need to go through this article. Further, take note of the fact that you cannot use Expo tools after 4th January 2023. Thus, you instead use Turtle CLI to develop the standalone apps of Expo. It is much more user-friendly than the Expo tool. Most importantly, turtle CLI-based apps are about 10x smaller than Expo-built apps. So get geared up to upgrade your app development skills with new tools and technologies.