How to reduce React Native APK Size?
In the ever-evolving landscape of mobile app development, optimizing React Native APK size is crucial for delivering a seamless user experience. Developers often grapple with bloated APKs, hindering app downloads and user retention. This comprehensive guide unveils practical steps to efficiently reduce React Native APK size, ensuring your application remains agile and user-friendly.
Also Read: How to change Status Bar Background Color in React Native
Create a separate APK for each CPU
For both x86 and ARMv7a CPU architectures, the native code is included in the resulting APK by default. This facilitates the sharing of APKs compatible with nearly every Android device. The drawback of this is that any device will have some useless native code, which will result in unnecessarily larger APKs.
You can create an APK for each CPU by changing the following line in android/app/build.gradle
def enableSeparateBuildPerCPUArchitecture = true
Enable Proguard for APK
If you are using the React Native version less than ^0.73.0
then you can use this.
One tool that can help with APK size reduction is Proguard. In android/app/build.gradle
, modify the following line to enable Proguard:
def enableProguardInReleaseBuilds = true
You may now optimise your code by enabling minifyEnabled and shrinkResources in your build release after turning on Proguard. To enable, edit android/app/build.gradle
.
release {
debuggable false
shrinkResources true
minifyEnabled true
useProguard true
setProguardFiles([getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'])
}
Also Read: How to Change React Native App Icon for iOS and Android
Optimize Images to reduce React Native APK Size
By using image compressor tools, you can reduce the size of your photographs by 50–80%. I was able to cut the size of my asset by 50% by using this technique. Optimising your project photos will speed up app loading in addition to lowering the size of your app’s APK.
Here are some image compressor tools that I use:
Also Read: How to add Grid Layout in React Native
Split APKs to reduce React Native APK Size
If you are using React Native version more than ^0.73.0
, then you have to changes one more setting to split the apks. edit android/app/build.gradle
and add the following config in the build config. it will split the apk for “armeabi-v7a”, “arm64-v8a”, “x86”, “x86_64”
splits {
abi {
reset()
enable true
universalApk false
include "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
}
}
Conclusion
Reducing React Native APK size is a multifaceted process that demands a strategic approach. By meticulously addressing the components impacting size, optimizing assets, and implementing advanced bundling techniques, developers can ensure their apps remain nimble and responsive. Stay updated with the latest tools and techniques, and continuously audit and optimize to provide users with an unparalleled mobile experience.
You may also like
How to use SVG in React Native?
Feb 02, 2024
·3 Min Read
In the ever-evolving world of mobile app development, React Native has emerged as a popular framework for building cross-platform applications. One of the intriguing aspects of React Native is its support for Scalable Vector Graphics (SVG). In this article, we’ll delve into the intricacies of rendering SVG in React Native and explore best practices to […]
Read More
How to change Status Bar Background Color in React Native
Jan 12, 2024
·3 Min Read
In the dynamic world of mobile app development, creating a seamless and engaging user experience is paramount. One often-overlooked aspect that can significantly impact the overall feel of a React Native application is the status bar. This article will guide you on how to change the status bar background color in React Native, allowing you […]
Read More
How to Change React Native App Icon for iOS and Android
Jan 22, 2023
·4 Min Read
The Application Icon provides the App’s unique identifier. The primary thing that users usually remember is the application icon. Most of the time, a user can recall an application’s symbol rather than its name. The objective of your application should be defined by the app icon, which might be your brand’s logo or anything else. […]
Read More
How to add Grid Layout in React Native
Jan 17, 2023
·3 Min Read
Create a layout with same width and same spacing between items and add a specific number of items in a column
Read More