React Native Native Module: New Architecture, JSI, TurboModules

React Native Library with a Native Module: New Architecture, JSI, TurboModules

Developing a mobile app often hits proprietary SDKs from vendors — integration with biometrics, cameras, or MDM systems. Off-the-shelf libraries from React Native Community rarely cover these cases, so you need to write a native module from scratch. We've been doing this for over 5 years, delivering more than 10 projects with native modules for iOS and Android. Our experience shows that choosing the right architecture slashes development time by 2–3x.

Old Architecture vs New Architecture: Core Differences

New Architecture uses JSI (JavaScript Interface) — a direct C++ binding between the JS engine (Hermes) and native code. TurboModules are lazy-loaded and invoked synchronously. For high-frequency operations (every animation frame, real-time audio processing), this is critical: performance difference reaches 5–10x. The library must support both variants via the codegen specification.

Why New Architecture Is Faster

The old Bridge works asynchronously via JSON serialization. A native method call goes: JavaScript → JSON serialization → Bridge queue → deserialization → Java/ObjC. This adds ~1–5 ms per call and makes synchronous access to native code impossible. New Architecture uses JSI (JavaScript Interface) — a direct C++ binding between the JS engine (Hermes) and native code. TurboModules are lazy-loaded and invoked synchronously. For high-frequency operations (every animation frame, real-time audio processing), this is critical.

React Native 0.73+ includes New Architecture by default. The library must support both variants via the codegen specification.

How to Create a Library via create-react-native-library

npx create-react-native-library@latest my-module — standard scaffold. Generates structure:

my-module/
  android/src/main/java/…/MyModule.kt
  ios/MyModule.mm (Objective-C++ for JSI bridge)
  src/index.tsx — TypeScript API
  src/NativeMyModule.ts — codegen spec

Codegen Specification

The TypeScript file describes the contract from which codegen generates C++ glue code:

// NativeMyModule.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  multiply(a: number, b: number): Promise<number>;
  getDeviceId(): string; // synchronous method — only in New Architecture
}

export default TurboModuleRegistry.getEnforcing<Spec>('MyModule');

getEnforcing throws an error at startup if the native module is not registered — better than silent undefined.

Android Implementation: Kotlin + ReactPackage

class MyModule(reactContext: ReactApplicationContext) : NativeMyModuleSpec(reactContext) {
    override fun getName() = NAME

    override fun multiply(a: Double, b: Double): Promise<Double> {
        return Promise.resolve(a * b)
    }

    override fun getDeviceId(): String {
        return Settings.Secure.getString(
            reactApplicationContext.contentResolver,
            Settings.Secure.ANDROID_ID
        )
    }

    companion object {
        const val NAME = "MyModule"
    }
}

NativeMyModuleSpec is an abstract class generated by codegen from the TypeScript spec. If a method is not implemented — compile-time error, not runtime crash. This is a key advantage of New Architecture.

ReactPackage registers the module:

class MyPackage : ReactPackage {
    override fun createNativeModules(context: ReactApplicationContext) = listOf(MyModule(context))
    override fun createViewManagers(context: ReactApplicationContext) = emptyList<ViewManager<*, *>>()
}

iOS: Objective-C++ Bridge

For New Architecture, iOS implementation is written in Objective-C++ (.mm) or Swift with ObjC wrapper. Swift does not natively support JSI without a bridge, so an .mm file with #import <React/RCTUtils.h> remains mandatory.

// MyModule.mm
#import "MyModule.h"
#import <React/RCTUtils.h>

@implementation MyModule

RCT_EXPORT_MODULE()

- (NSString *)getDeviceId {
  return [[[UIDevice currentDevice] identifierForVendor] UUIDString];
}

@end

For synchronous methods in Old Architecture: RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD — it works but blocks the JS thread. In New Architecture, synchronicity via JSI does not block the JS thread — a fundamentally different model.

Native View Components

If the task requires a custom native View (e.g., SDK maps, custom video player), we use ViewManager on Android / RCTViewManager on iOS. New Architecture introduces Fabric for native components — analogous to TurboModules for views. Codegen generates ComponentDescriptor from a TypeScript spec with codegenNativeComponent.

Expo Support

If the app uses Expo managed workflow, the native module requires the Expo Modules API instead of bare React Native. npx create-expo-module generates the correct scaffold. ExpoModule is registered automatically without ReactPackage — Expo Autolinking finds the module via package.json.

Typical Errors

What's Included in Turnkey Native Module Development

Our engineers (5+ years of React Native experience) deliver:

• Requirements analysis and module API design
• Native code implementation in Kotlin and Objective-C++/Swift
• TypeScript specification code generation and New Architecture integration
• Unit and integration tests for both platforms
• Build and publication to npm/Expo registry
• Module documentation and usage examples
• Post-release support (bug fixes, updates for new RN versions)

Estimated Timelines

Cost is calculated individually. We will assess your project — contact us for a consultation.

How We Guarantee Quality

Using codegen eliminates runtime compile-time errors. Every module is tested on real devices (iOS 15+ and Android 10+). We provide a compatibility certificate with the latest React Native versions. We guarantee free support for 30 days after delivery.

According to official React Native documentation, JSI reduces per-call latency from 1–5 ms to <0.1 ms.

Order native module development — get a consultation from our engineers.