Creating a Custom Native Module for React Native
React Native is a powerful framework that allows developers to build cross-platform mobile apps using JavaScript. While it provides a rich ecosystem of pre-built components and libraries, sometimes developers need to access platform-specific features that are not available out of the box. In such cases, creating a custom native module for React Native becomes essential. In this blog, we’ll explore how to build and integrate a custom native module to extend the functionality of your app, focusing on React Native app development and React Native mobile app development.
Why Create a Custom Native Module in React Native?
React Native offers a large set of APIs and libraries for most mobile app development needs. However, if your project requires access to platform-specific features like the device's Bluetooth, camera, or sensors that aren’t fully supported in JavaScript, you may need to create a native module in Java (for Android) or Objective-C/Swift (for iOS).
Creating custom native modules allows developers to:
- Extend the functionality of a React Native app beyond what’s available by default.
- Access native platform features that are not exposed to JavaScript.
- Optimize performance by leveraging native code for complex tasks.
By leveraging custom native modules, you get the best of both worlds—efficient, high-performing native functionality with the cross-platform capabilities of React Native.
Setting Up Your React Native Environment
Before you create a custom native module, ensure that your development environment is properly configured for both iOS and Android. If you’re working with React Native mobile app development, you’ll need to have Android Studio set up for Android development and Xcode for iOS development.
Step 1: Install React Native CLI
If you haven’t already, you’ll need to install the React Native CLI to initialize your project.
npm install -g react-native-cli
react-native init CustomModuleApp
Creating a Native Module for Android
Let’s start with creating a custom native module for Android. Follow these steps:
Step 2: Create a Java Module
- Navigate to the
androiddirectory of your project and open it in Android Studio. - In the
android/app/src/main/java/com/yourproject/folder, create a new Java class. Let’s call itCustomModule.java.
Step 3: Write the Java Code
In the CustomModule.java file, implement your native code. For example, if you want to expose a native function to return the battery level of the device:
package com.yourproject;
import android.os.BatteryManager;
import android.content.Intent;
import android.content.IntentFilter;
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 {
private static ReactApplicationContext reactContext;
CustomModule(ReactApplicationContext context) {
super(context);
reactContext = context;
}
public String getName() {
return "CustomModule";
}
public void getBatteryLevel(Promise promise) {
try {
Intent batteryIntent = reactContext.registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
int level = batteryIntent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);
int scale = batteryIntent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);
float batteryPct = level / (float) scale * 100;
promise.resolve(batteryPct);
} catch (Exception e) {
promise.reject("Error", e);
}
}
}
This code exposes a method getBatteryLevel that returns the battery percentage of the device.
Step 4: Register the Module
Now that your native code is ready, you need to register the module with React Native.
- In the same
java/com/yourproject/folder, create a new file calledCustomPackage.java. - Add the following code to register the native module:
package com.yourproject;
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 CustomPackage implements ReactPackage {
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new CustomModule(reactContext));
return modules;
}
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
Step 5: Modify the Main Application
Finally, open MainApplication.java and register the CustomPackage inside the getPackages method.
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CustomPackage() // Register your custom package
);
}
Now, your custom module is available to be used in React Native!
Creating a Native Module for iOS
Let’s move on to creating the same module for iOS using Objective-C or Swift.
Step 6: Create an Objective-C Module
- Navigate to the
iosfolder and open your project in Xcode. - In the
iosdirectory, create a new Objective-C class, e.g.,CustomModule.m.
Step 7: Write the Objective-C Code
Inside the CustomModule.m file, you can implement your native method:
@interface RCT_EXTERN_MODULE(CustomModule, NSObject)
RCT_EXTERN_METHOD(getBatteryLevel:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
@end
Implement the functionality inside the CustomModule.swift file if you’re using Swift.
Step 8: Register the Module in Xcode
Once you’ve written the native code, register the module with React Native by modifying your AppDelegate.m or AppDelegate.swift file, similarly to the Android setup.
Using Your Custom Native Module in JavaScript
Now that you’ve created the custom native module for both Android and iOS, you can use it in your React Native app development code.
import { NativeModules } from 'react-native';
const { CustomModule } = NativeModules;
CustomModule.getBatteryLevel()
.then(batteryLevel => console.log("Battery level is", batteryLevel))
.catch(error => console.error(error));
Benefits of Custom Native Modules in React Native Mobile App Development
- Platform-Specific Features: Native modules allow you to access platform-specific functionality that isn't available through React Native's core modules.
- Improved Performance: By using native code for performance-critical tasks, you can enhance your app’s efficiency.
- Flexibility: Custom modules give you the flexibility to add any feature required for your mobile app, regardless of platform restrictions.
- Seamless Integration: Native modules integrate smoothly into your React Native mobile app development workflow, making them easy to use with your existing JavaScript code.
Conclusion
Creating a custom native module in React Native app development empowers you to build feature-rich mobile applications with platform-specific capabilities. Whether you’re developing a unique app feature or optimizing performance, custom modules offer the flexibility and power to enhance your project. With the right knowledge of Java for Android and Objective-C/Swift for iOS, you can extend the functionality of your React Native apps, providing users with the best possible experience.
By leveraging the potential of custom native modules in your React Native mobile app development journey, you can ensure that your app remains high-performing, efficient, and fully capable of utilizing native device features.
English
Arabic
French
Spanish
Portuguese
Deutsch
Turkish
Dutch
Italiano
Russian
Romaian
Greek