React Native: Give 64 bit support to your Android App.

Need to Upgrade ReactNative version to ≥ 0.59.

If you’ve initated your project in React Native version 0.59 or higher, congrats, you’re good to go, your app is 64 bit compliant.

Have you tried to upload / update your ReactNative App(version less than 0.59) on play store after July 31, 2019. If so, you might have seen the below error on play store

That means your current app is compliant with Google Play 32-bit requirement only but not 64-bit. To update / upload your app, you need to add 64 bit support to app.

DON’T WORRY! Thanks to ReactCommunity! From version 0.59, React Native added 64-bit support on Android.

Let’s explore the steps:

• How to make your app 64 bit supported ?

The only and simple answer to above question is to upgrade your ReactNative App to 0.59 or higher.

• How to upgrade ReactNative App to 0.59 or higher ?

I recommend you to upgrade your app to the latest release of the ReactNative. As of today, latest release of React Native is 0.60, so I’ll go with it.

There are various ways to upgrade the ReactNative version.

1. react native upgrade command:

This step applies only to projects that don’t use Git. Skip it if yours use it.

Just run below command -

react-native upgrade <version>

This command does it’s best to upgrade ReactNative to the version you specified. Here if there are changes in native code, you may end up with breaking your app , you need to debug and find out the issue. Please follow official document for more details.

In my case, this way didn’t work for me, so I used second way.

2. rn-diff-purge package:

Use this only in case the above didn’t work.

A npm package rn-diff-purge exposes ReactNative changes from a version to another version. You can just find the diff between your current and target version and simply apply the changes in your code line by line and file by file.

For e.g. Suppose you are upgrading from 0.57 to 0.60, you need to select the 0.57 as from and 0.60 as to versions. After that you will see the diffs, so you can apply the changes. Once you done with applying changes, just rebuild your project and you are upgraded.

Take a look at abi block in your app level build.gradle -

android {    ...   
 
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }    // In case, if you're using `ndk`
    defaultConfig {
        ndk {
            // Tells Gradle to build outputs for the following ABIs and package
            // them into your APK.
            abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }   
// applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }    ...}

If you’ve noticed, previously there were only two instruction sets in abi block i.e. “armeabi-v7a”, “x86”. That means only 32-bit versions of both processors (arm & x86) were present, but upgrading ReactNative version added 64-bit versions too, so now it became “armeabi-v7a”, “x86”, “arm64-v8a”, “x86_64”.

Now, your app has been upgraded to the latest version and also compliant with Google Play 64-bit requirements.

But wait….,

Once you rebuilt the app, you may find some warnings in your running app becasuse ReactCommunity made some major changes in 0.60 like -

• Autolink feature -

From 0.60, ReactCommunity introduces autolink feature.

If your app using any library(e.g. react-native-camera) that you linked manually or by running below command-,

react-native link <library>

then from 0.60 you don’t need to run above command. ReactNative libraries will be discovered and used by your app automatically.

In case you are using such library, you will see error in your terminal. So unlink it using below command and rebuild the project.

react-native unlink <library>

• react-native-community -

Some packages from react-native has been moved to react-native-community.

For e.g.

Previously, to import async-storage, NetInfo, etc. you used to do -

import {AsyncStorage, NetInfo} from “react-native”;

But, now these packages has been moved to ‘react-native-community’. If your app using such package, you will see warning for that.

So, to get the packages from react-native-community, you need to install it explicitely as -

npm i @react-native-community/async-storage

then remove the previous imports and use them as

import NetInfo from '@react-native-community/netinfo';
import AsyncStorage from '@react-native-community/async-storage';

• componentWillSomething -

Some lifecycle hooks like componentWillMount, componentWillUpdate and componentWillReceiveProps are deprecated and will be removed in the next major version of React (i.e. version 17).

You can use alternative methods or temporary workarounds for these deprecated hooks as below-

1. componentWillMount- Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount. A recommended way is to use the constructor() of the component class to do the stuffs of componentWillMount.
2. componentWillUpdate-Use componentDidUpdate instead. As a temporary workaround, you can rename to UNSAFE_componentWillUpdate.
3. componentWillReceiveProps-Use getDerivedStateFromProps instead.

The lifecycle methods was renamed to make sure developers realize that there is a better way than using the UNSAFE method.

Official Document

That’s it..! Now you’ve a 64-bit supported app with no or less warnings.

Now you can build your apk and upload it to Google Play Store. But let me tell you, after upgrading ReactNative version your app size might be increased to around double the previous size. It’s because now your app having code of both 32-bit and 64-bit.

To reduce the app size, you have two options -

1. Seperate builds per architecture :

In your android/app/build.gradle, set

def enableSeparateBuildPerCPUArchitecture = true
/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = true

enableSeparateBuildPerCPUArchitecture = true : Generates seperate apks for all architectures (“armeabi-v7a”, “x86”, “arm64-v8a”, “x86_64”). Here, apk for each architecture is built as per it’s requirements only, removes unnecessary code, resulting less app size.

enableProguardInReleaseBuilds = true : It just shrinks the Java bytecode for release build and reduces the app by some size. Please test your app, if it’s breaking your app set it false.

Build the apks using

./gradlew assembleRelease

It generates 4 apks -

32-bit & 64-bit for arm processor and

32-bit & 64-bit for x86 processor.

You need to upload all the apks to Play Store. Play store will take care of distributing the particular apk for each platform.

2. Android App Bundle (AAB) :

An Android App Bundle is a new upload format that includes all your app’s compiled code and resources, but defers APK generation and signing to Google Play.

You need to change the command you used for release build to -

./gradlew bundleRelease

This will generate release bundle inside

.../android/app/build/outputs/bundle/release/

Google Play’s new app serving model, called Dynamic Delivery, then uses your app bundle to generate and serve optimized APKs for each user’s device configuration, so they download only the code and resources they need to run your app. You no longer have to build, sign, and manage multiple APKs to support different devices, and users get smaller, more optimized downloads. You just need to upload this bundle to Google Play.

Please follow the official document for more details.

Congratulations..! Now you’ve an app with reasonable size which is compliant with Google Play 64-bit requirements.