Introduction

After a long break, I'm excited to share a recent challenge I encountered while working on a new feature in our React Native application. Faced with buggy npm packages and compatibility issues with the latest Android and iOS versions, I decided to take a custom approach. In this post, I’ll walk you through how I built a custom native module and integrated it using React Native's architecture.

The Problem

While developing a new feature, I found that existing npm packages did not meet our needs:

• Bugs: Many packages were unstable and prone to errors.

• Compatibility Issues: Several packages were not updated to support the latest Android and iOS versions.

Solution: Custom Native Module

To address these issues, I chose to develop a custom native module. This approach allowed me to create a solution tailored to our specific requirements and ensure compatibility with current platforms.

Step-by-Step Guide

1. Setting Up the Native Module

First, I created a native module for both Android and iOS. Here’s an example of how to set up a native module for Android:

MyNativeModule.java

package com.myapp;

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

public class MyNativeModule extends ReactContextBaseJavaModule {

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    public void myNativeMethod(String message, Callback successCallback) {
        // Implement your native logic here
        successCallback.invoke("Received: " + message);
    }
}

For iOS, you would create a similar module in Objective-C or Swift:

MyNativeModule.m

#import "MyNativeModule.h"
#import <React/RCTBridgeModule.h>

@interface MyNativeModule () <RCTBridgeModule>
@end

@implementation MyNativeModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(myNativeMethod:(NSString *)message callback:(RCTResponseSenderBlock)callback) {
  // Implement your native logic here
  callback(@[[NSString stringWithFormat:@"Received: %@", message]]);
}

@end

2. Integrating with React Native

To integrate this native module with React Native, you use the React Native bridge. Here’s how you can create a bridge in JavaScript:

MyNativeModule.js

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

export default {
  myNativeMethod(message) {
    return new Promise((resolve, reject) => {
      MyNativeModule.myNativeMethod(message, (response) => {
        resolve(response);
      });
    });
  }
};

3. Using the Native Module in React Native

Now, you can use this custom module within your React Native components:

App.js

import React, { useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import MyNativeModule from './MyNativeModule';

const App = () => {
  useEffect(() => {
    // Example usage of the native method
    MyNativeModule.myNativeMethod('Hello from React Native!')
      .then(response => console.log(response))
      .catch(error => console.error(error));
  }, []);

  return (
    <View>
      <Text>Check the console for native module response!</Text>
      <Button
        title="Test Native Module"
        onPress={() => {
          MyNativeModule.myNativeMethod('Test message')
            .then(response => alert(response))
            .catch(error => alert('Error: ' + error.message));
        }}
      />
    </View>
  );
};

export default App;

Contributing Back

While working on this, I also identified some issues with the npm package I initially considered. I raised a pull request to address these issues, hoping to contribute back to the community and help others facing similar challenges.

Conclusion

Developing a custom native module was a rewarding experience. It allowed me to overcome limitations with third-party packages and ensure our feature’s compatibility with the latest platforms. React Native’s architecture provides the flexibility needed to integrate native code seamlessly, and I’m excited about the possibilities it offers.

If you’ve faced similar challenges or have any questions about integrating native modules with React Native, feel free to reach out. Let’s keep pushing the boundaries of what’s possible with React Native!