In this article, we will cover the following two things:
Compress the react native application size - by compressing the java bytecode that is generated while building our app and also asking it to try and shrink all the resources that are bundled with the application.
Splitting our application bundle into multiple APKs to remove unnecessary code which is not required by the device which is going to run it - because a lot of code is bundled with the universal APK that is device-specific - meaning that we don’t need a lot of code in the device we’re going to install it in.
Let’s get started! ✊
First of all, you’ll need to eject your native app if you’re using create-react-native-app for your project ( You might have already done this if you’ve built your application before reading this article ). This is important since you don’t have access to configurations until you eject, as the build folder is where we have to make changes. If you haven’t, you can simply do this by :
npm run eject
Ejecting a react native application is a permanent action! ( Unless you’re using a version control system to keep track of previous versions of your app — from where you can recover the ‘unejected’ version of your app later if you need ). Learn more about ejecting.
Okay, so now we’re all set! Let’s get started and get that done fast. Don’t worry, it just takes a few minutes, and your app size will shrink dramatically!
Now, navigate to the android/app
folder from your project root directory where you can find your build.gradle
file.
Here, you’ll find your default build configurations already set up, find the line which looks like this :
def enableProguardInReleaseBuilds = false
def enableSeparateBuildPerCPUArchitecture = false
and change their value to true
like this :
def enableProguardInReleaseBuilds = true
def enableSeparateBuildPerCPUArchitecture = true
So you might be wondering what it does. Well, if you scroll down a bit you’ll see enableProguardInReleaseBuilds
and enableSeparateBuildPerCPUArchitecture
written at a few more places like here:
As you can see, these variables are being used to enable or disable two build configurations —
...
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
...
Don’t worry about having to handle different .apks for each architecture — Google takes care of distributing it to the users! And separating the builds according to architecture removes unnecessary code from your file which is not required on the device it is running.
...
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
...
Phew, that was pretty easy! But wait, we’re not done yet! There’s one little thing we need to do.
Now let’s add this line right below the minifyEnabled
configuration :
...
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
shrinkResources true; /* <-- Add this line */
...
And we’re done! Now build your app again and check the output
directory. You’ll find two different APKs of your app, which is specified in the configuration by default, i.e., for armebi
and x86
architectures.
Oh, and by the way, if you need a universal APK that supports all device architectures — just set universalApk
to true, and it’ll generate a universal APK next time you run build!
That’s all! Now you’ve set up your build configuration to shrink your code along with resources and create separate APK for different architectures — thus removing unnecessary code from the final build.
Thanks for reading! You can check out more resources on how to reduce the application build size.
Did you like this article? Or did I miss something? Is there something that you have that can be added to this article — that can make it even better?
Please leave a comment below, or you can also contact me through my social media profiles.
Thank you for reading! 😄
Happy Hacking! Cheers!
September 21, 2018
Learn how to implement secure, encrypted data storage in React Native applications using redux-persist and redux-persist-transform-encrypt to protect sensitive user information.
January 12, 2019
Learn how to install and set up Android Emulator for React Native development on Mac, Linux, and Windows without Android Studio. This step-by-step command-line guide helps you create virtual devices with minimal system resources and zero bloatware.
May 19, 2019
In this article, we explore managing React application state using hooks. We leverage the React.useContext and React.useReducer hooks to create a Redux-like state management system without external dependencies.
April 11, 2019
Learn how to structure your React applications with a scalable and maintainable architecture. Discover practical directory organization patterns based on real-world experience.
May 11, 2019
Learn how to architect complex React applications with Redux, Redux-Saga, and service layers. This guide provides a scalable structure for organizing reducers, actions, middlewares, and selectors in large React projects.
June 29, 2019
Learn how to automate your Lighthouse audits with Mocha and Chai instead of manually performing audits on your Progressive Web Application. Run tests programmatically in CI/CD environments or locally to maintain consistent quality standards.