React Native allows developers to write cross-platform mobile applications using JavaScript and React. However, sometimes you need to interact with native functionality that isn’t available in React Native’s built-in APIs. This is where Native Modules and Native Components come into play.

In this blog, we’ll explore:

• What are Native Modules and Native Components?
• How to implement Native Modules in Android & iOS
• How to create Native UI Components in Android & iOS
• Best practices and use cases

What are Native Modules and Native Components?

Native Modules

Native Modules allow you to invoke native platform APIs (Java/Kotlin for Android, Objective-C/Swift for iOS) from JavaScript. This is useful for features like accessing device sensors, file systems, Bluetooth, and more.

Native Components

Native Components allow you to create UI elements using native views. This is helpful when React Native’s built-in UI components don’t meet performance or design requirements.

Creating a Native Module in Android

1. Modify Android Manifest for Permissions

Add necessary permissions in android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

2. Create a Native Module in Java/Kotlin

Create a Java file:android/app/src/main/java/com/yourapp/CustomModule.java

package com.yourapp;

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 CustomModule extends ReactContextBaseJavaModule {
    public CustomModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    public void showMessage(String message, Promise promise) {
        System.out.println("Message from JS: " + message);
        promise.resolve("Message received: " + message);
    }
}

3. Register the Module in React Native

Modify MainApplication.java:

import com.yourapp.CustomModule;

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CustomPackage() // Register module here
    );
}

4. Use the Native Module in JavaScript

import { NativeModules } from 'react-native';

const { CustomModule } = NativeModules;

const callNativeFunction = async () => {
  try {
    const result = await CustomModule.showMessage("Hello from React Native!");
    console.log(result);
  } catch (error) {
    console.error(error);
  }
};

Creating a Native Module in iOS (Objective-C)

1. Create a Native Module in Objective-C

Create a file: ios/CustomModule.m

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(CustomModule, NSObject)

RCT_EXTERN_METHOD(showMessage:(NSString *)message resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)

@end

2. Implement the Native Module in Swift

Create a file: ios/CustomModule.swift

import Foundation

@objc(CustomModule)
class CustomModule: NSObject {
  @objc func showMessage(_ message: String, resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
    print("Message from JS: \(message)")
    resolve("Message received: \(message)")
  }
}

3. Use the Native Module in JavaScript

import { NativeModules } from 'react-native';

const { CustomModule } = NativeModules;

CustomModule.showMessage("Hello from React Native!")
  .then(response => console.log(response))
  .catch(error => console.error(error));

Creating a Native UI Component in Android

1. Create a Custom View in Java

Create CustomViewManager.java:

package com.yourapp;

import android.view.View;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

public class CustomViewManager extends SimpleViewManager<View> {
    @Override
    public String getName() {
        return "CustomView";
    }

    @Override
    public View createViewInstance(ThemedReactContext reactContext) {
        View view = new View(reactContext);
        view.setBackgroundColor(0xFFFF0000); // Red background
        return view;
    }
}

2. Register the View Manager

Modify MainApplication.java:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CustomViewPackage() // Register custom view
    );
}

3. Use the Custom UI Component in JavaScript

import { requireNativeComponent } from 'react-native';

const CustomView = requireNativeComponent('CustomView');

export default function App() {
  return <CustomView style={{ width: 100, height: 100 }} />;
}

Creating a Native UI Component in iOS (Swift)

1. Create a Custom View in Swift

Create CustomView.swift:

import UIKit
import React

@objc(CustomViewManager)
class CustomViewManager: RCTViewManager {
  override func view() -> UIView! {
    let view = UIView()
    view.backgroundColor = UIColor.red
    return view
  }

  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

2. Register the View Manager

Create CustomViewManager.m:

#import "React/RCTViewManager.h"

@interface RCT_EXTERN_MODULE(CustomViewManager, RCTViewManager)
@end

3. Use the Custom UI Component in JavaScript

import { requireNativeComponent } from 'react-native';

const CustomView = requireNativeComponent('CustomView');

export default function App() {
  return <CustomView style={{ width: 100, height: 100 }} />;
}

Conclusion

• Native Modules allow React Native to call native code for advanced features.
• Native UI Components enable high-performance and custom UI elements.
• Always follow best practices when bridging native functionality to React Native.