Passing Information From Java to JavaScript in React Native

In this blog, we will learn about passing Information from Java to JavaScript in our React Native Application.

Well, react native has a huge community and makes everything easy especially for cross-platform developments (both Android & iOS).

As a result, most of the problems a beginner developer will face have already been posted and resolved over the internet.

But sometimes we just want to do a few things in the Android Code and then pass on this to the javascript.

Let’s see how we can do this

APPROACH:

First, we will take events from react native.
Then we will emit this event from our native java code
After this, we will add an event listener to our javascript code.
On Receiving the event and params in javascript code we can use it as per our business logic.

CODE :

First, we will just have a look at the Android Side Changes

Let’s just say I want to Transfer a String to javascript code from our MainActivity.

public class MainActivity extends ReactActivity {
    public String stringFromJava = "This string is coming from Java Code";



     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WritableMap payload = Arguments.createMap();
        // Put data to map
        payload.putString("MyCustomEventParam", stringFromJava);

        // Emitting event from java code
        (getReactNativeHost().getReactInstanceManager().getCurrentReactContext()).getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                                        .emit("MyCustomEvent", payload);
    }




    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "DemoApplication";
    }
}

public class MainActivity extends ReactActivity {

public String stringFromJava = "This string is coming from Java Code";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

WritableMap payload = Arguments.createMap();

// Put data to map

payload.putString("MyCustomEventParam", stringFromJava);

// Emitting event from java code

(getReactNativeHost().getReactInstanceManager().getCurrentReactContext()).getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

.emit("MyCustomEvent", payload);

}

/**

* Returns the name of the main component registered from JavaScript.

* This is used to schedule rendering of the component.

@Override

protected String getMainComponentName() {

return "DemoApplication";

}

With this, you are able to emit an event from your native java to javascript.

But Still, you will not be able to receive this event in your javascript code as you have not subscribed to this event.

So, now let’s just have a look at the javascript side changes you need to make.

Let’s say I want to receive this event in my App.js file.

import React, { Component } from "react";
import { 
    View,
    Text,
    DeviceEventEmitter 
    // other react-native components that you want to import
    } from "react-native";

// your other import statements

export default class App extends Component {

    componentDidMount() {
        DeviceEventEmitter.addListener('MyCustomEvent',(event)=>{
            console.log("MyCustomEvent -->",event); 
            console.log("MyCustomEvent MyCustomEventParam -->", event.MyCustomEventParam);
            // Add your Business Logic over here
        });
    }

    render() {
        return (
            <View>
                <Text> Sample Demo App for Recieving information from Java to Java Script</Text>
            </View>
        );
    }
}

import React, { Component } from "react";

import {

View,

Text,

DeviceEventEmitter

// other react-native components that you want to import

} from "react-native";

// your other import statements

export default class App extends Component {

componentDidMount() {

DeviceEventEmitter.addListener('MyCustomEvent',(event)=>{

console.log("MyCustomEvent -->",event);

console.log("MyCustomEvent MyCustomEventParam -->", event.MyCustomEventParam);

// Add your Business Logic over here

});

}

render() {

return (

<View>

<Text> Sample Demo App for Recieving information from Java to Java Script</Text>

</View>

);

}

Key Points to Understand

Java KeyPoints

You need to access reactContext and call the getJSModule function.
The parameter passed in the getJSModule function will take a java class reference with which you want to fire the event.
After you get an instance of the JSModule you need to call the emit function to actually trigger the event.
The emit function takes two arguments 1) Event name as String 2) payload (in form of WritableMap, a custom class designed by Facebook developers).

JavaScript KeyPoints

You need to import DeviceEventEmitter from the react-native package.
Then in componentDidMount() method, you need to add a listener to the event you just triggered using DeviceEventEmitter.addListener() method
The addListener method will take two params again 1) Event name as String 2) Callback Method to be called when this event is received.

Common Mistakes during Implementation

Name of the event in Java and Javascript should be exactly the same (including the case of the letters).
If you don’t want to send any parameters and just want to trigger an event from java code, then keep the payload empty and not null.
Don’t be confused with the param name and the event name

Hope this helps you.

Keep coding and Keep Sharing 🙂

References : 1) https://facebook.github.io/react-native/docs/native-components-android#events

2) https://levelup.gitconnected.com/react-native-events-in-gory-details-what-happens-on-the-way-to-listeners-2cee6c55940c

anchit 5 March 2021

. . .