DEV Community

Cover image for React Native: Two-Way Bridging with Android Native Modules
Amit Kumar
Amit Kumar

Posted on • Edited on

React Native: Two-Way Bridging with Android Native Modules

#reactnative #bridge #programming #javascript

React Native is a powerful framework that enables developers to build mobile apps using JavaScript and React. But what happens when you need to interact with platform-specific code, like accessing native Android features? That’s where Native Modules come into play.

In this blog post, we’ll walk through a simple yet effective example of creating a native module in Android and bridging it with React Native. We’ll:

  • Call a native method from React Native to get a message
  • Send data from React Native to the Android side

🧩 Step-by-Step Guide

📁 1. Define Your Interface

Create a Kotlin class called HelloWorldModule.kt inside android/app/src/main/java/com/nativebridging/HelloWorldModule.kt:

package com.nativebridging import android.util.Log import com.facebook.react.bridge.ReactApplicationContext import com.facebook.react.bridge.ReactContextBaseJavaModule import com.facebook.react.bridge.ReactMethod import com.facebook.react.bridge.Callback import com.facebook.react.bridge.ReadableMap class HelloWorldModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) { override fun getName(): String { return "HelloWorld" } @ReactMethod fun sayHello(successCallback: Callback) { successCallback.invoke("Hello World from Android!") } @ReactMethod fun receivedData(data: ReadableMap, callback: Callback) { Log.d("ReactNative", "Received data: ${data.toString()}") val userName = data.getString("userName") ?: "No username" val age = data.getString("age") ?: "No age" Log.d("ReactNative", "Username: $userName, Age: $age") // Send response back to JS callback.invoke("Data received successfully") } }
Enter fullscreen mode Exit fullscreen mode

Screenshot for reference

Image description

🔍 What's Happening Here?

  • sayHello: Sends a simple string response to the React Native side.
  • receivedData: Receives a ReadableMap from React Native and logs the contents, then sends a confirmation back.

📦 Step 2: Register the Native Module with React Native

Create a HelloWorldPackage.kt inside android/app/src/main/java/com/nativebridging/HelloWorldPackage.kt:

package com.nativebridging import com.facebook.react.ReactPackage import com.facebook.react.bridge.NativeModule import com.facebook.react.bridge.ReactApplicationContext import com.facebook.react.uimanager.ViewManager class HelloWorldPackage : ReactPackage { override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> { return listOf(HelloWorldModule(reactContext)) } override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> { return emptyList() } }
Enter fullscreen mode Exit fullscreen mode

Screenshot for reference

Image description

Then register this package in your MainApplication.kt file: 

 PackageList(this).packages.apply { // Packages that cannot be autolinked yet can be added manually here, for example: // add(MyReactNativePackage()) add(HelloWorldPackage()) // 👈 Add this line }
Enter fullscreen mode Exit fullscreen mode

💡 Step 3: Call Native Methods from React Native

Now let's build the React Native part.

App.js (or App.tsx)

import {StyleSheet, View, NativeModules, Button, Alert} from 'react-native'; import React from 'react'; const App = () => { const {HelloWorld} = NativeModules; const getMessageFromAndroid = () => { HelloWorld.sayHello(msg => { Alert.alert('Message from Android', msg); }); }; const sendMessageToAndroid = () => { HelloWorld.receivedData( { userName: 'amit@gmail.com', age: '30', }, response => { Alert.alert('Android Response', response); }, ); }; return ( <View style={styles.container}> <Button title="Get Message from Android" onPress={getMessageFromAndroid} /> <Button title="Send Data to Android" onPress={sendMessageToAndroid} /> </View> ); }; export default App; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 20, }, });
Enter fullscreen mode Exit fullscreen mode

📲 What You’ll See in Action

  • When you tap "Get Message from Android", an alert will pop up with the message "Hello World from Android!".
  • When you tap "Send Data to Android", the Android logs will print the user data, and an alert will confirm receipt.

🔚 Wrapping Up

With just a few lines of code, you've built a bridge between your JavaScript world and the native Android layer! This is extremely useful for integrating SDKs or platform-specific features that aren’t exposed to React Native out of the box.

✅ Key Takeaways:

  • Use @ReactMethod in your native module to expose Android functions.
  • Always register the native module via a ReactPackage.
  • Use NativeModules in React Native to call native code.

Native modules give React Native superpowers 💥 — start using them to unlock more of what Android has to offer.

Top comments (0)