Converting Android Native App to React-Native Compatibility

First &?foremost this blog is ideal for those with an existing Android application &?a basic understanding of how to code in Android and how to use Android studio.

To begin with, two screens with a small application are created and shown below as an example:

Creation of AAR

Let’s perform below steps:

• Open your application in Android studio?
• In build.gradle(:app) file?

Example:?

// change this line

plugins {
    id 'com.android.application'
}

// to this 

plugins {
    id 'com.android.library'
}        

• Delete the line for the applicationId in same build.gradle(:app) file

android {
    compileSdk 32

    defaultConfig {
        applicationId "com.project.example"     // remove this line
        minSdk 21
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    ...
    ...

}        

• Now sync the project with gradle
• To get the package i.e [Android Archive (AAR) .aar file] goto?

Build -> Make Module ’YourAppName.app’ and click on it.?

If everything works, then you will see BUILD SUCCESSFUL output in build output tab.

—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--

You can find the your Android Archive (AAR) file at?

app/build/outputs/aar/app-debug.aar

—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--—--

Now we have successfully created the .aar file of our existing android application, now we are going to use this package in React Native application.

The reason we are doing this is: existing Android app can be used as a dependency in the new React Native application.

What this will do is:?

• In case you modify your original Android application, you will just need to create AAR and use it as dependency in your RN wrapper modifying nothing (if your flow is intact)?
• Creating logical differences between two entities or components will help developers to concentrate on either of them which can also result in efficient debugging.?

Let’s begin the integration of AAR with RN

We must have an RN development environment to be set up in our machine. If you don’t have RN development environment you can follow this official Article

After RN CLI setup is done, you can use React Native's built-in command line interface to generate a new project. Let's create a new React Native project called "RNAndroid":

npx react-native init RNAndroid        

Now, You need to create a library folder inside the android folder and paste your .aar package file inside the library folder.?Then, you have to put this package as a dependency to your RN application.??

In build.gradle(:app) file i.e (/android/app/build.gradle)

implementation files("../library/mylib.aar")??

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])

    implementation files("../library/mylib.aar")  // Add your package to dependency
    ...
}        

If you have multiple .aar files you can add all the files like this

implementation fileTree(dir: "library", include: ["*.aar"])

So far we have added the Android Archive (AAR) to our React Native Android.??

React Native Bridge For Android:

React Native is developed in such a way that we can create a bridge between the Native Language and the JavaScript code. A bridge is nothing but a way to set up communication between native platform(s) and Javascript.

But why do we need it?

Let’s assume you want to reuse some existing Java code or library without having to reimplement it in JavaScript. Yes, you guessed it right, you can use it in your React Native application with the help of Native Bridge. At some point of time, to make a production level application you will most probably need to use Native Bridge.

So in our case we want to use our mylib.aar library into our RN application, to use this library we need to use React Native Bridge, hence we need to create Native Modules.

Now, we will create the Android Native Modules that will allow you to access Android’s AAR from JavaScript.

Steps to create Android Native module in RN

I have an existing project named RNAndroid. I'll create a module named CustomModule.java inside the below directory.

android/app/src/main/java/com/rnandroid

package com.rnandroid;

import android.content.Context;
import android.content.Intent;
import android.provider.Settings;
import android.widget.Toast;

import androidx.annotation.NonNull;

import com.example.mylibrary.ScreenOneActivity;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class CustomModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;
    Context context;

    CustomModule(ReactApplicationContext context) {
        super(context);
        reactContext = context;
        this.context = context.getApplicationContext(); // This is where you get the context
    }

    @NonNull
    @Override
    public String getName() {
        return "MyCustomModule";
    }

    @ReactMethod
    public void showToast() {
        Toast.makeText(reactContext, "Hi from Android!!!", Toast.LENGTH_LONG).show();
    }

    @ReactMethod
    public void callCustomLibraryScreen() {
        getCurrentActivity().runOnUiThread(
                new Runnable() {
                    @Override
                    public void run() {
                        Intent lIntent = new Intent(context, ScreenOneActivity.class);
                        lIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                        context.startActivity(lIntent);
                    }
                });
    }

}        

In the CustomModule.java file we have three methods.

getName(): This method returns the name of the module, which we are going to use in Javascript. My module name is MyCustomModule.

showToast(): This method has a special decorator attached to it i.e @ReactMethod which signifies that it is a callback method which can be invoked from the Javascript code. In this method we are showing a Toast message.

callCustomLibraryScreen(): In this method we are invoking the screen from the AAR library. As you can see we are using ScreenOneActivity class in line no 43 which is imported from “mylibrary” AAR.

Now we have to create a ReactPackage so that we can add our custom module inside the package.

package com.rnandroid;

import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CustomModulePackage implements ReactPackage {
    @NonNull
    @Override
    public List createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new CustomModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}        

Continue here