How to create an Android native module with React Native

1. Create a module class MyTestModule at android/app/main/java/com/example/MyTestModule.java

import android.util.Log;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyTestModule extends ReactContextBaseJavaModule {
    public MyTestModule(ReactApplicationContext context) {
        super(context);
    }

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

    @ReactMethod
    public void createTestEvent(String name, String location) {
        Log.d("MyTestModule", "Create event called with name: " + name
                + " and location: " + location);
    }
}

2. Create a package class MyAppPackage.java at android/app/main/java/com/example/MyAppPackage.java

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 MyAppPackage implements ReactPackage {

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

    @Override
    public List createNativeModules(
            ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();

        modules.add(new MyTestModule(reactContext));

        return modules;
    }

}

4. To register the MyTestModule package, you must add MyAppPackage to the list of packages returned in ReactNativeHost’s getPackages() method. Open up your MainApplication.java file, which can be found in the following path: android/app/src/main/java/com/your-app-name/MainApplication.java

Locate ReactNativeHost’s getPackages() method and add your package to the packages list getPackages() returns:

@Override
  protected List getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List packages = new PackageList(this).getPackages();
    // below MyAppPackage is added to the list of packages returned
    packages.add(new MyAppPackage());
    return packages;
  }

5. In React native, here is how to use the Android native module created above.

import React from 'react';
import { Button, NativeModules } from 'react-native';
const { MyTestModule } = NativeModules;

const NativeTestView: React.FC = (props)=>{
  const onPress = () => {
    console.log('Invoking the native module here!');
    MyTestModule.createTestEvent('testName', 'testLocation');
  };

  return (
    

Search within Codexpedia

Custom Search

Search the entire web

Custom Search