React Native Native Modules with Example: Traditional Way vs TurboModules (2025 Guide)

React Native provides powerful capabilities to communicate with platform-specific code using Native Modules. With the new TurboModules architecture, this process becomes more efficient, performant, and memory-friendly. In this blog, we’ll explore both the traditional and TurboModules approaches, compare them, and provide code examples.

📚 What is a Native Module in React Native?

Native Modules allow you to write platform-specific functionality in Java (Android) or Objective-C/Swift (iOS) and expose it to your React Native JavaScript code.

---

⚙️ Traditional Native Modules (Old Architecture)

In the traditional model, native modules are registered using ReactPackage and invoked via the bridge (async communication).

🧪 Android Example (Java)

// MyModule.java
public class MyModule extends ReactContextBaseJavaModule {
  public MyModule(ReactApplicationContext context) {
    super(context);
  }

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

  @ReactMethod
  public void showMessage(String msg) {
    Toast.makeText(getReactApplicationContext(), msg, Toast.LENGTH_SHORT).show();
  }
}

// MyPackage.java
public class MyPackage implements ReactPackage {
  @Override
  public List createNativeModules(ReactApplicationContext context) {
    return Arrays.asList(new MyModule(context));
  }
}

// MainApplication.java
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.asList(new MainReactPackage(), new MyPackage());
}

🧪 JS Call

import { NativeModules } from 'react-native';
NativeModules.MyModule.showMessage("Hello from Native!");

---

🚀 TurboModules (Modern Architecture)

TurboModules use JSI for direct, synchronous access and are code-generated with type safety via TypeScript interfaces.

🧩 Step 1: Define Spec

// MyModule.ts (TypeScript)
export interface Spec extends TurboModule {
  showMessage(msg: string): void;
}
export default Spec;

⚙️ Step 2: Implement in C++/Java (Android)

// MyModule.cpp (C++)
jsi::Value MyModule::showMessage(jsi::Runtime &rt, const jsi::Value *args, size_t count) {
  std::string msg = args[0].asString(rt).utf8(rt);
  // platform call to show toast...
  return jsi::Value::undefined();
}

📦 Step 3: Register Module

// MyModuleProvider.java
@ReactModule(name = MyModule.NAME)
public class MyModule extends TurboReactPackage {
  ...
}

🔗 Step 4: Use in JS

import MyModule from 'react-native/Libraries/BatchedBridge/NativeModules';
MyModule.showMessage("Hello via TurboModule!");

---

🆚 Traditional vs TurboModules: Key Differences

Feature	Traditional	TurboModules
Bridge	Async via JSON	Direct via JSI
Performance	Slower	Much faster
Codegen	Manual interface	Typed via TypeScript
Lazy loading	No	Yes
Memory Usage	Higher	Lower

---

🧠 Final Thoughts

TurboModules are the future of native module development in React Native. While traditional modules are still supported, it’s highly recommended to adopt TurboModules for better performance and type safety—especially in modern apps using the New Architecture (Fabric, JSI, Hermes).

Want to migrate your traditional modules to TurboModules? Start by defining typed interfaces in TypeScript, and let Codegen handle the native scaffolding for you.

💡 Pro Tip: TurboModules shine in performance-critical features like sensors, Bluetooth, camera, and background tasks.