How big your mobile app is can make or break its success. Big apps take forever to download, hog space, and—let’s be real—people are much more likely to delete them, especially if they’re stuck with slow internet or an older phone. Whether you’re building the app yourself or hiring React Native developers to boost performance, keeping your app lean should be at the top of your list.
Let’s talk about what actually affects the size of a React Native app, how you can measure it properly, and the smartest ways to shrink it down without losing important features or speed.
What Does “App Size” Really Mean?
Before you start trimming, you need to know what you’re measuring.
Here’s what “app size” can refer to:
- The download size: what users pull from the app store.
- Install size: how much space the app takes up after installation.
- Binary size: the actual size of the APK, AAB, or IPA file.
- JavaScript bundle size: how much space the JavaScript code and assets use.
On Android, Google Play can use Android App Bundles (AAB) to give users device-specific versions, which cuts down the download size a lot. But plenty of teams still focus only on APK size and miss out on this easy win.
Measure Before You Start Optimizing
Don’t just guess—measure first.
For Android, use Android Studio’s APK Analyzer to see which libraries and assets take up the most space. And check Google Play Console’s App Size reports to see the real download and install sizes users experience.
For iOS, Xcode lets you generate app size reports. Always look at release builds, not simulator builds—simulators have a bunch of extra stuff you won’t ship.
Setting a baseline helps you see your progress and keeps you from accidentally letting the app bloat again.
High-Impact Ways to Cut Down App Size
1. Turn On Hermes
Hermes is a lightweight JavaScript engine built just for React Native. It compiles your JavaScript to bytecode ahead of time, which means:
- Smaller app size
- Faster startup
- Lower memory use
If you want quick results, Hermes is usually the first place experts look.
Hermes often reduces app size and improves startup time.
React Native CLI — Android + iOS
In android/gradle.properties (if your setup uses this flag):
hermesEnabled=true
In android/app/build.gradle (common pattern in RN projects):
project.ext.react = [
enableHermes: true
]
Then clean + rebuild:
cd android
./gradlew clean
cd ..
npx react-native run-android
iOS (after enabling Hermes)
cd ios
pod install
cd ..
npx react-native run-ios
2. Use Android App Bundles (AAB), Not APKs
Still shipping a universal APK? Your users are probably downloading code and assets they don’t even need.
With Android App Bundles, Google Play splits the app by device type (CPU, screen, language), so people only get what their phone needs. You don’t even have to change your code, and you’ll see a big size drop right away.
Build an AAB:
cd android
./gradlew bundleRelease
Output:
android/app/build/outputs/bundle/release/app-release.aab
3. Enable Code and Resource Shrinking
On Android, turn on R8 and ProGuard to strip out unused code. Also, shrink resources to remove layouts, strings, and images you aren’t actually using.
These tools work best in release builds. Just test carefully—some third-party libraries need custom rules to avoid breaking.
Enable shrinking in android/app/build.gradle
android {
buildTypes {
release {
minifyEnabled true
shrinkResources true
proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
}
}
}
Optimize the JavaScript Bundle
Use inlineRequires
Load JavaScript modules only when you actually need them. This is especially helpful for bigger apps because it keeps the initial bundle small and speeds up launch time.
Create/update metro.config.js:
/**
* metro.config.js
*/
const { getDefaultConfig } = require("@react-native/metro-config");
module.exports = (async () => {
const config = await getDefaultConfig(__dirname);
config.transformer.getTransformOptions = async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
});
return config;
})();
Remove Console Logs in Production
Dev logs just add noise and bulk to your production build. Lots of teams forget this step, but cutting console logs is a fast, easy win.
Install the plugin:
npm i -D babel-plugin-transform-remove-console
Update babel.config.js:
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
env: {
production: {
plugins: [
["transform-remove-console", { exclude: ["error", "warn"] }],
],
},
},
};
Consider RAM Bundles (Advanced)
RAM bundles load JavaScript as needed instead of all at once. It’s more complicated, but if your app is huge, it’s worth a look.
Audit Dependencies and Assets
Dependencies sneak in and balloon your app’s size.
- Remove libraries you’re not using.
- Avoid giant SDKs unless you truly need them.
- Pick lighter alternatives when you can.
Assets matter too:
- Ditch unused fonts and font weights.
- Don’t include every icon in a set.
- Compress big images.
Teams working on React Native projects long-term usually make dependency audits a regular thing.
iOS-Specific Tips
For iOS:
- Strip debug symbols from release builds.
- Remove simulator architectures from the shipped binary.
- Use Apple’s app thinning to get device-specific builds.
Most big iOS app sizes come down to build settings, not React Native itself.
Final Thoughts
Shrinking a React Native app isn’t a magic trick—it takes measuring, tweaking, and sticking with it. If you turn on Hermes, use App Bundles, keep your assets tidy, and stay on top of your dependencies, you’ll end up with a faster, lighter app that works great on all kinds of devices.
Focus on app size if you want better performance, happier users, and fewer uninstalls—whether you’re tuning up your current app or starting something new.
Top comments (0)