DEV Community: U Sai Rajesh

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

U Sai Rajesh — Sat, 16 May 2020 23:54:48 +0000

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 🍻

How to show Ads in React Native?

U Sai Rajesh — Sat, 09 May 2020 22:08:05 +0000

Mobile Ads are always considered to the best part of monetizing 💰 the app So we decided to integrate Google Admob in our app, which would let us display ads on both ios and android.

After roaming through various articles and reading official documentation for AdMob from google and scattered information here and there. I decided to write this blog which has everything in one place.

We can integrate Google Admob very easily by following the below 2 steps.

Admob Account Setup
Code Level Integration

Admob Account Setup

First, you need to create an AdMob account from Here to start using google AdMob services.

Once you have successfully created an account at AdMob you need to create an App with its name platform (ios or android).

Once the app is created you will be getting an appId as below which will be used to target all the ads to a specific application.

App ID : ca-app-pub-3940256099942544~1458002511

So now we have an App ID which is registered at Admob lets try to create some ads, You can select ads from the Banner, Interstitial, and Rewarded ads. We will be using a simple Banner Ad here as an example.

Now here the last and most important step comes in Admob account setup.
we have to create an Ad Slot, these are the slot that we use in our ios and android app where can target our ads.

We will be using the Ad Slot we created just now for the code level integration in the next step.

Ad Unit Id : ca-app-pub-3940256099942544/6300978111

Note : Ads will only start serving on the above adSlot Id once you finish payment information Here and in case of the new account it may take some time to start serving the ads.

Code level Integration

We need to install a library called react-native-admob for using Google Admob in a react native app.

npm i -S react-native-admob@next

and then run

react-native link react-native-admob

Ios app's out of the box does not allow you to display ads on the app for that we have to add GoogleMobileAds.framework.

The simplest way to import the above framework into our app will be through CocoaPods.Add the below line in your Podfile.

pod 'Google-Mobile-Ads-SDK'

and then run below command

pod install --repo-update

For more information on Google Mobile Ads Framework you can read Here.

Now let's add the appId and adUnitId we got from account set up in the android and ios code for displaying ads.

IOS

AdMob application id should be added to Info.plist.

 <key>GADApplicationIdentifier</key>
 <string>ca-app-pub-3940256099942544~1458002511</string>

Android

Add Admob application id (com.google.android.gms.ads.APPLICATION_ID) in AndroidManifest.xml


<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~1458002511"/>

react-native-admob usage

The implementation of react-native-admob was quite simple, I just imported ‘AdMobBanner’ and passed adSlot Id to it.

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import {AdMobBanner} from 'react-native-admob';

const App = () => {
  const onFailToRecieveAd = (error) => console.log(error);

  return (
    <>
      <SafeAreaView>
        <AdMobBanner
          adSize="largeBanner"
          adUnitID="ca-app-pub-3940256099942544/6300978111"
          testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
          didFailToReceiveAdWithError={onFailToRecieveAd}
        />
      </SafeAreaView>
    </>
  );
};

export default App;

And that’s it :), You will be seeing the ads on your app 🍻

If you face any issues,You can find the above example in the Github Repo Here