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

Published On: 14 October 2021.By hitesh singhal.

General

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

//AndroidBridgeModule.java
package com.demoapp;

import android.content.Intent;
import android.widget.Toast;

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

class AndroidBridgeModule extends ReactContextBaseJavaModule {
    ReactApplicationContext reactContext;
    AndroidBridgeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

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

    @ReactMethod
    void navigateToAndroidNativeActivity() {
        ReactApplicationContext context = getReactApplicationContext();
        Intent intent = new Intent(context, ExampleActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        context.startActivity(intent);
    }

 }

//AndroidBridgeModule.java

package com.demoapp;

import android.content.Intent;

import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

class AndroidBridgeModule extends ReactContextBaseJavaModule {

ReactApplicationContext reactContext;

AndroidBridgeModule(ReactApplicationContext reactContext) {

super(reactContext);

this.reactContext = reactContext;

}

@Override

public String getName() {

return "AndroidBridge";

}

@ReactMethod

void navigateToAndroidNativeActivity() {

ReactApplicationContext context = getReactApplicationContext();

Intent intent = new Intent(context, ExampleActivity.class);

intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

context.startActivity(intent);

}

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

// AndroidBridgeReactPackage.java

package com.demoapp;

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;

class AndroidBridgeReactPackage implements ReactPackage {

    public AndroidBridgeReactPackage() {
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new AndroidBridgeModule(reactContext));
        return modules;
    }

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

}

// AndroidBridgeReactPackage.java

package com.demoapp;

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;

class AndroidBridgeReactPackage implements ReactPackage {

public AndroidBridgeReactPackage() {

}

@Override

public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

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

modules.add(new AndroidBridgeModule(reactContext));

return modules;

}

@Override

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

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

package com.demoapp;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
               packages.add(new AndroidBridgeReactPackage());
               return packages;
        }

      };

}

package com.demoapp;

import android.app.Application;

import android.content.Context;

import com.facebook.react.PackageList;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactInstanceManager;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.soloader.SoLoader;

import java.lang.reflect.InvocationTargetException;

import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost =

new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List<ReactPackage> getPackages() {

@SuppressWarnings("UnnecessaryLocalVariable")

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

// Packages that cannot be autolinked yet can be added manually here, for example:

packages.add(new AndroidBridgeReactPackage());

return packages;

}

};

}

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

Step 4: Create a Interface File: AndroidBridgeHelper.js

import {NativeModules} from 'react-native';
const AndroidBridge = NativeModules.AndroidBridge;

export const openExampleActivity = () => {
  AndroidBridge.navigateToExampleActivity();
};

import {NativeModules} from 'react-native';

const AndroidBridge = NativeModules.AndroidBridge;

export const openExampleActivity = () => {

AndroidBridge.navigateToExampleActivity();

};

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

//App.js

import React from 'react';
import type {Node} from 'react';
import {Button, SafeAreaView, StyleSheet, Text} from 'react-native';
import * as AndroidBridge from './app/AndroidBridgeHelper';

const App: () => Node = () => {
  return (
    <SafeAreaView style={styles.backgroundStyle}>
      <Text>React Native Screen</Text>
      <Button
        onPress={() => AndroidBridge.openExampleActivity()}
        title="Click to Open Android Native Screen"
      />
     </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  backgroundStyle: {
    backgroundColor: '#EFEFEF',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    padding: 10,
  },
});

export default App;

//App.js

import React from 'react';

import type {Node} from 'react';

import {Button, SafeAreaView, StyleSheet, Text} from 'react-native';

import * as AndroidBridge from './app/AndroidBridgeHelper';

const App: () => Node = () => {

return (

<Text>React Native Screen</Text>

<Button

onPress={() => AndroidBridge.openExampleActivity()}

title="Click to Open Android Native Screen"

</SafeAreaView>

);

};

const styles = StyleSheet.create({

backgroundStyle: {

backgroundColor: '#EFEFEF',

flex: 1,

flexDirection: 'column',

justifyContent: 'center',

padding: 10,

});

export default App;

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

Auriga: Leveling Up for Enterprise Growth!

By ronak|2024-07-03T13:37:59+05:303 July 2024|Categories: Uncategorized|

Auriga’s journey began in 2010 crafting products for India’s

That’s all for this blog

Discover More

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