Custom Native Modules in React Native

Introduction to Custom Native Modules in React Native

Custom Native Modules in React Native enables developers to write mobile applications using JavaScript and utilizing a shared codebase for iOS and Android. However, there are times wh

en accessing the native functionality that isn’t possible through any of the built-in APIs in React Native is required. This is where the creation of custom native modules becomes important. In this article, we will dive deep into creating your own custom native modules in React Native for iOS and Android.

Introduction to Custom Native Modules

Custom native modules bridge the gap between JavaScript and native code, enabling you to leverage platform-specific features or third-party SDKs that aren’t directly accessible through React Native’s standard library. They allow you to write native code in Objective-C, Swift, Java, or Kotlin, and then expose this functionality to your React Native application.

Why Create Custom Native Modules?

1. Access Native Features: Some platform-specific features or APIs are not covered by React Native’s core library. Custom native modules allow you to access these features.
2. Third-Party Libraries: Integrate with native third-party libraries or SDKs that provide additional functionalities.
3. Performance Optimization: Offload heavy computations or operations to native code for improved performance.

Creating Custom Native Modules for iOS

Let’s start with iOS. We’ll use Swift to create a custom native module.

Step 1: Set Up the iOS Project

1. Open Your iOS Project: Open the ios directory of your React Native project in Xcode.
2. Create a New Swift File:
   • Go to File > New > File and choose Swift File.
   • Name it something relevant (e.g., MyCustomModule.swift).
3. Create a Bridging Header: If prompted, Xcode will ask you to create a Bridging Header. This header file allows Swift to interact with Objective-C, which is necessary for React Native integration.

Step 2: Implement the Native Module in Swift

In your newly created Swift file, implement your custom native module:

import Foundation
import React

@objc(MyCustomModule)
class MyCustomModule: NSObject {
  
  @objc
  func showAlert(_ message: String, callback: @escaping RCTResponseSenderBlock) {
    DispatchQueue.main.async {
      let alert = UIAlertController(title: "Alert", message: message, preferredStyle: .alert)
      alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
      UIApplication.shared.keyWindow?.rootViewController?.present(alert, animated: true, completion: nil)
      callback(["Message shown successfully"])
    }
  }
  
  @objc static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

Step 3: Register the Module

• Update the Bridging Header: Ensure that your bridging header file (YourAppName-Bridging-Header.h) includes the React Native header:

#import <React/RCTBridgeModule.h>

• Register the Module: You need to expose this module to React Native. Create or update a file named MyCustomModuleBridge.m:

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyCustomModule, NSObject)

RCT_EXTERN_METHOD(showAlert:(NSString *)message callback:(RCTResponseSenderBlock)callback)

@end

• Link the Native Module: Ensure that the module is included in your app’s configuration. Update AppDelegate.m if needed:

#import "YourAppName-Swift.h"

Step 4: Use the Native Module in JavaScript

Create a JavaScript wrapper for your native module:

import { NativeModules } from 'react-native';

const { MyCustomModule } = NativeModules;

export default MyCustomModule;

Usage Example:

import React from 'react';
import { Button, View } from 'react-native';
import MyCustomModule from './MyCustomModule';

const App = () => {
  const showAlert = () => {
    MyCustomModule.showAlert('Hello from Swift!', (result) => {
      console.log(result); // logs "Message shown successfully"
    });
  };

  return (
    <View>
      <Button title="Show Alert" onPress={showAlert} />
    </View>
  );
};

export default App;

Why we need  Custom Native Modules in React Native

The importance of custom native modules in React Native can be seen in the following points:

1. Access to Native APIs:

The framework gives developers a bridge to access native APIs that are unreachables through its JavaScript API. The use of custom native modules enables developers to write platform-specific code, such as iOS or Android functionality, and expose the functionality onto the JavaScript side of the application.

2. Enhancing Performance:

Some operations like heavy computations or the interaction with hardware elements are optimal when performed natively. Custom native modules can offload such responsibilities from JavaScript to native code; consequently, it helps in optimizing performance and responsiveness.

3. Integration of Existing Libraries:

Third-party libraries or SDKs that might not be listed as modules in the React Native module list can be integrated into a project using custom native modules.

4. Access to platform-specific features:

Native modules are helping out to access platform-specific features and capabilities, which are still not integrated into the core React Native libraries. For instance, whenever some new feature appears in iOS or Android, you can develop a new module for using that feature until it is merged into React Native.

5. Custom User Interfaces:

Native Custom User Interfaces Sometimes you may need custom views or widgets which are only feasible through native code. Let’s create and control such views using custom native modules that provide a much richer, nitty-gritty user experience.

6. Enhanced Control:

More Control In some operations, custom native modules have more control when it comes to the workings of such operations, including how background tasks are handled, threading, and memory management-things that may be necessary with regard to complex applications.

Creating Custom Native Modules for Android

Now let’s move on to Android. We’ll use Java for this example.

Step 1: Set Up the Android Project

1. Open Your Android Project: Open the android directory of your React Native project in Android Studio.
2. Create a New Java Class: In the android/app/src/main/java/com/yourappname/ directory, create a new Java class (e.g., MyCustomModule.java).

Step 2: Implement the Native Module in Java

Here’s how to implement a custom native module in Java:

package com.yourappname;

import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

public class MyCustomModule extends ReactContextBaseJavaModule {

    MyCustomModule(ReactApplicationContext context) {
        super(context);
    }

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

    @ReactMethod
    public void showAlert(String message, Callback callback) {
        Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
        callback.invoke("Message shown successfully");
    }
}

Step 3: Register the Module

• Create a Package Class: Create a new class MyCustomPackage.java in the same directory:

package com.yourappname;

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 MyCustomPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyCustomModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Link the Package: Open MainApplication.java and add your custom package to the list of packages:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MyCustomPackage() // Add this line
    );
}

Step 4: Use the Native Module in JavaScript

Create a JavaScript wrapper for your Android native module:

import { NativeModules } from 'react-native';

const { MyCustomModule } = NativeModules;

export default MyCustomModule;

Usage Example:

import React from 'react';
import { Button, View } from 'react-native';
import MyCustomModule from './MyCustomModule';

const App = () => {
  const showAlert = () => {
    MyCustomModule.showAlert('Hello from Java!', (result) => {
      console.log(result); // logs "Message shown successfully"
    });
  };

  return (
    <View>
      <Button title="Show Alert" onPress={showAlert} />
    </View>
  );
};

export default App;

Advantages of Custom Native Modules in React Native

Custom native modules in React Native allow developers to extend the framework’s capabilities by integrating platform-specific features or optimizing performance beyond what is achievable with the default React Native components and APIs. Here are the key advantages of using custom native modules in React Native:

1. Access to Platform-Specific Features

• Utilize Native APIs: Custom native modules allow developers to leverage platform-specific APIs and features that are not available through React Native’s standard library. This includes functionalities like advanced hardware features, proprietary services, or platform-specific optimizations.
• Implement Unique Features: If an app requires functionality that is specific to iOS or Android, such as integrating with native services or libraries, custom native modules enable the implementation of these features directly in the app.

2. Enhanced Performance

• Optimized Code Execution: For performance-critical tasks, custom native modules can offer optimizations that are not possible with JavaScript alone. Native code can execute more efficiently and quickly than JavaScript, especially for intensive operations like data processing or complex animations.
• Reduced Latency: By handling certain tasks natively, developers can reduce the latency associated with JavaScript-to-native communication, resulting in smoother and more responsive user interactions.

3. Reuse of Existing Native Code

• Leverage Legacy Code: Custom native modules allow developers to integrate and reuse existing native codebases, libraries, or SDKs. This is particularly beneficial for organizations with established native solutions that they wish to incorporate into their React Native applications.
• Preserve Investments: If significant effort has already been invested in developing native code for previous projects, custom native modules can help preserve and extend these investments without the need to rewrite or duplicate functionality in JavaScript.

4. Greater Flexibility and Customization

• Tailored Solutions: Developers can create custom modules to meet specific application needs or to implement unique features not covered by React Native’s existing components. This provides greater control over the app’s behavior and appearance.
• Custom Integrations: Custom native modules enable the integration of third-party services or proprietary systems that require specific native handling, allowing for a more customized and feature-rich application.

5. Better User Experience

• Native-Level Performance: By implementing performance-sensitive features in native code, developers can provide a more fluid and responsive user experience, with smoother animations and transitions that closely match native app performance.
• Consistent UI/UX: Custom modules can be designed to adhere to platform-specific design guidelines, ensuring that the app provides a consistent and polished user experience that aligns with the native look and feel of each platform.

6. Access to Advanced Debugging and Profiling Tools

• Native Debugging Tools: Custom native modules can take advantage of advanced debugging and profiling tools provided by Android Studio and Xcode, offering deeper insights into performance and behavior issues at the native level.
• Enhanced Error Handling: Native modules can include sophisticated error handling and logging mechanisms, which can improve the detection and resolution of issues that might not be apparent when working purely within the JavaScript layer.

7. Future-Proofing and Scalability

• Adapt to Platform Changes: As new platform features or updates are released, custom native modules can be updated to leverage these advancements, ensuring that the app remains compatible and up-to-date with the latest platform capabilities.
• Scalable Architecture: Custom modules can be designed with scalability in mind, enabling developers to build modular and maintainable code that can grow with the application’s evolving requirements.

8. Improved Integration with Third-Party Libraries

• Seamless Integration: Custom native modules facilitate the integration of third-party native libraries and SDKs that provide additional functionalities, such as payment gateways, analytics, or authentication services, which might not have JavaScript counterparts.
• Custom Adaptation: Developers can adapt third-party libraries to better fit their specific needs by creating custom wrappers or modules, ensuring that the integration is seamless and well-suited to the app’s architecture.

9. Enhanced Security

• Native Security Features: Custom native modules can utilize native security features and APIs to protect sensitive data and implement advanced security measures that might not be fully achievable with JavaScript alone.
• Secure Communication: Native code can handle sensitive operations or communication with external services in a more secure manner, leveraging platform-specific encryption and authentication mechanisms.

10. Reusable Across Projects

• Shared Modules: Once created, custom native modules can be reused across multiple React Native projects, saving development time and effort when implementing similar functionalities in different applications.
• Community Contributions: Custom modules can be shared with the React Native community, allowing other developers to benefit from and contribute to reusable solutions.

Disadvantages of Custom Native Modules in React Native

Custom native modules in React Native are typically used to access more platform-specific features, which can really improve performance, but they have downsides as well. It is very important to understand what these downsides are before making the final decision of using them within a React Native project. So, let’s go ahead and run through some of the key disadvantages of custom native modules.

1. Increased Development Complexity

• Steep learning curve: To develop the local native modules, one needs the functionality of knowing React Native (JavaScript) and native languages of iOS streams such as Objective-C/Swift or for Android as Java/Kotlin. This double language requirement adds a layer to the complexity of development that slows the progress.
• Complex integration: The integration of JavaScript with native code along with these also adds complexities, like managing inter-environment communication, which is cumbersome to develop.

2. Maintenance Challenges

• Separate Codebases: Native custom modules force a separate existence for completely different codebases, one for iOS and the other for Android. Although this may also result in higher or additional maintenance efforts because updates, fixes for bugs, and other new features have to be separately developed and tested for two different kinds of platforms, development for the iOS and Android should, in essence, be similarly handled.
• Version Compatibility: Any modification on the version of React Native or the native SDK brings a compatibility issue on the custom modules. Thus, the modules need to be updated perpetually so that new versions of React Native and platform SDKs do not break.

3. Debugging Challenges

• Complex Debugging: The process is often more complex than debugging in just JavaScript because different tools and approaches are needed when working with both JavaScript and native code.
• Interoperability Issues: Interoperability problems in the communication layer between JavaScript and native code are hard to trace and, thus, harder to be debugged; a good understanding of both environments is required for that.

4. Performance Overhead

• Communication Latency: Inter communicating data between the JavaScript and native modules could be non-real-time. If some native code runs much faster than others for certain tasks, the overhead of serialization and deserialization would severely impede overall performance.
• More Memory Usage: Bridging would lead to increased memory usage in case large portions of data are being communicated between the JavaScript and the native layers.

5. Development Time and Costs

• Longer Development Cycles: Inclusion and incorporation of native, locally-developed modules will increase the duration of development. Attempts at writing unique code for different platforms result in longer development and consequently more expensive development time.
• Resource-Intensive: Developing and maintaining custom native modules will require more resources such as developers who have specialization in native programming.

6. Technical Debt Risk

• Legacy Code Stackup: As you continue and create custom native modules, this brings about technical debt. The more massive the project, the more complex it will be to deal with and refactor that code.
• Dependency on Native Code: Heavy reliance on custom native modules means the app will never realize some of the cross-platform benefits of React Native, making it harder to scale and maintain the app.

7. High Probability for Bugs of Platform-Specific

• Inconsistency in Behavior: The custom native modules might bring device-specific bugs or inconsistency in behavior because the modules have not been rigorously tested for both iOS as well as Android.
• Varied Testing Needs: Hence, a lot of testing is required to ensure proper performance and identical results on various platforms, so it is resource-intensive.

8. Needless Complexity in Build Process

• Integration Problems of the Build: There are integration problems of the custom modules implemented in native code into the build process that sometimes generates some problems. Problems of linking or build configurations, or managing dependencies can be created that may require some extra effort to solve.
• Dependency Conflicts: Some modules can cause conflicts with other dependencies or native libraries and then have to be carefully managed within the project dependencies.

9. Learning Curve for New Developers

Onboarding Challenges: When new developers come onto the project, there is a potential steep learning curve involving the handling of custom native modules. For people who are less familiar with one of the environments, there is a potential issue reading and understanding both React Native code and native code.

10. Risk of Obsolescence

Native APIs Obsolete: The native APIs or libraries used by the custom modules may eventually become obsolete or unsupported. This requires developers to pay attention to the changes in order to keep up with the eventual refactoring or module replacement.

11. Security Risks

Potential Vulnerabilities: custom native modules that interface with sensitive data or run operations of high concern. Those modules are unlikely to be reviewed and implemented securely. Sound handling of data and best practices are highly critical.