How to Reduce React Native App Size?
Tags: mobile
Published: 2022-07-08 07:47:21

---
title: How to Reduce React Native App Size?
published: true
date: 2022-05-31 14:46:47 UTC
tags: Mobile
canonical_url: https://aglowiditsolutions.com/blog/how-to-reduce-react-native-app-size/
---

[![How to Reduce React Native App Size](https://aglowiditsolutions.com/wp-content/uploads/2022/05/How-to-Reduce-React-Native-App-Size-1024x512.png)](https://aglowiditsolutions.com/blog/how-to-reduce-react-native-app-size/ "How to Reduce React Native App Size?")

_ **Quick Summary:** _

_Generally, React Native app size is big, which has always been an issue. As React Native applications support various CPU architectures and devices. Due to this, every device that downloads the application will get the unnecessary code that makes to React Native app size too big. This blog will help you to reduce React Native app size and, by employing unique solutions, optimize the React Native app performance._

React Native, a fully open-source framework developed and backed by Facebook (now known as Meta) in 2015, has been recognized as a cross-platform framework utilized by a mobile app development business.

React Native has been around for seven years, and we’ve had many people who love it for all of its benefits. Cross-platform development, use of third-party libraries, speedier program development, less complexity, etc.

Although React Native has some advantages, it also has a few drawbacks. Some of them are Performance Issues, Navigation issues, Memory leakage, Abstraction challenges, Lack of support for multiprocessing or parallel threading, and one of the most important factors is the Large size of the mobile application.

Regardless of these disadvantages, the popularity of the React Native is growing. Some statistics demonstrating React Native popularity are listed below.

- According to [stackoverflow’s](https://insights.stackoverflow.com/survey/2021#most-popular-technologies-misc-tech-prof) annual developer survey, React Native is on the Sixth position as the most popular framework & libraries
- [GitHub](https://github.com/facebook/react-native) has 103K Gitstars and 22K forks
- On [Stackshare](https://stackshare.io/react-native) 23621, developers use React Native.
- On [Stackoverflow](https://stackoverflow.com/questions/tagged/react-native), there are 127,325 questions for React Native
- According to [Statista](https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/), 38% of developers used React Native according to a 2021 developers survey

![Popularity of React Native](https://aglowiditsolutions.com/wp-content/uploads/2022/05/Popularity-of-React-Native.png)

Hope these stats have conveyed the popularity of React Native. Now let’s talk about the most important factor: the large size of the mobile application.

> _ **Also Read:** [React Vs React Native](https://dev.to/saurabhbarot/react-vs-react-native-whats-the-difference-27gd-temp-slug-351948)_

## **Key Difference between Native Apps and React Native Apps?**

The key difference between native and React Native apps is larger. The React Native mobile application will rise when you use multiple third-party libraries and native components.

![Native apps vs React Native Apps](https://aglowiditsolutions.com/wp-content/uploads/2022/05/Native-apps-vs-React-Native-Apps-1.png)

One of the reasons the size of react-native apk is increased is the larger size of Images and other media used in the applications. Suppose the graphical content or images take up a lot of space in the application. In that case, it may lead to an app crash, owing to the memory overload and impact on the performance of the React Native mobile application.

There are several underdeveloped countries where they still use phones that don’t have much storage space. So, if your application doesn’t support these kinds of phones. You can miss these audiences and your application can face performance issues. Let’s look at some of the challenges React Native applications face.

## **React Native App Size Challenges**

While working on React Native, one of the biggest concerns is android app size. It makes it hard for lower-end devices to deal with storage and performance issues. Also, having a large apk size makes it less interesting for users to download.

For this blog, we decided to create the android apk and see which factors affect the size of apk and helped us **reduce React Native app size** from 26.1 MB to 3.1 MB.

In this section, we have tried to explain the process **of reducing app size react-native** through the simple “Hello from Aglowid” app in the post.

Let’s get started with it. First, create the react-native app in kotlin called hello from Aglowid. Once it is successfully created, remove the code available in App.js and replace it with just the text displaying Hello from Aglowid!.

```
import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';

const App = () => {
	return (
		<SafeAreaView style= {{flex: 1}}>
			<View style={{flex: 1, justifyContent:'center', alignItem: 'center'}}>
				<Text> Hello from Aglowid!</Text>
			</View>
		<SafeAreaView>
	);
};

export default App;
```

![React Native for iOS](https://aglowiditsolutions.com/wp-content/uploads/2022/05/React-Native-App-in-Kotlin-576x1024.png)

After creating the release apk for Hello from the Aglowid app, let’s check the apk size of the application. We noticed that we got an apk with a size 26 MB for just an app with text Hello from Aglowid.

![React Native Apk Size](https://aglowiditsolutions.com/wp-content/uploads/2022/05/React-Native-Apk-Size.png)

## **Comparison with different platforms**

Let’s compare react-native app sizes with different platforms such as iOS and Flutter with React Native. We have already seen the app size of kotlin in the above example.

> _ **Also Check :** [What’s New in Flutter 3?](https://dev.to/aglowiditsolutions/whats-new-in-flutter-3-1i4b)_

### react-native app size ios

Here we have created the same application in React Native for iOS and simply just iOS. Let’s start with **React Native App Size iOS.**

![React Native for iOS](https://aglowiditsolutions.com/wp-content/uploads/2022/05/React-Native-App-in-Kotlin-576x1024.png)

> **RN\_iOS.ipa**  
> **iOS Package Archive- 3.5MB**

And once the application is created successfully, you can see that the application was created using React Nativee for iOS and has a size of 3.5MB. And the application contains the text saying Hello from Aglowid.

Now let’s see the app size when it’s created with just iOS.

![React Native for iOS](https://aglowiditsolutions.com/wp-content/uploads/2022/05/React-Native-App-in-Kotlin-576x1024.png)

> **Demo.ipa**  
> **iOS Package Archive- 34 KB**

The same application created with iOS has an app size of just 34 KB. So, we can say that React Native ** app size is big** compared to native iOS.

### Flutter Vs React Native App Size

Now let’s compare the **App Size Flutter vs React Native**. Let’s create the same application having Hello from Aglowid in Flutter.

![React Native for iOS](https://aglowiditsolutions.com/wp-content/uploads/2022/05/React-Native-App-in-Kotlin-576x1024.png)

Once it is created successfully, you can see that the application is created of 15MB

![Flutter vs React Native App Size](https://aglowiditsolutions.com/wp-content/uploads/2022/05/Flutter-vs-React-Native-App-Size.png)

And when it is created with Android Bundle, it is still 15.3MB.

![Android Bundle](https://aglowiditsolutions.com/wp-content/uploads/2022/05/Android-Bundle.png)

This is just a small application, but when your application grows or is a large application, to begin with, you can see the difference in the Android bundle version.

Now, this was Flutter with react-native in android. Now let’s see about iOS.

In iOS, 8.2MB is F **lutter vs React App Size.**

Are you looking to hire React Native Developers?

Get dedicated RFlutter experts with ample experience in delivering cost-effective cross-platform mobile app solutions with Aglowid

[HIRE Flutter DEVELOPER](https://aglowiditsolutions.com/hire-flutter-developers/)

## **Why is React-Native app size too big?**

So let’s understand why react-native creates 26 MB of the application containing just text hello from aglowid. Reading through [**the official react native document**](https://dev.to/srajesh636/how-we-reduced-our-production-apk-size-by-70-in-react-native-1lci) **,** we found that apps from Google Playstore work on different ** ** ABI, such as

- armeabi-v7a
- arm64-v8a

- x86
- x86\_64

Here we are talking about ABI, but what is ABI? Let’s take a peek at that.

_ABI stands for Application Binary Interface. ABI defines the API plus machine language in a particular CPU family. An API does not ensure runtime compatibility as it defines the machine format._

To support all these different ABI react-native generates APK with native code for both x86 and ARMv7a CPU architectures. This makes it easy to share the apk on all android devices. However, there is also a downside: there will be some unused native code on any device, leading to an unnecessarily bigger APK size. You can create an APK for each CPU by changing the following line in android/app/build. Gradle:

```
- ndk {

-   abiFilters "armeabi-v7a", "x86"

- }

- def enableSeparateBuildPerCPUArchitecture = false

+ def enableSeparateBuildPerCPUArchitecture = true
```

Upload these files to markets that support device targetings, such as Google Play and AppStore, and the users will automatically get the appropriate APK. If you want to upload to other markets, such as APK Files, which do not support multiple APK for a single app, change the following line as well to create the default universal APK with binaries for both CPUs

```
- universalApk false  // If true, also generate a universal APK

+ universalApk true  // If true, also generate a universal APK
```

So to support all the above, ABIs React Native by default to create a universal apk that contains files required for different device configurations into a single apk which bloated the apk size to 26 MB.

![React Native Minimum App Size](https://aglowiditsolutions.com/wp-content/uploads/2022/05/React-Native-Minimum-App-Size-1.png)

Are you looking to hire React Native Developers?

Get dedicated React Native experts with ample experience in delivering cost-effective cross-platform mobile app solutions with Aglowid

[HIRE REACT NATIVE DEVELOPER](https://aglowiditsolutions.com/hire-react-native-developers/#inquire_now)

## **How To Reduce React Native App Size?**

As discussed in the above section, why **React Native App Size is too big?** Now let’s see what we can do to **reduce the size of React Native app.** There are several ways to **minimize the app size of react-native****.** Let’s take a look at them respectively.

![How To Reduce React Native App Size.](https://aglowiditsolutions.com/wp-content/uploads/2022/05/How-To-Reduce-React-Native-App-Size..png)

- Android app bundle file (.aab file )
- Enable resource shrinking
- Enable proguard
- Enable separate builds

- Try the new r8 code shrinker
- Resconfigs
- Compress images
- React-native bundle visualizer

### ![Ways to Reduce the App Size of React Native](https://aglowiditsolutions.com/wp-content/uploads/2022/05/Ways-to-Reduce-the-App-Size-of-React-Native-1.png)

### **Android app bundle file (.aab file)**

So as we saw in the section above, the **React Native App Size** is almost 26 MB for the application that has just had the text Hello from Aglowid. So instead of creating a universal apk. Use the new publishing format called .aab.

After generating the aab file and uploading it to Google Playstore, The application size was reduced drastically, and the App size to 3 MB.

![Android App Bundle](https://aglowiditsolutions.com/wp-content/uploads/2022/05/Android-App-Bundle.png)

Seems interesting, right?. So how does Android App Bundle (aab) helps in generating smaller apk? Let’s understand it better.

Google play uses the app bundle uploaded to generate and serve optimized and smaller APK for each device configuration and hardware, so only the code and resources needed for specific devices are downloaded to run your app. No extra files are bundled in apk, which reduces the apk size massively.

![Reduce App Size React Native](https://aglowiditsolutions.com/wp-content/uploads/2022/05/Reduce-App-Size-React-Native-2.png)

Using Android Studio or Command-line tools, you can build your project as a signed app bundle. To build a signed app bundle from Android studio first, select Build > Generate Signed Bundle/APK from the android studio toolbar. The next step is to select the android app bundle checkbox and click on the Next button. Then, open the module drop down and choose the app per the base module from the list.

Follow the instruction provided on the screen to complete the build process. On completion, android will generate a .aab file and store it in our computer’s AndroidAppBundle/app/release directory.

You can generate signed .aab using the terminal by running the following command in the android folder.

```
cd android

./gradlew bundleRelease
```

Let’s move on to the next option to **reduce react native app size.**

### **­Enable Resource Shrinking**

As the name suggests, resource shrinking is used to categorize and remove unnecessary resources. The following command can be used to enable it:

```
buildTypes {
       release {
        //Add the following//
    	shrinkResources true
        minifyEnabled true
       }
   }
```

### **Enable Proguard**

Proguard is used to detect and eliminate unused resources such as classes and methods. It also renames the attributes that use meaningless names. Proguard also compresses Java Bytecode and reduces the size of the app a little bit. In short, we can say that proguard is used to shrink, optimize, obfuscate, and pre-verify class files. Use the following command to enable it:

`def enableProguardInReleaseBuilds = true`

### **Enable Separate Builds**

If you’re looking for an alternative to the Android App bundle, this is the one to **minimize app size react native** application. There are two major architectures supported by android devices: armeabi and x86. So when you generate the apk using React Native, react libraries are included in both architectures. So to generate two different are following command is used.

`Set def enableSeparateBuildPerCPUArchitecture = true`

Apks are uploaded to the google play store and distributed according to their architecture. It can **Reduces App Size React Native ** from 7MB to almost 3MB for armeabi and 5MB for x86.

> _ **Also Read:** [React Native Developer Tools](https://dev.to/saurabhbarot/top-10-react-native-developer-tools-to-develop-powerful-mobile-app-in-2019-21l7-temp-slug-5080562)_

### **Try R8 code shrinker.** 

The new R8 code shrinker shrinks the code faster than Proguard. It **Reduces React Native App Size** by deleting the unused code and resources. The following code can be used to enable the R8 code shrinker.

`android.enableR8=true`

### **ResConfig**

Another option in the list to **Reduces React Native App**  **Size** is ResConfig, which removes all other localized resources while building the application.

```
buildTypes {
      release {
        shrinkResources true
        resConfigs "en"
        .
        .
      }
    }
```

### **Image compression** 

In the android section of the build. Gradle, you can add the following code to compress the image assets used in the application to **minimize app size react native.**

```
aaptOptions {

cruncherEnabled = false

}
```

### React-native bundle visualizer

This is another tool for **react-native minimum app size**. It generates a foam tree dependency output where you can glimpse the biggest culprit in your JS bundle. However, changes made here may not have any big drop in app size. But it helps with another benefit the smaller your JS bundle, the faster your app loads up.

**Wrapping up!**

These are some techniques from which you can **Reduces React Native App****. **Using these solutions, you can easily optimize react native applications.** Minimizing app size react-native **has many benefits in terms of performance and user experience. Hope these methods will be useful and have answered** How to Reduces React Native App Size.**

have a unique app Idea?

Hire Certified Developers To Build Robust Feature, Rich App And Websites.

**[HIRE DEDICATED DEVELOPERS](https://aglowiditsolutions.com/hire-dedicated-developers/#inquire_now)**