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

Two Way Communication between React Native and Android Native

Although React Native is a very complete tool in itself to develop Apps in Android and Ios. But while Developing apps in React Native, it sometimes required some components to be developed in Android Native to have more control over it.

This Requirement can be done and there is a way so that our React Native app can Communicate with Android native code and vice versa.

I have distributed this blog in Two Parts.

The First part will cover communication from React Native to Android Native, and the other part will cover communication from Android Native to React Native.

So Let’s Jump in with First Part.

Communication From React Native to Android

Lets try to call a Android Native code from React Native button click and open an Android Native Activity.

In order to do that we  need to create a Bridging. The following code will setup bridging between Android Native and React Native.

Step 1: Create a AndroidBridgeModule

Create a file with the name AndroidBridgeModule.java and write the following code in android folder where we have MainApplication.java file

Here you can see the method with an annotation@ReactMethod. This method will be visible from React Native.

Step 2: Create a React Package

Create a file with name AndroidBridgeReactPackage.java and write the following code in android folder where we have MainApplication.java file

Step 3: Include the ReactPackage in ReactnativeHost in MainApplication.java

Now its turn to do some thing on React Native Side.

Step 4: Create a Interface File: AndroidBridgeHelper.js

Here we have exported one method openExampleActivity which in turn calling the method which is written in Android Native.

Step 5: Call ReactNative Methods available in AndroidBridgeModule

Summary:

By this way we can create a method in Native Module and call it from React Native.

If you want to setup communication from Android Native to React Native refer This Blog

You can refer the source code from the following link:

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

 

Comments