Two Way Communication between React Native and Android Native – Part 2

Published On: 18 October 2021.By hitesh singhal.

General

Two Way Communication between React Native and Android Native – Part 2

In this section we will see how to Communicate from Android to React Native. If you are looking from communication from React Native to Android, Please refer to This Blog.

So Lets start.

Communication from Android to React Native is done by Events. It is like Android will send events and React Native will observe the event and reacts to it.

Lets understand it by performing a simple Task. Lets call a function written in React Native from Android Native button.

Step 1: Creating a JS file in React Native to Manage Event Listeners

//EventListerner.js
import {DeviceEventEmitter} from 'react-native';

export const initEventListener = () => {
  DeviceEventEmitter.addListener('fun1', function (e: Event) {
    // handle event and you will get a value in event object, you can log it herec
    console.log('Fun1 Event Called');
    console.log(e);
  });
};

1

2

3

4

5

6

7

8

9

10

//EventListerner.js

import {DeviceEventEmitter} from 'react-native';

export const initEventListener = () => {

DeviceEventEmitter.addListener('fun1', function (e: Event) {

// handle event and you will get a value in event object, you can log it herec

console.log('Fun1 Event Called');

console.log(e);

});

};

Step 2: Call Event from Android Native

Button button2 = findViewById(R.id.button2);
        button2.setOnClickListener(v -> {
            //Setting Value to Pass to React Native Event
            WritableMap map = Arguments.createMap();
            map.putString("key1", "Value1");
            map.putString("key2", "Value2");
            try {
                getReactInstanceManager().getCurrentReactContext()
                        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                        .emit("fun1", map);

            } catch (Exception e){
                Log.e("ReactNative", "Caught Exception: " + e.getMessage());
            }
        });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Button button2 = findViewById(R.id.button2);

button2.setOnClickListener(v -> {

//Setting Value to Pass to React Native Event

WritableMap map = Arguments.createMap();

map.putString("key1", "Value1");

map.putString("key2", "Value2");

try {

getReactInstanceManager().getCurrentReactContext()

.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

.emit("fun1", map);

} catch (Exception e){

Log.e("ReactNative", "Caught Exception: " + e.getMessage());

}

});

From Part 1 we have seen that we can create an Activity in Android Native and open that Activity from React Native. Now on that Activity place a button and write the button onClickListener Event.

Inside onClickListerner, we have the first part where we are creating the Map object to send data.

WritableMap map = Arguments.createMap();
map.putString("key1", "Value1");
map.putString("key2", "Value2");

1

2

3

WritableMap map = Arguments.createMap();

map.putString("key1", "Value1");

map.putString("key2", "Value2");

In the other part we are generating an event with name fun1 and passing map object.

 try {
       getReactInstanceManager().getCurrentReactContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("fun1", map);

      } catch (Exception e){
         Log.e("ReactNative", "Caught Exception: " + e.getMessage());
      }

1

2

3

4

5

6

7

8

try {

getReactInstanceManager().getCurrentReactContext()

.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

.emit("fun1", map);

} catch (Exception e){

Log.e("ReactNative", "Caught Exception: " + e.getMessage());

}

This will be listen by React Native code which we have written in Step 1 and execute it. Now our React Native have the control to execute. By using the data and different events we can do different task as per our requirements.

Hope now you have better understanding of how to setup communication between Android Native and React Native.

You can refer the source code from the following link

https://hiteshsinghal@bitbucket.org/aurigait/reactnativeandroidcommunication.git