React Native Module Bridge Example

By | April 15, 2018

The document demonstrates the steps to create react native module bridge in Android and iOS.
Below are the steps for creating a native bridge in Android.


Open the Android Studio with the corresponding project from your react native project.

Step 1 :

Create the Java class that extends ReactPackage. (eg: Implement the interface methods (createViewManagers & createNativeModules…refer step3).


    public class AndroidModulePackage implements ReactPackage {


Step 2 :

Create the Java Class that extends ReactContextBaseJavaModule. (eg :

This is the class you are going to refer in React Native.


    public class WifiManager extends ReactContextBaseJavaModule{


Step 3 :

Modify the “ReactPackage”(AndroidModulePackage) class to add the “ReactContextBaseJavaModule”(WifiManager) class.

Make sure you add all the modules you use in react native to the Application class “createNativeModules module collection”.

Check the below line in the example

    modules.add(new WifiManager(reactContext));


    public class AndroidModulePackage implements ReactPackage {

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

        public List<NativeModule> createNativeModules(
                ReactApplicationContext reactContext) {
            List<NativeModule> modules = new ArrayList<>();
            modules.add(new WifiManager(reactContext));
            return modules;


Step 4:

Modify the Application class to add the ReactPackage (AndroidModulePackage).

Check the below line in the example.

    new AndroidModulePackage()


     public class MainApplication extends Application 
                                  implements ReactApplication {

      private final ReactNativeHost mReactNativeHost 
                                  = new ReactNativeHost(this) {

        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;

        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
                  new AndroidModulePackage()

        protected String getJSMainModuleName() {
          return "index";


      public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;

      public void onCreate() {
        SoLoader.init(this, /* native exopackage */ false);


Step 5:

The function which you wish to call from React should have a “@ReactMethod” annotation as shown below.



     public class WifiManager extends ReactContextBaseJavaModule 
                                     implements Handler.Callback {

        public WifiManager(ReactApplicationContext reactContext) {

        public String getName() {
            return TAG;

        public Map<String, Object> getConstants() {
            final Map<String, Object> constants = new HashMap<>();
            return constants;

        public void connectToWifi(String wifiSSID) {
            Log.i(TAG, "Call from React Native : connectToWifi");



Sending Callback to React

Add the below function in the Java class to send callback to react.

     private void sendEvent(ReactContext reactContext,
                               String eventName,
                               @Nullable WritableMap params) {
                    .emit(eventName, params);

Example Usage:

      WritableMap params = Arguments.createMap();
      params.putInt("Key", "value");
      sendEvent(reactContext, "EventKey", params);


Below are the steps for creating a native bridge in iOS.


Step 1:

Open the Xcode with the corresponding project from your react native project.

Step 2:

Create a objective C or Swift Class which extends the NSObject and implements the “RCTBridgeModule” interface.

Below example is written in objective C.


    #import <React/RCTBridgeModule.h>
    @interface DemoModule : NSObject <RCTBridgeModule>

Step 3:

Create methods that you want to access from React Native. It should have a “RCT_EXPORT_METHOD” prefix and may have “RCTResponseSenderBlock” if you want callback to React.

In the below example “addEvent” is the function which accepts two parameters from React and logs them in native.

If you want to send the control back to react native use the “callback” object. callback accepts an array of objects.



    @implementation DemoModule
    RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location )
      NSLog(@"%@ %@", name, location);

      NSArray *events =  [NSArray arrayWithObjects:@"Data1", @"Data2", nil];
      callback(@[[NSNull null], events]);

      NSString *message = @"Message from ios native!!!";



To access the native classes from Android or iOS, export the classes by using the “NativeModules” library from React Native.

Create a new .js file in react native and the code to export the functions will look like this.

    import { NativeModules } from 'react-native';
    module.exports = NativeModules.WifiManager;   // Android  Module
    module.exports = NativeModules.DemoModule;    // iOS Module

Import this file in the js file you want

    import MyNativeModules from './MyNativeModules';

Calling native functions from React

    MyNativeModules.isConnected(TARGET_SSID);    // android function
    MyNativeModules.addEvent('Hello', 'World');  // ios function

Getting Callback in React

    import { DeviceEventEmitter } from 'react-native'
    DeviceEventEmitter.addListener(WIFI_STATUS_EVENT, wifiEventCallback.bind(this));
    function wifiEventCallback(e: Event) {
       console.log("Callback Event Fired : " + JSON.stringify(e.EventKey));


Leave a Reply

Your email address will not be published.