Bridging the Gap: Integrating Android Native Modules in React Native Apps

NativeModules is a module provided by React Native that allows JavaScript code to interact with native code written in Java/Kotlin (for Android) or Objective-C/Swift (for iOS). It serves as a bridge between the JavaScript side of a React Native app and the underlying native functionality of the host platform.

It allows React Native apps to use features or functionalities that are available only in native, such as accessing the device’s hardware sensors, native dialogs, or specific platform APIs. Using native code for certain tasks can improve performance, and NativeModules provides a way to access that native code.

Let’s start with a small native Android module that displays a Toast message

1. Create a Native Module in Android App folder

package com.toast.example

import android.widget.Toast
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

class ToastModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String {
        return "ToastModule"
    }

    @ReactMethod
    fun showToast(message: String, duration: Int) {
        Toast.makeText(reactApplicationContext, message, duration).show()
    }
}

2. Register the Module with React Native

Create MyToastPackage.kt class to register NativeModule to React Native which implements ReactPackage and tells react native about Native Modules.

// MyToastPackage.kt
package com.toast.example

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.uimanager.ViewManager
import com.facebook.react.bridge.ReactApplicationContext

class MyToastPackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        return listOf(ToastModule(reactContext))
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return emptyList()
    }
}

3. Register your package in MainApplication.kt

// MainApplication.kt
package com.toast.example

import android.app.Application
import com.facebook.react.ReactApplication
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.shell.MainReactPackage
import com.toast.example.MyToastPackage

class MainApplication : Application(), ReactApplication {

    private val mReactNativeHost = object : ReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> {
            return listOf(
                MainReactPackage(),
                MyToastPackage() // Add your custom package here
            )
        }
    }

    override fun getReactNativeHost(): ReactNativeHost {
        return mReactNativeHost
    }
}

Don’t forget to rebuild the app after this step.

4. Use the Toast Native Module in JavaScript

Now we are importing NativeModules from react-native. Destructure the ToastModule from NativeModules and callToastModule.showToast with the message and duration as arguments on click of Button.

// App.js
import React from 'react';
import { Button, NativeModules } from 'react-native';

const { ToastModule } = NativeModules;

export default function App() {
  const showNativeToast = () => {
    ToastModule.showToast('Toast From Native Modules', ToastModule.SHORT);
  };

  return (
    <Button title="Show Native Toast" onPress={showNativeToast} />
  );
}

This approach combines the power of React Native’s cross-platform abilities with the full capabilities of native Android development.

Reference : https://reactnative.dev/docs/native-modules-android