Why React Native Apps Get Bloated — and How to Fix Them
shares
You’ve built an amazing React Native app, performance is snappy, and your UI is gorgeous. But then you see the APK/AAB size: 80MB+. Ouch. That number is more than just a number, it’s a silent killer of your install rates, a drag on your user experience on slow networks, and a major factor in uninstalls, especially for Android users.
In production, every megabyte costs you users.
We’re going through 9 tested, production-ready techniques to get your app down to a lean, mean, install-machine without sacrificing a single feature.
Why App Size Matters in Production
Before diving into solutions, let’s understand the real-world impact:
- Lower install conversion on Play Store
- Slower downloads on poor networks
- Higher uninstall rates
- Users avoiding updates due to storage constraints
Common Reasons React Native Apps Are Large
- 1. Unoptimized assets (images, fonts, videos)
- 2. Unused native dependencies
- 3. Debug code shipped in production
- 4. Large JavaScript bundles
- 5. Multiple CPU architectures bundled together
- 6. Duplicate libraries from poor dependency management
Let’s fix them one by one.
1. Enable Proguard & R8 (Android)
Many production apps ship with unused Java/Kotlin code.
Enable R8 (Recommended)
In android/gradle.properties :
In android/app/build.gradle:
Benefits:
- Removes unused classes
- Shrinks bytecode
- Reduces APK/AAB size significantly
Typical reduction: 5–20 MB
2. Use Android App Bundles (AAB)
If you’re still shipping APKs, you’re already losing.
Switch to AAB
- Delivers only required resources per device
- Splits by ABI, density, and language
3. Reduce Native Architectures (ABI Splits)
By default, React Native includes all CPU architectures.
Enable ABI splits
In android/app/build.gradle:
4. Optimize Images & Assets
Common Mistake: Shipping raw PNGs straight from design tools.
Best Practices:
- Use WebP instead of PNG/JPEG
-
Compress images using tools like:
— TinyPNG
— ImageOptim - Avoid bundling unused images
- Prefer vector icons
- Remove unused glyphs from icon fonts
5. Remove Unused Dependencies
Production apps accumulate dead dependencies over time.
Audit Dependencies
Ask:
- Is this library still used?
- Is it worth the native size cost?
Common heavy libraries:
- Multiple date libraries
- Redundant UI libraries
- Analytics SDKs added “just in case”
Savings: Varies, but often significant
Without ATT consent, only non-personalized ads will appear — and Apple may reject your app if this is missing.
6. Disable Debug & Dev Tools in Production
Make sure these are not shipped:
- React DevTools
- Flipper
- Console logs
- Debug-only native code
Disable Flipper (Android)
Savings: Several MBs + runtime benefits
7. Enable Hermes Engine
Hermes is a game changer for both performance and size.
Enable Hermes
In android/app/build.gradle:
Benefits:
- Smaller JS bundle
- Faster startup
- Lower memory usage
Savings: 5–10 MB
Step 7: Monetization Best Practices
Techniques:
- Code splitting
- Lazy loading screens
- Remove unused imports
- Avoid large utility libraries
Example:
Instead of:
Step 7: Monetization Best Practices
Common Issue: Bundling entire font families for a few characters.
Fix:
- Use only required font weights
- Subset fonts
- Remove unused custom fonts
Savings: 1–5 MB
Conclusion
Reducing app size isn’t a one-time task, it’s a continuous production discipline.
Teams that actively monitor app size:
- Ship faster updates
- Improve user trust
- Increase install rates
- Reduce churn
If you treat app size as a first-class metric, your React Native app will scale better in the real world.