React Native is an exceptional framework that allows developers to create cross-platform mobile applications using JavaScript. While it offers a rich set of libraries and components, there will often be occasions where you need to utilize platform-specific functionalities that are not readily available in React Native out of the box. This is where custom native modules come into play.

Native Modules allow you to extend React Native by creating modules that run in native code (Java for Android and Objective-C/Swift for iOS). This functionality is ideal when you need access to device features like the camera, GPS, or microphone, and the React Native API does not include them.

Why Create Custom Native Modules?

1. Access to Device Features: You can leverage device capabilities not exposed by React Native.
2. Performance Optimization: Some tasks (like heavy computations) can run more efficiently in native code.
3. Integration with Existing Libraries: You might want to use a native library that is not available in JavaScript.

Example: Creating a Simple Custom Native Module

Let’s create a simple example that showcases a native module bridging between React Native and the native code. We will call our module GreetingModule, which will provide a simple greeting function.

Step 1: Setting Up Your Project

Make sure you have a React Native project set up. You can create one using:

npx react-native init CustomNativeModuleExample

Once your project is created and navigated into the folder, you are ready to get started.

Step 2: Create the Native Module for Android

1. Create the Java class: Create a new Java file named GreetingModule.java in the android/app/src/main/java/com/customnativemoduleexample directory.

package com.customnativemoduleexample;

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

public class GreetingModule extends ReactContextBaseJavaModule {
    public GreetingModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    public void greet(String name, Promise promise) {
        String greeting = "Hello, " + name + "!";
        promise.resolve(greeting);
    }
}

2. Register the Module: Open MainApplication.java and add our module to the list of packages by modifying getPackages():

import com.customnativemoduleexample.GreetingModule; // Import the module

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new GreetingModule()  // Add the module
    );
}

Step 3: Create the Native Module for iOS

1. Create the Objective-C class: Create a new Objective-C file named GreetingModule.m in the ios/CustomNativeModuleExample directory.

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(GreetingModule, NSObject)

RCT_EXTERN_METHOD(greet:(NSString)name resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)

@end

2. Implement the Module: Now create a new file called GreetingModule.m:

#import "GreetingModule.h"
#import <React/RCTLog.h>

@implementation GreetingModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(greet:(NSString *)name resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{
    if (name.length == 0) {
        NSError *error = [NSError errorWithDomain:@"com.example.error"
                                             code:400
                                         userInfo:@{NSLocalizedDescriptionKey: @"Name cannot be empty"}];
        reject(@"no_name", @"There was no name provided", error);
    } else {
        NSString *greeting = [NSString stringWithFormat:@"Hello, %@!", name];
        resolve(greeting);
    }
}

@end

Step 4: Using the Native Module in JavaScript

Now it is time to consume our native module in our JavaScript code.

1. Modify the App: Open App.js and use the new GreetingModule:

import React from 'react';
import { Button, Text, View } from 'react-native';
import { NativeModules } from 'react-native';

const { GreetingModule } = NativeModules;

const App = () => {
    const handleGreet = async () => {
        try {
            const greeting = await GreetingModule.greet('John');
            console.log(greeting);
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <View>
            <Button title="Greet" onPress={handleGreet} />
        </View>
    );
};

export default App;

Step 5: Run Your Application

Now that everything is set up, you can run your application on the simulator or device.

npx react-native run-android

# or
npx react-native run-ios

When you press the “Greet” button, it should call the native module, and you will see "Hello, John!" logged in the console!

Creating custom native modules in React Native can seem daunting at first, but with the proper steps and examples, you can easily integrate native functionalities that fulfill your application requirements. Enjoy building your custom modules!