Turbocharged Mobile Apps: Exploring Native Modules in React Native

Editor’s note: This blog is based on insights shared during a community meetup hosted by GeekyAnts. The session was led by Hardik Srivastava, a React Native core contributor who has actively worked on Native Modules in React Native v0.77 and beyond.

React Native has become the go-to framework for building cross-platform mobile applications with a single codebase. It streamlines development, improves time to market, and simplifies maintenance. But there are times when JavaScript alone can not do the job—especially when apps need to tap into device-specific features or third-party native SDKs.

In these situations, developers turn to Native Modules, React Native’s mechanism to directly access platform-specific APIs and libraries. From biometric authentication to advanced gestures and OS-level integrations, Native Modules help bridge the gap between React Native’s abstraction and the real power of native platforms.

In this blog, we will  explore:

• What Native Modules are and when to use them
• The different types (Turbo, Nitro, and Expo)
• A real-world implementation demo
• Performance considerations and best practices

Whether you are building your first Native Module or exploring the new React Native architecture, this guide will help you unlock the full potential of your mobile app.

Native Modules are pieces of code written in platform-specific languages—Java or Kotlin for Android and Objective-C or Swift for iOS—that can be accessed from your JavaScript codebase. They act as a bridge, enabling React Native apps to use functionalities not available in its core APIs.

This concept is not new. Native Modules were first introduced in 2015 as part of React Native’s core. They have since become essential for integrating platform-level features like biometric authentication, push notifications, device sensors, and more.

For instance, imagine you want to show a system dialog box prompting the user with a yes/no choice. React Native does not offer a unified API for that. With Native Modules, you can create your dialog handler using native code and expose it as a JS function.

While React Native offers a robust set of built-in components and APIs, there are still limitations. Here are a few scenarios where Native Modules become indispensable:

• Accessing Platform-Specific APIs: Some device features or platform SDKs are not exposed to JavaScript.
  
  
• Boosting Performance: When executing compute-heavy logic or animations that need to stay off the JS thread.
  
  
• Bridging to Native Libraries: If you’re integrating third-party libraries that don’t have a React Native wrapper.

A fun fact: If you have recently updated to React Native v0.77, you are already using Native Modules contributed by the very developer who led this talk.

Native Modules have evolved to support the needs of both managed and custom workflows. Today, there are three primary approaches developers use:

Turbo Native Modules

Turbo Modules are part of the new React Native architecture. They enable direct, type-safe communication between JS and native code using JSI (JavaScript Interface). This leads to faster execution and a more stable app.

Key benefits:

• Built-in codegen system
  
  
• Direct access to native methods
  
  
• Type-safe and high-performance
  
  

However, implementing Turbo Modules often requires you to eject from Expo if you're using it.

Nitro Modules

Developed by Margelo, Nitro Modules take the Turbo Module concept further by introducing their codegen engine—Nitrogen. It provides an optimized workflow and, in some cases, better performance.

Highlights:

• Based on JSI, similar to Turbo
  
  
• Optimized for performance-critical use cases
  
  
• Custom tooling and workflow
  
  

Expo Modules

For teams using Expo, Expo Modules offer a streamlined way to integrate native functionality without ejecting the project. It’s a simpler option, ideal for basic use cases.

Pros:

• Easy to set up
  
  
• No need to eject from the Expo
  
  
• Ideal for projects with light native requirements

The speaker walked through a real-world demo of building a Native Module that opens a dialog and returns the user's response.

Here’s a simplified version of the steps involved:

Step 1: Create the Spec File

Define your module’s function signature in TypeScript.
Example:

Step 2: Set Up Codegen

• Add the module metadata in package.json
  
  
• Trigger the codegen process:
  
  
• For Android: use generateCodegenArtifactsFromSchema
  

For iOS: run pod install

Step 3: Write Native Code

• Android (Java/Kotlin):
  
  
• Override the generated class
  
  
• Show a native AlertDialog
  
  
• Resolve the promise based on button clicked
  
  
• iOS (Swift/Objective-C):
  
  
• Import the generated spec header
  
  
• Use UIKit to present the alert
  
  
• Return result through a callback
  

Step 4: Use It in JavaScript

You can now call the module like any other async function:

Performance and Developer Experience

Turbo and Nitro Modules use JSI for native access, bypassing the old bridge system. This results in:

• Faster execution
  
  
• Lower memory usage
  
  
• Improved type safety and IDE support via codegen
  

Although setting up Turbo Modules can feel complex at first, it’s a one-time investment that pays off in performance and scalability.

Building Native Modules comes with its own set of technical hurdles, especially when working with the new architecture. Here are some frequent challenges and ways to tackle them effectively.

Common Challenges

• Platform-specific setup: Android and iOS have distinct native environments, making it hard to maintain parity.
  
  
• Limited interop tooling: Debugging native-JS bridges—especially with JSI—often lacks robust tools.
  
  
• Version mismatches: Incompatibility between React Native, JSI, and supporting libraries can break the build or bridge silently.
  
  

Best Practices

• Modularize native logic: Keep each native function in its module to improve clarity and testability.
  
  
• Sync TS specs with native code: TypeScript spec files should always reflect the latest native implementation.
  

Add debug logs: Logging native-JS interactions helps diagnose issues early in development.

At GeekyAnts, we help teams implement robust React Native architectures that scale—whether you’re building from scratch using the latest architecture or extending an existing app with Turbo Modules and JSI integrations.

Our engineers are well-versed in handling complex native setups across both iOS and Android, ensuring smooth communication between layers, improved performance, and clean, maintainable code. From exploring JSI to migrating from the legacy bridge, we simplify what’s complex.

Looking to level up your React Native stack? Let’s build together 

Native Modules are a cornerstone of React Native’s evolution, enabling apps to go beyond limitations and deliver native-grade performance and experiences. With advancements like Turbo and Nitro Modules, the barrier between JavaScript and native code is thinner than ever—making high-performance, scalable mobile apps a reality. 

Whether you are extending platform capabilities or optimizing compute-heavy workflows, mastering Native Modules is key to staying ahead in mobile development. As React Native continues to evolve, blending native power with JS flexibility isn’t just an option—it’s the new standard.