A Native module in React Native is a way to add native code (i.e., code written in Java or Objective-C/Swift) to a React Native application. Native modules allow React Native apps to access functionality that isn't available in JavaScript, such as accessing the camera or making network requests.

To create a Native module in React Native, you typically need to perform the following steps:

  • Create a new module file in your native code (either Java or Objective-C/Swift, depending on your platform) that exports the functionality you want to use in your React Native app.
  • Add the React Native bridge code to your module file, which allows your JavaScript code to communicate with your native code.
  • Create a new JavaScript file that defines a wrapper around your native module. This file should define a JavaScript class that provides methods that correspond to the functionality in your native module.
  • Finally, add your new module to your app's package.json file, so that it can be installed and used by your app.

Here's an example of how to create a simple Native module in React Native for Android:

  • Create a new Java file called MyModule.java, and add the following code:
    package com.myapp;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;
    public class MyModule extends ReactContextBaseJavaModule {
      public MyModule(ReactApplicationContext reactContext) {
        super(reactContext);
      }
      @Override
      public String getName() {
        return "MyModule";
      }
      @ReactMethod
      public void myMethod(String message) {
        // Do something with the message
      }
    }
  • Add the following code to the MainApplication.java file in your Android app:
    @Override
    protected List getPackages() {
        return Arrays.asList(
                new MainReactPackage(),
                new MyModulePackage() // <-- Add this line
        );
    }
  • Create a new JavaScript file called MyModule.js, and add the following code:
    import { NativeModules } from 'react-native';
    const { MyModule } = NativeModules;
    export default MyModule;
  • Finally, add your new module to your app's package.json file, like so:
    {
      "name": "myapp",
      "version": "0.0.1",
      "private": true,
      "dependencies": {
        "react": "16.13.1",
        "react-native": "0.63.2",
        ...
      },
      "rnpm": {
        "assets": [
          "assets/fonts/"
        ]
      },
      "scripts": {
        "start": "react-native start",
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "test": "jest"
      },
      "devDependencies": {
        ...
      },
      "react-native": {
        "dependencies": {
          "MyModule": {
            "platforms": {
              "android": null
            }
          }
        }
      }
    }
  • After completing these steps, you should be able to use your new Native module in your React Native app by importing it from your MyModule.js file and calling its methods. For example:
    import MyModule from './MyModule';
    MyModule.myMethod('Hello, Native module!');
BY Best Interview Question ON 03 Mar 2023