How we reduced our production apk size by 70% in React Native?

Android app size was one of the biggest concerns we had while working on React Native. As it makes tough on lower-end devices to deal will storage and performance issues.

Also app's with larger apk sizes makes it less interesting to download for some audiences.

So we decided to reduce the android apk size 📦 and started researching and analyzed what are the factors that bloat's up the app size and helped us to reduce size of production apk from 43 MB to 17 MB.

We will explain the whole process of reducing the apk size through a simple Hello World react-native app in the article.

Lets get Started

Create a React Native app called "HelloWorld"

 npx react-native init HelloWorld 

After the HelloWorld app is successfully created 🎉🎉

• We removed the boilerplate code from App.js and replaced it with just a Text displaying Hello World !

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

const App = () => {
  return (
    <>
      <View style={styles.container}>
        <Text>Hello World !</Text>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Let's create a production release apk for HelloWorld App and see what is the apk size.

• We Noticed that we got an apk with size 23 MB 🙄 for just a app with Text Hello World !.

Why does react-native created an apk of size 23 MB 🤔 ?

After reading through React Native official docs we found that All the apps from Google Playstore work's on different ABI such as

• armeabi-v7a
• arm64-v8a
• x86
• x86_64

So in order to support all the above ABI's react-native by default creates a Universal APK which contains files required for different device configuration into a single apk which bloated the apk size to 23 MB.

What is an ABI 🤔 ?

Different Android devices use different CPUs, which in turn support different instruction sets. Each combination of CPU and instruction set has its own Application Binary Interface (ABI).

How did we reduce our apk size?

Instead of Generating a Universal apk we switched to a completely new Publishing format called .aab

After generating aab file and uploading to Google Playstore, The Application size reduced drastically by 70% and App size to 7.29 MB from 23 MB 🍻

Seems Interesting Right 😎

So What exactly is aab and how did it help us ?

An AAB (Android App Bundle) is a new publishing format from google that includes all your app’s compiled code and resources.

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 that are needed for a specific device are downloaded to run your app and no extra files are bundled in apk which reduces the apk size massively.

Below Flowchart will help you to understand how does the whole process a little better.

APK

AAB

How to generate aab ?

To generate an aab is very simple.You can generate an aab both from Android studio and also through terminal.

Android Studio

Terminal

 cd android/ && ./gradlew bundleRelease

The generated AAB can be found under android/app/build/outputs/bundle/release/app.aab, and is ready to be uploaded to Google Play.

That's it let us know if you have any doubt's in the comments below 🍻