Bridging the Gap: Native Modules and React Native

Cross-platform development languages such as React Native are truly changing the game. From developers and designers to scripters, folks in QA and product owners, everyone wants a one-to-many relationship from codebase to platform. Who wouldn’t want to write the source once and release on both iOS and Android? It sounds great, right? Well, it is, and it’s only getting better. Sadly, therein lies the rub. It seems that a lot of people, possibly you or your team, have been burned by one of React Native’s predecessors and let that experience form an opinion of all cross-platform systems. There have been plenty of promises and “game-changers” over the years — new frameworks, languages and wrappers that all claimed to fix everything the ones before them didn’t. Inevitably, issues would arise that were either genuinely prohibitive or, more commonly, would scare off potential developers and clients.

In response to all the uncertainty and doubt that comes along with a fundamental shift in thinking, there’s an inherent desire to justify those feelings. Anyone can see this by doing a quick search for the pros and cons of React Native. I promise if you do that, you’ll spend your time repeatedly reading through the same bullet points. This post is going to deal with one of those points — one of the largest misrepresentations, and creators of unnecessary worry, associated with React Native.

  Native Modules…  

It’s unfortunate. This is often used as a barrier to entry, a hindrance to starting a React Native project. Put simply: it shouldn’t be. Native modules are not scary.

Yes, iOS is iOS and Android is Android. They are their own platforms with their own unique internal structure. Sure, they may mimic functionality, but each is inherently different from the other. This means that, regardless of chosen development language, an app may need to access features that are specific to the platform. If a mobile app is being developed in a native language, unique features are available through Swift or Java, but if it is being cross-developed, those features need to be accessed through a native interface. Blocks of code exist only to allow other blocks of code to talk to each other. The catch is that these blocks have to be written in both languages.

Honestly, that’s it. That’s the big “gotcha” for a lot of people. Some cross-platform projects will never get the chance to be successful because this gap keeps them from launching. As much as 80% of code has the potential to be reused between mobile systems, but the perceived difficulty of building and maintaining a native interface layer can drop that number to zero.

If a project requires native Bluetooth or ARKit, notification systems or something else entirely, it can be done through React Native, you just need to bridge the gap between the RN layer and the native layer. If you’re thinking “no, thank you, I’d prefer to write the whole app twice,” that’s certainly your choice, however, if it’s because of native modules, I encourage you to reconsider.

OK, I will concede that mixing and maintaining native code in a multiplatform project certainly seems like an area for concern, but the truth is it’s not. Or rather, it’s not anymore.

Fortunately, Cardinal Peak has been in this ecosystem for quite a while and has learned a lot during that time. Over the last three years, developers have been looking into emerging tech and markets that, by design, improve efficiency and save money; React Native does both. Even with platform dependencies, compared to developing two native apps in tandem, we’ve seen productivity gains and cost savings from 20% to 50%, making it our go-to system for mobile development. Native module integration doesn’t scare us because we’ve done it before. We’ve worked through various implementations, some successful, some less so, and doing so has allowed our team to grow with the system.

Let’s briefly walk through what it actually takes to implement native code in React Native (RN). Everyone loves the internet of things (IoT), so let’s use Bluetooth as an example. Part of an IoT app is going to involve communication with an external device of some sort. For this case, we’ll say it’s a simple Bluetooth peripheral. The first part of any Bluetooth or Bluetooth Low Energy process is scanning, so let’s look at how that’s handled natively. For both platforms, the first thing to do is access the native Bluetooth objects.

iOS:

self.centralManager = CBCentralManager(delegate: self, queue: nil, options: nil)

Android:

final BluetoothManager manager = (BluetoothManager)getSystemService(Context.BLUETOOTH_SERVICE);
BluetoothAdapter adapter = manager.getAdapter();

Even in those couple lines of code, we can see why native support is required. iOS wants to access and cache the CBCentralManager (Core Bluetooth Central Manager) object while Android wants its own BluetoothManager. A cross-platform system needs to instantiate the proper object. Android has no idea what a CBCentralManager is and couldn’t care less. Likewise, iOS has no concept of any Android Bluetooth management and React Native doesn’t know about either of them. From the start, there is no structure to directly access Bluetooth on either platform. Still, let’s finish the current path. Now that we have the object, let’s look at scanning.

iOS:

func beginScanningForDevice() {
  self.centralManager = CBCentralManager(delegate: self, queue: nil, options: nil)
  self.centralManager.scanForPeripheralsWithServices(nil, options: nil)
}

func centralManager(central: CBCentralManager, didDiscoverPeripheral peripheral: CBPeripheral, advertisementData: [NSObject: AnyObject]!, RSSI: NSNumber!) {
  // Peripheral discovered

  // Perform connection or other logic

  // Stop scan
}

Android:

private void beginScanningForDevice() {
  scanner = adapter.getBluetoothLeScanner();
  scanner.startScan(filters, settings, scanCallback);
}

public void onScanResult(int callbackType, ScanResult result) {
  // Peripheral discovered

  // Perform connection or other logic

  // Stop scan
}

Again, we can see that both iOS and Android are doing the same thing in their own unique way. Both are initializing their scan objects, starting a scan and responding to the results of the scan. Granted, it’s a bit of a simplification, but the core difference is that one is iOS and one is Android. So, just like before, React Native needs to replicate that behavior per platform.

With RN only knowing what you tell it to know, developers need to expose any desired functionality. This is accomplished with RCT bridges (ReaCT), and those are exactly what they sound like: pieces of code that bridge the communication layer from React Native to true-native. Fortunately, Facebook provides developers with the scaffolding for these bridges in two core classes; RCTBridgeModule and ReactContextBaseJavaModule.

iOS:

// MyNativeModule.m

#import 
#import 

@interface RCT_EXTERN_MODULE(MyNativeModule, NSObject)

RCT_EXTERN_METHOD(startBTScanning:(NSString*)param1)

+ (BOOL)requiresMainQueueSetup
{
  return YES;
}

@end

Android:

// MyNativeModule.java

public class MyNativeModule extends ReactContextBaseJavaModule {
  // ...
}

Extending iOS and Android classes from those cores sets up the foundation of the bridge. Once exported, RN will need to know how to talk to the bridged objects, and these class extensions make that possible. Now, continuing the Bluetooth example, let’s connect this to React Native for both iOS and Android. For this, we need an RCTBridge telling it what functionality is available and from whom. Under the covers, this is simply a native class exporting itself and a list of methods that RN can call/call back. We can see that in the code snippets below.

iOS:

// MyNativeModule.swift

import Foundation

@objc(MyNativeModule)
class MyNativeModule : NSObject {  
  @objc func startBTScanning(_ param1: String?) {
    // Call native functionality for Bluetooth scanning
    self.beginScanningForDevice();
  }

  func beginScanningForDevice() {
    // ...
  }
}

Android:

// MyNatveModule.java

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

  // Defines the name of the native module in Javascript code
  @Override
  public String getName() {
    return "MyNativeModule";
  }

  @ReactMethod
  public void startBTScanning(String param1) {
    // Call native functionality for bluetooth scanning
    beginScanningForDevice();
  }

  beginScanningForDevice() {
    // ...
  }
}

And now that the structures exist, we can use simple accessors from React Native to utilize the RCTBridge and call the platform-specific Bluetooth code.

*It’s worth noting that for Android, there are a couple more steps that won’t be detailed here. For quick reference, those steps include registering the custom Android package and updating the main application getPackages function. Below is the Javascript code that imports the native module and calls the startBTScanning function — the same Javascript is used for both iOS and Android:

import { NativeModules } from 'react-native';

NativeModules.MyNativeModule.startBTScanning('string parameter 1');

The examples provided here are stripped down and simple, but they can be — bridging isn’t as complicated as some folks make it out to be. Of course, the more complexity present in the application, the more complexity there will be in the native access, but fortunately, the framework allows for that. Callbacks to JavaScript, promise fulfillment, even custom module generation for preexisting/legacy code are all features available to React Native projects through bridging native modules.

Cardinal Peak has consistently and successfully utilized React Native for our clients and in ways far more involved than the example above.

• Streaming audio and video on both iOS and Android using GStreamer, including OpenGL rendering.
• Custom BT and BLE logic, including a two-way pub/sub event system allowing updates from the native layer to RN.
• Specialized network layer to support self-signed HTTPS certificates.
• Homegrown third-party support for native UrbanAirship libraries before even they had RN libraries for them.
• Integration with pre-existing libraries written in Java, Swift and Objective-C, utilizing native UI elements not directly exposed by the framework, and legacy C++ libs interpreted through the JNI or through Objective-C.

That’s it. No uncrossable canyon-size native module gaps to stop you. Just build a bridge from point A to point B and then walk as much data across it as necessary.

Cardinal Peak’s developers have had great success with React Native for our clients because of native module integration, not in spite of it.