Reduce App Size and Boost Performance in React Native
Make your React Native apps faster, smaller, and more efficient with smart optimisation techniques.
Welcome to the world of React Native, a dynamic JavaScript framework propelling mobile app development to new heights. This powerful framework, based on React, empowers us to create stunning applications for both iOS and Android using a single codebase.
Every day, thousands of apps are born. However, as applications grow in scope, the size of apps can become a significant challenge. Large app bundles not only discourage downloads due to storage concerns and slow installation times but also strain device resources and battery life.
On top of that, big apps often cost more to build and maintain. Plus, apps that exceed their size limits may lose potential users, especially those with limited data or no Wi-Fi access.
That’s why reducing your app’s bundle size is so important. A smaller bundle means faster downloads, smoother performance, and an overall better experience for your users.
In this blog, we’ll explore some easy and effective optimization techniques you can apply from the very beginning of your React Native project to keep your app lean, fast, and user-friendly.
Optimising JavaScript Bundle Size
Your JavaScript bundle plays a big role in how your React Native app performs. A smaller bundle helps your app start faster, run smoother, and use less memory, which all lead to a better experience for your users.
You can achieve this through a few practical methods, such as using smaller libraries, importing only what you need, and removing unused code. Below, we’ve covered these techniques in detail.
Lightweight Alternative:
One of the biggest reasons bundle sizes grow is the heavy use of third-party libraries. Every extra dependency adds weight to your app. To keep your React Native app smooth and efficient, it’s worth choosing lighter alternatives whenever possible.
Here’s a breakdown of common React Native libraries and their alternatives that may offer smaller bundle sizes:
- redux: Alternative: @reduxjs/toolkit — Redux Toolkit simplifies setup, reduces boilerplate, and can lead to smaller bundle sizes compared to using redux with extra middleware.
- immutable: Alternative: immer — Immer offers a simpler and more efficient way to handle immutable data structures than Immutable.js, resulting in smaller bundle sizes.
- moment: Alternative: date-fns or dayjs — Both date-fns and dayjs are lightweight alternatives to Moment.js. They provide similar functionalities for date and time manipulation but with smaller bundle sizes.
Pro tip: Just like the screenshot above, if you’d like to monitor your package size directly within the import statement, you can easily do it by installing the Import Cost VS Code extension.
Selective Imports:
Opting for selective imports over full references for modules can significantly benefit the app’s bundle size, particularly when utilising only a handful of methods.
Let’s look at lodash, a JS utility library packed with handy functions for working with data. It’s great for improving code readability and efficiency, but importing the entire lodash package can add approximately 71 KB of unused code.
By importing only what you need, you keep your build lighter and your app more efficient. For reference, please look at the code snippet below:
Furthermore, if your app’s library serves a singular purpose with a small use case, consider creating it yourself instead of adding a library, especially if it’s not time-consuming.
For example, if you just need to display a date in DD/MM/YYYY, JavaScript’s built-in Date utility can handle that without needing an additional dependency.
Visualize and Clean Up Your Bundle:
To visualise the app bundle, we can use the package react-native-bundle-visualizer. It’s easy to use and allows us to analyze various aspects of the bundle. Also, after reviewing the results, we can easily decide to remove some of the unnecessary modules and resources.
Once you’ve analysed the results, it becomes much easier to spot large or unused modules and decide what to trim out. A quick review can often reveal hidden bloat that’s quietly increasing your app’s size.
Image Optimisation:
Images often take up a big chunk of your app’s size, so optimising them can make a noticeable difference. With the right tools and formats, you can keep your visuals crisp and your app lightweight.
We mostly use PNG images, and by utilising the pngquant tool, we can minimise the size of the PNG images without losing quality.
Another great option is switching to the WebP format instead of PNG or JPEG. WebP offers lossy (25–35%) and lossless (26%) compression, plus transparency. That means smaller files and faster load times without sacrificing visual quality.
Knip Tool:
Tools like Knip are excellent for identifying unused code and dependencies in legacy JavaScript/TypeScript applications. Cleaning unused code and dependencies improves performance, simplifies maintenance, and makes refactoring safer.
You can add knip to your project using Yarn or npm:
# Using Yarn
yarn add -D knip typescript @types/node
# Using npm
npm install -D knip typescript @types/nodeThen, add a script in your package.json:
{
"name": "my-project",
"scripts": {
"knip": "knip"
}
}To lint your project with knip, you can run:
# Using Yarn
yarn knip
# Using npm (if you added it to your project)
npm run knip
# Or try Knip without adding it to your project
npx knip
Bonus: Properly refactoring code and reusing components, along with techniques like utilising the
FastImagecomponent for loading images, can further improve app size and overall performance.
Reducing bundle size through optimisations on the native side
For Android:
React Native Android apps can sometimes feel a bit heavy because of all the native code, libraries, and assets bundled in. The good news is that you can make your app smaller and faster with just a few smart tweaks — no performance loss required.
Modern Android builds give you powerful tools to do this, from smarter packaging formats to better resource management and simple Gradle settings. These small changes can make a big difference in how light and efficient your final app feels.
Let’s explore the key methods 👇
Upload the app using the Android App Bundle format
Get Keval Goyani’s stories in your inbox
Join Medium for free to get updates from this writer.
To effectively reduce your app’s size upon publication to Google Play, use the Android App Bundle format. This format includes all of your app’s compiled code and resources while deferring APK generation and signing to Google Play.
Google Play leverages the app bundle to create and distribute APKs tailored to each user’s device configuration. This approach ensures users download only the essential code and resources, minimising the app’s size and enhancing efficiency.
Bonus: In newer apps, AAB is mandatory when uploading apps in the Play Store. More information here.
Use Legacy Packaging for JNI Libraries
React Native apps include JNI (Java Native Interface) libraries that help JavaScript communicate with Android’s native layer. By turning on legacy packaging, you can simplify how these libraries are bundled and remove unnecessary files — resulting in a smaller APK.
Add this to your android/app/build.gradle:
android {
// ...
packagingOptions {
jniLibs {
useLegacyPackaging true
}
}
}Extract Native Libraries at Runtime
By default, Android might store native libraries in an uncompressed format inside your APK, making it larger. You can reduce the size by keeping them compressed and letting Android extract them when the app installs.
Add this line inside your <application> tag in AndroidManifest.xml:
<application
...
android:extractNativeLibs="true">
...
</application>Remove unused resources
Libraries added to your code may contain unused resources. Gradle can automatically remove these resources if you enable shrinkResources in your app’s build.gradle file.
To enable resource reduction in your app, include the following code snippet in your build.gradle (app level) file:
android {
// Other codes
buildTypes {
release {
minifyEnabled true
shrinkResources true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}Before applying settings:
After applying settings:
Adopt Play Asset Delivery (PAD)
Google Play’s Play Asset Delivery (PAD) service enables on-demand resource downloads, bringing the benefits of app bundles to the application. It acts as a content delivery network, managing the hosting and download process for large game or app assets at no additional cost.
Play Asset Delivery offers various delivery options, including flexible delivery modes, auto-updates, compression, and delta patching. To learn how to implement Play Asset Delivery in a React Native app, check out this blog.
For iOS:
iOS apps can also reduce bundle size by adopting modern packaging practices and effective resource management. Here are key techniques for achieving this:
To accurately measure your app’s size, create an archive build and choose All compatible device variants for app thinning.
It generates a universal IPA file for all app variants and thinned IPA files for individual variants, alongside an App Thinning Size Report.txt in the output folder. This report includes both the uncompressed size, which is similar to the installed app size, and the compressed size, which is the app’s download size.
With the generation of the app size report, you are now ready to perform both basic and complex optimisation.
Use asset catalogs for the app’s resources
Asset catalogs allow Xcode and the App Store to optimise your app’s assets, significantly reducing its size. Utilise asset catalogs instead of directly including assets in your app bundle, especially if you’re using assets for native functionality.
Optimising your app’s asset files is critical because they often make up a large part of its size. Use the most efficient picture and video formats, such as HEIF for photographs and HEVC for movies, to reduce file size. Compress audio files with AAC or MP3 codecs, and experiment with lower bit rates to reduce space without sacrificing quality.
Adopt On-Demand Resources
Analyse all assets and identify infrequently used ones. Group these resources into asset packs, which are not included in the initial app download or updates on the App Store. See the On-Demand Resources Guide on the React Native App for more information.
Alternatively, if on-demand resources are not feasible, you can implement a web service to deliver them and download the files in the background using URLSession when required.
App Thinning
Apps available in the App Store and distributed to testers via TestFlight already utilise app thinning. For in-house apps or those shared outside TestFlight, you need to enable app thinning when exporting.
When exporting a development app, in the Development distribution options, choose All compatible device variants for app thinning, or select specific devices if your app supports only certain ones. Refer to the “Enabling All compatible device variants” screenshot above.
Conclusion
Optimising your React Native app isn’t just about reducing size; it’s about building faster, smoother, and more efficient experiences for your users.
From trimming down your JavaScript bundle to using Android App Bundles or iOS asset catalogs, every small tweak helps your app load quickly and run better.
A lighter app means faster installs, improved performance, and happier users.
Start small, optimize early, and keep your React Native apps lean, fast, and efficient.
Keep Coding… 👨🏻💻
References
For more updates on the latest tools and technologies, follow the Simform Engineering blog.
