How to Reduce React Native App Size for Faster Downloads

  • January 30, 2025
  • nschool
  • 0
How to Reduce React Native App Size for Faster Downloads

Introduction

Mobile applications need to be lightweight and fast, ensuring a seamless user experience. However, React Native apps can sometimes become large, impacting download speeds and storage usage. A bloated app size can deter potential users from installing your app and can also affect performance.

How to Reduce React Native App Size for Faster Downloads

In this blog, we will explore practical strategies to reduce the size of your React Native app, ensuring a more optimized and user-friendly experience

1. Enable Proguard for Android

Proguard is a tool that helps shrink, optimize, and obfuscate Java bytecode. By enabling Proguard, unnecessary classes and methods are removed, significantly reducing APK size.

  1. Open android/app/build.gradle.

  2. Locate release in the buildTypes section.

  3. Ensure Proguard is enabled:

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

4. Modify the proguard-rules.pro file to include necessary rules for keeping essential files.

2. Use Hermes for Android

Hermes is a lightweight JavaScript engine designed to improve app performance and reduce binary size.

How to enable Hermes:

  1. Open android/app/build.gradle.

  2. Locate project.ext.react and enable Hermes:

project.ext.react = [
enableHermes: true, // Enable Hermes
]

         3. Run cd android && ./gradlew clean to apply the changes.

By enabling Hermes, you can see a reduction in app size by up to 30%.

3. Optimize Native Dependencies

Many third-party libraries contain unnecessary dependencies, increasing the overall app size.

Steps to optimize dependencies:

  • Use the latest versions of libraries that are well-optimized.

  • Remove unused packages using npm prune or yarn autoclean.

  • Check for large native modules and replace them with optimized alternatives

4. Reduce Image Size

Images significantly contribute to app size. Optimizing images can drastically reduce the app bundle size.

Tips for image optimization:

  • Use compressed formats like WebP instead of PNG/JPEG.

  • Leverage cloud image storage instead of bundling them in the app.

  • Use react-native-fast-image for efficient image loading.

  • Optimize images by compressing them with tools like ImageOptim or TinyPNG.

5. Remove Unused Assets and Fonts

Unused assets like images, fonts, and audio files can inflate the app size. Identify and remove them regularly.

How to find unused assets:

  • Use react-native-unused-assets to detect unnecessary files.

  • Manually audit the assets folder and remove redundant resources.

6. Enable App Bundles for Android

Google Play allows developers to upload an Android App Bundle (AAB) instead of an APK. AAB automatically optimizes and delivers only the required resources for each device, reducing the download size.

Steps to enable AAB:

  • Open android/gradle.properties.

Add the following line:

  • android.useAndroidX=true
  • android.enableJetifier=true

Generate an AAB:

  • cd android && ./gradlew bundleRelease
  • Upload the generated AAB to the Play Store.

7. Optimize iOS App Size

For iOS, there are various strategies to reduce app size:

  • Enable Bitcode to let Apple optimize the app for different architectures.
  • Use App Thinning so users only download the necessary assets.

Remove unused architectures using EXCLUDED_ARCHS=arm64 in Xcode.

8. Use Code Splitting and Lazy Loading

How to implement lazy loading:
Use React.lazy() and Suspense for dynamic imports:

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

const App = () => (

  <Suspense fallback={<Text>Loading...</Text>}>

    <MyComponent />

  </Suspense>

);

export default App;

9. Use Lighter Libraries

Some libraries are heavier than others. Choose optimized alternatives whenever possible.

Examples:

  • Replace moment.js (500KB) with date-fns (50KB).
  • Use react-native-svg instead of image-based icons.
  • Use react-native-vector-icons selectively.

10. Reduce JavaScript Bundle Size

Minimize the JavaScript bundle by removing unnecessary imports and using a module bundler like Metro.

Steps to reduce bundle size:

Analyze the bundle using:

npx react-native bundle --entry-file index.js --platform android --dev false --bundle-output bundle.js
  • Check and remove unnecessary imports.
  • Use babel-plugin-transform-remove-console to strip console logs in production.

Final Thoughts

Reducing the size of a React Native app is essential for improving download speeds and user experience. By following the strategies mentioned above, you can optimize your app without sacrificing functionality.

 

Key Takeaways:

  • Enable Proguard and Hermes for Android.
  • Optimize native dependencies and images.
  • Use App Bundles and App Thinning.
  • Implement lazy loading and code splitting.
  • Choose lightweight libraries and optimize the JavaScript bundle.

Applying these techniques will ensure your React Native app remains lightweight, fast, and efficient. Happy coding!