Posted on Mar 16, 2022

Creating a native module in react native.

#reactnative #android #react #mobile

I use React native on daily basis and some times i get into an issue for which i need a native solution. In this tutorial i will make a native method in java and i will call it form react native.

Lets start

This is how your Empty react native Project will look like, here we will create a native module now in android studio.

Click on Open Existing project

Select your android folder of react native project.

Step 1

Create a new Java Class for timeBeing we will name it HelloPTModule

Here we will write some Java code


package com.whatsappcamera;

import android.provider.MediaStore;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

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

import org.jetbrains.annotations.NotNull;

public class HelloPTModule extends ReactContextBaseJavaModule {
     public HelloPTModule (@Nullable ReactApplicationContext reactContext){
         super(reactContext);
     }
    @Override
    public String getName() {
        return "HelloPT";
    }

    @ReactMethod
    public void sayHello (String name, Callback cb) {
        try {
            String hello = "Hello " + name;
            cb.invoke(null, hello);
        } catch (Exception err) {
            cb.invoke(err, null);
        }
    }
}

Lets understand what is written inside this

Every Native Module written for React Native to use always extends ReactContextBaseJavaModule. This class should have a public function getName which returns a string. Note that this string is important as we will use this identifier to call our native function form react native.

sayHello is the function which we will invoke form React Native.

Step 2

Here we will create another Java class for time being lets Name it HelloPTPackage

Your helloPTPackage will look like this

package com.whatsappcamera;

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 HelloPTPackage implements ReactPackage {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

        modules.add(new HelloPTModule(reactContext));

        return modules;
    }
}

Step 3

Now we will register our package Open MainApplication, inside getPackages Method

add this line,

 packages.add(new HelloPTPackage());

This step marks end of the process.

step 5 The Final step

To use this native module you have to import

import React from 'react';
import { NativeModules, SafeAreaView,Button} from 'react-native';
const { HelloPT } = NativeModules; // this is the same name we returned in getName function.

const App = () => {

  const Change = () => {
     HelloPT.sayHello("Aman", (err, msg) => {
      if (err) {
       console.log(err);
       return;
      }
     console.log(msg)
    })
  }

  return (
    <SafeAreaView>
        <Button onPress={Change} title="call native function" />
    </SafeAreaView>
  );
};