Optimizing React Native App Size - React Native Experts
banner shap banner shap

Optimizing React Native App Size: Proven Strategies for a Lighter Build

Optimize your React Native app by reducing dependencies, enabling Hermes, optimizing assets, and minimizing bundle size for better performance and efficiency.

Mar 27, 2025

Save for later

Optimizing React Native App Size

Introduction:

One of the biggest challenges in mobile app development is keeping the app size minimal while maintaining performance and functionality. A large app size can lead to higher download times, increased storage usage, and poor user experience—ultimately affecting retention rates.

React Native apps, by default, include various dependencies, assets, and libraries that can bloat the app size if not optimized properly. In this guide, we’ll explore effective strategies and best practices to reduce the size of your React Native app without compromising its quality.

In this blog, we’ll explore effective strategies to minimize the size of a React Native app for both Android and iOS, covering dependencies, assets, build configurations, and code optimizations.

Why is App Size Reduction Important?

Before diving into the strategies, let’s understand why reducing app size is crucial:

  • Faster Downloads: Smaller apps download quickly, improving installation rates.

  • Better User Experience: Less storage consumption leads to better user retention.

  • Improved Performance: Lighter apps run faster and consume less memory.

  • App Store Guidelines: Some platforms have size limits for over-the-air downloads (e.g., Apple allows up to 200MB for cellular downloads).

  • Lower Data Costs: Smaller apps are more accessible to users with limited data plans.

  • Better Play Store and App Store Compliance

Now, let’s explore the strategies to optimize your React Native app’s size.

Optimizing React Native App Size for Android and iOS

1. Minimize Dependencies and Libraries

Each package added increases the app size. Remove unnecessary libraries and prefer lightweight alternatives.

Check Unused Dependencies

Run the following command to analyze dependencies:

				
					npx depcheck
				
			

This will show unnecessary dependencies and unused files.

Use Lightweight Alternatives

For example:

  • Instead of js, use day.js.
  • Replace lodash with native JavaScript functions.
  • Avoid unnecessary UI libraries if native components work fine.

Remove Dev Dependencies for Production

Before bundling, ensure dev dependencies are not included:

				
					npm prune --production
				
			

This will list unused dependencies in your project. Remove them using:

				
					npm uninstall <package-name>
				
			

or

				
					yarn remove <package-name>
				
			

Best Practice:

Use lighter alternatives to heavy dependencies. For example:

  • Moment.js → Replace with date-fns (smaller size).

  • Lodash → Import only required functions instead of the entire library:

				
					import debounce from 'lodash/debounce';
				
			
2. Reduce JavaScript Bundle Size

The JavaScript bundle is a significant part of the app’s size. Optimize it by:

Enable Hermes (Recommended for Android & iOS)

Hermes is a JavaScript engine that compiles JS code to bytecode, reducing load time and improving performance.

For Android:

Edit android/app/build.gradle and enable Hermes:

				
					project.ext.react = [
    enableHermes: true
]

				
			

Run:

				
					cd android && ./gradlew clean && cd ..
npx react-native run-android

				
			

For iOS:

Enable Hermes in Podfile:

				
					use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true
)

				
			

Run:

				
					cd ios && pod install && cd ..
npx react-native run-ios
				
			

Use Metro Bundler Optimizations

Modify metro.config.js:

				
					module.exports = {
  transformer: {
    minifierConfig: {
      keep_classnames: false,
      keep_fnames: false,
      mangle: true,
      output: {
        ascii_only: true,
      },
      toplevel: true,
    },
  },
};

				
			

Then, bundle the app:

				
					npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/
				
			

Advantages of Hermes:

  • Reduces APK size by precompiling JavaScript.

  • Optimizes memory usage for better performance.

  • Faster startup time due to ahead-of-time compilation.

3. Optimize Native Code and Builds

For Android:

Enable Proguard to Shrink APK

Proguard removes unused classes and methods. Enable it in android/app/build.gradle:

				
					android {
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

				
			

Then, customize android/app/proguard-rules.pro:

				
					-keep class com.facebook.react.** { *; }
-dontwarn com.facebook.react.**

				
			

Use App Bundles Instead of APKs

Instead of generating a large APK, generate an optimized AAB (Android App Bundle):

				
					cd android && ./gradlew bundleRelease

				
			

This helps reduce the download size of the app on different devices.

For iOS:

Enable Bitcode and Stripping Debug Symbols

  • In Xcode, go to Build Settings > Enable Bitcode > Set to Yes

  • Reduce binary size by stripping debug symbols:

				
					export DEBUG_INFORMATION_FORMAT=dwarf-with-dsym

				
			
4. Optimize Assets and Fonts

Compress and Optimize Images

Use image compression tools like TinyPNG or ImageOptim before adding assets. Convert PNG/JPEG to WebP for Android.

For Android:

Enable WebP in android/app/src/main/res/drawable:

				
					<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/image"
    android:tileMode="disabled"
    android:gravity="center"/>

				
			

For iOS:

Convert images to .xcassets format for better optimization.

Use Vector Icons Instead of Images

Replace images with vector icons using react-native-vector-icons:

				
					npm install react-native-vector-icons
				
			

And use it:

				
					import Icon from 'react-native-vector-icons/MaterialIcons';

<Icon name="home" size={30} color="#900" />

				
			
5. Reduce Font Files and Unused Resources

Including multiple font files can increase the bundle size. Instead of adding an entire font family, only include necessary weights/styles.

For example, instead of adding all font variants:

Bad Practice:

				
					fonts/
 ├── Roboto-Regular.ttf
 ├── Roboto-Bold.ttf
 ├── Roboto-Light.ttf
 ├── Roboto-Italic.ttf
 ├── Roboto-Medium.ttf

				
			

Best Practice:

				
					fonts/
 ├── Roboto-Regular.ttf
 ├── Roboto-Bold.ttf

				
			

Use Google Fonts API instead of bundling font files locally:

				
					import { useFonts } from 'expo-font';

const [fontsLoaded] = useFonts({
  Roboto: require('expo-font/Roboto-Regular.ttf'),
});
    
				
			
6. Use Code Splitting and Lazy Loading

Instead of loading all components at once, use dynamic imports:

				
					const HomeScreen = React.lazy(() => import('./HomeScreen'));
Wrap it in Suspense:
<Suspense fallback={<Loading />}>
  <HomeScreen />
</Suspense>

				
			
7. Remove Unused Resources and Debugging Tools

Remove console logs in production: Add this in babel.config.js:

				
					module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['transform-remove-console'],
};

				
			

Then, install the plugin:

				
					npm install babel-plugin-transform-remove-console --save-dev

				
			

Exclude Unnecessary Debug Packages in package.json, remove unused dependencies like react-devtools, redux-logger, and similar packages.

8. Use Android App Bundles (AAB) Instead of APK

Google Play Store now recommends Android App Bundles (AAB) over APKs because they optimize the app size per device.

To generate an AAB file, run:

				
					cd android && ./gradlew bundleRelease
				
			

This will generate an AAB file instead of an APK, reducing the overall app size by up to 30%.

9. Split APKs by Architecture

By default, React Native includes all CPU architectures (arm64-v8a, armeabi-v7a, x86, x86_64) in a single APK, making it unnecessarily large.

To generate smaller APKs per architecture, modify android/app/build.gradle:

				
					splits {
    abi {
        enable true
        reset()
        include 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
        universalApk false
    }
}

				
			

Then, rebuild the APKs:

				
					cd android && ./gradlew assembleRelease
				
			
10. Optimize iOS Build Using Bitcode and Swift Optimization

For iOS, enable Bitcode and Swift optimizations to reduce the app size:

  • Open Xcode → Select Build Settings → Set Enable Bitcode to Yes.

  • Optimize Swift compilation by setting Optimization Level to Fastest, Smallest.

Finally, reduce dependencies in  Podfile:

				
					use_frameworks! :linkage => :static
				
			

Then, reinstall dependencies:

				
					cd ios && pod install && cd ..

				
			

Final Thoughts

Optimizing the size of a React Native app requires multiple strategies, including reducing dependencies, enabling Hermes, optimizing assets, shrinking native code, and minimizing JavaScript bundle size. By following these best practices, you can significantly reduce your app’s footprint while maintaining performance and functionality.

Comparing Gluestack UI with Other React Native UI Libraries

Feature Gluestack UI NativeBase React Native Paper Material UI
Performance Optimized
Customization
Prebuilt Components
Theming Support
Atomic Styling
Re-Renders Optimized
Mobile App Development Company USA

Searching for the Best Mobile App Development Services for Your Business?

Hire our React Native Developers to analyze your business requirements and develop a tailored mobile app that drives results. Discover top-tier mobile app development services designed to elevate your business.

Schedule Meeting Schedule a Consultation
5/5 - (1 vote)