DEV Community

Cover image for React Native App Bloat: Why Your App is Too Big and How to Fix It
Tarang patel
Tarang patel

Posted on

React Native App Bloat: Why Your App is Too Big and How to Fix It

#android #mobile #performance #reactnative

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 battle-tested, production-ready techniques to get your app down to a lean, mean, install-machine without sacrificing a single feature. Let's fix this.

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:

android.enableR8=true
Enter fullscreen mode Exit fullscreen mode

In android/app/build.gradle:

minifyEnabled true
shrinkResources true
Enter fullscreen mode Exit fullscreen mode

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 

cd android
./gradlew bundleRelease
Enter fullscreen mode Exit fullscreen mode

Why AAB helps

  • Delivers only required resources per device
  • Splits by ABI, density, and language

Size reduction: 20–40% for Android users

3. Reduce Native Architectures (ABI Splits)

By default, React Native includes all CPU architectures.

Enable ABI splits

In android/app/build.gradle:

splits {
    abi {
        enable true
        reset()
        include "armeabi-v7a", "arm64-v8a"
        universalApk false
    }
}
Enter fullscreen mode Exit fullscreen mode

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

For icons

  • Prefer vector icons
  • Remove unused glyphs from icon fonts

Savings: Huge in image-heavy apps

5. Remove Unused Dependencies

Production apps accumulate dead dependencies over time.

Audit dependencies 

npm ls
Enter fullscreen mode Exit fullscreen mode

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

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) 

debugImplementation "com.facebook.flipper:flipper"
releaseImplementation ""
Enter fullscreen mode Exit fullscreen mode

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:

enableHermes: true
Enter fullscreen mode Exit fullscreen mode

Benefits

  • Smaller JS bundle
  • Faster startup
  • Lower memory usage

Savings: 5–10 MB

8. Reduce JavaScript Bundle Size

Techniques

  • Code splitting
  • Lazy loading screens
  • Remove unused imports
  • Avoid large utility libraries

Example

Instead of importing the entire Lodash package:

import _ from 'lodash';
Enter fullscreen mode Exit fullscreen mode

Use only the function you need:

import debounce from 'lodash/debounce';
Enter fullscreen mode Exit fullscreen mode

Smaller JS = faster app + smaller binary

9. Fonts: The Silent App Size Killer

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.

Top comments (0)