How to Use Native Modules in React Native (Android/Hybrid)

February 5, 2025

Introduction

React Native provides the flexibility to write components in JavaScript while allowing us to interact with native code using Native Modules. This is especially useful when accessing platform-specific features not available in React Native by default.

In this blog, we will explore how to create and use a Native Module in a React Native Android project.

When to Use Native Modules?

When you need to access device-specific APIs (e.g., sensors, Bluetooth, file system).
When a third-party React Native package does not support the required functionality.
When you need better performance for CPU-intensive tasks.

Steps to Create a Native Module in Android

Create a Native Module

First, navigate to your Android folder inside your React Native project:

cd android/app/src/main/java/com/yourappname

Inside the package directory (e.g., com.yourappname), create a new Java file for the native module, e.g., MyNativeModule.java.

package com.yourappname;

import android.widget.Toast; import androidx.annotation.NonNull; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.facebook.react.bridge.Promise; import java.util.HashMap; import java.util.Map;
public class MyNativeModule extends ReactContextBaseJavaModule { private static ReactApplicationContext reactContext;

MyNativeModule(ReactApplicationContext context) { super(context); reactContext = context; }

@NonNull @Override public String getName() { return "MyNativeModule"; }@ReactMethod public void showToast(String message) { Toast.makeText(reactContext, message, Toast.LENGTH_SHORT).show(); }

@ReactMethod public void getDeviceName(Promise promise) { try { String deviceName = android.os.Build.MODEL; promise.resolve(deviceName); } catch (Exception e) {promise.reject("ERROR", e); } } }

Register the Module

Create a new file MyNativeModulePackage.java in the same directory.

package com.yourappname;

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;
public class MyNativeModulePackage implements ReactPackage { @Override public List createNativeModules(ReactApplicationContext reactContext) { List modules = new ArrayList<>(); modules.add(new MyNativeModule(reactContext)); return modules; }
@Override public List createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } }

Link the Module in MainApplication.java

Open MainApplication.java and modify the getPackages() method:

@Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new MyNativeModulePackage() // Add this line ); }

Use the Native Module in JavaScript

Now, switch back to JavaScript and import the module inside your React Native component.

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

const App = () => { const showToast = () => { MyNativeModule.showToast("Hello from Native Module!"); };

const getDeviceName = async () => { try { const name = await MyNativeModule.getDeviceName(); console.log("Device Name:", name); } catch (error) { console.error(error); } }; return (

); };

Conclusion

Native Modules are powerful tools in React Native, enabling seamless integration with platform-specific features. By following the steps above, you can create your own Android Native Modules and use them inside your React Native app.

If you need iOS support, you can create a similar module using Objective-C or Swift.

intertoons

Interoons aim at providing electronically intelligent and comprehensive range of digital marketing solutions that exceed customer expectations. We implement revolutionary digital marketing ideas to achieve a common as well as the aggregate growth of the organization. Long-term customer relations and extended support are maintained.