How we reduced our production apk size by 70% in React Native? 
Tags: javascript, reactnative, beginners
Published: 2020-05-16 23:54:48

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 :package: 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" 
 
```javascript
 npx react-native init HelloWorld 
```

After the `HelloWorld` app is successfully created :tada::tada:

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

```javascript
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;
```

![](https://user-images.githubusercontent.com/13884296/82128364-41269880-97d8-11ea-8609-c1fb44721a84.png)

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 !`.  

![](https://user-images.githubusercontent.com/13884296/82129104-01fb4600-97de-11ea-9528-bfab28e58295.png)

### Why does `react-native` created an `apk` of size 23 MB :thinking: ?

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 :thinking: ?

> 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` :beers:

![](https://user-images.githubusercontent.com/13884296/82130925-696cc200-97ed-11ea-8ea8-f1f4f333e0f5.png)

Seems Interesting Right :sunglasses:

### 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

![](https://user-images.githubusercontent.com/13884296/82132079-814a4300-97f9-11ea-8d1f-b203464d47f5.png)

> AAB

![](https://user-images.githubusercontent.com/13884296/82132077-7e4f5280-97f9-11ea-9a6a-c8e7dea59a2f.png)


### 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

![](https://user-images.githubusercontent.com/13884296/82132119-06355c80-97fa-11ea-8e2e-e8c35f8cb14e.png)

> Terminal

```javascript
 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 :beers: