React Native Native Bridge For Android

Anand Kashyap

6 March 2021

React Native Native bridge for Android :

In this blog, we are going to discuss the React Native Native bridge for Android. React Native bridge is a way to communicate with the native code. With the help of the Native bridge concept, your .js code can call the native code.

We are going to create a native bridge for Android :

First of all, We have to create a native module class. A native module is a Java class that usually extends the ReactContextBaseJavaModule class and implements the functionality required by the JavaScript.

package com.your-app-name;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.Map;
import java.util.HashMap;

public class MyNativeModule extends ReactContextBaseJavaModule {
  private static ReactApplicationContext reactContext;

  MyNativeModule(ReactApplicationContext context) {
    super(context);
    reactContext = context;
  }

@ReactMethod
    public void callTheNativeMethod(String message) {
       Log.d("NativeMethodLog", "Values --> "+message)
    }
}


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

package com.your-app-name;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

import java.util.Map;

import java.util.HashMap;

public class MyNativeModule extends ReactContextBaseJavaModule {

private static ReactApplicationContext reactContext;

MyNativeModule(ReactApplicationContext context) {

super(context);

reactContext = context;

}

@ReactMethod

public void callTheNativeMethod(String message) {

Log.d("NativeMethodLog", "Values --> "+message)

}

@Override

public String getName() {

return "MyNativeModule";

}

Here our module class ready now we have to register the module to the package.

Module Registration :

If the module is not registered it will not be available from JavaScript.

package com.your-app-name;

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 MyNativePackage implements ReactPackage {

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

  @Override
  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new MyNativeModule(reactContext));

    return modules;
  }

}

package com.your-app-name;

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 MyNativePackage implements ReactPackage {

@Override

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

@Override

public List<NativeModule> createNativeModules(

ReactApplicationContext reactContext) {

List<NativeModule> modules = new ArrayList<>();

modules.add(new MyNativeModule(reactContext));

return modules;

}

Here is our last step for the native code just register the package in MainApplication.

import com.your-app-name.MyNativePackage; // <-- Add this line with your package name.
...

protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new MyNativePackage()); //Add your package here
  return packages;
}

import com.your-app-name.MyNativePackage; // <-- Add this line with your package name.

...

protected List<ReactPackage> getPackages() {

@SuppressWarnings("UnnecessaryLocalVariable")

List<ReactPackage> packages = new PackageList(this).getPackages();

packages.add(new MyNativePackage()); //Add your package here

return packages;

}

Now we have done from our side just we have to import the package and call the native method. To make this easy you can create a javascript class

In my case, I am going to create a javascript class to call the native method. MyNativeBridge.js.

import { NativeModules } from 'react-native';
module.exports = NativeModules.MyNativePackage;

1 2	import { NativeModules } from 'react-native'; module.exports = NativeModules.MyNativePackage;

Now, from your other JavaScript file you can call the method like this:

import MyNativePackage from './MyNativePackage';

MyNativePackage.callTheNativeMethod('Here we have called the native method'); // In this call log gets print that we write in the native method

import MyNativePackage from './MyNativePackage';

MyNativePackage.callTheNativeMethod('Here we have called the native method'); // In this call log gets print that we write in the native method

Reference: https://reactnative.dev/docs/native-modules-android