React Native provides a powerful way to build cross-platform mobile apps using JavaScript and React. However, there are times when developers need to interact with native platform features that are not exposed through React Native’s core APIs. That is where native modules come in.
Over time, React Native has evolved with multiple approaches for building native modules:
- Legacy Native Modules using the traditional bridge
- Turbo Modules powered by JSI for better performance
- Expo Modules for a more streamlined experience inside the Expo ecosystem
- Nitro, a newer approach focused on improving both performance and developer experience
In this article, we will explore Nitro, why it stands out, and how it compares to other approaches. We will also walk through the process of creating a native module using Nitro.
Understanding React Native Native Modules
A native module in React Native allows JavaScript code to interact with platform-specific functionality written in Swift or Objective-C on iOS, and Kotlin or Java on Android.
These modules are commonly used to expose capabilities such as:
- device storage
- sensors
- system utilities
- native platform APIs
With several approaches now available, developers need to choose the one that best fits their project based on performance, maintainability, developer ergonomics, and ecosystem alignment.
Introduction to Nitro
Nitro is an emerging solution for React Native native module development that reduces boilerplate while improving performance. It builds on top of Turbo Modules and JSI, but places a stronger emphasis on developer experience and type-safe native bindings.
How Nitro Works
Nitro is built on top of the JavaScript Interface (JSI), which allows direct communication between JavaScript and native code without relying on the traditional React Native bridge. This enables synchronous execution and significantly lowers overhead compared to older approaches.
Nitro consists of three key parts:
- Nitro Module: A library built with Nitro that contains one or more Hybrid Objects
- Hybrid Object: A native object implemented in C++, Swift, or Kotlin and exposed directly to JavaScript
- Nitrogen: A code generator that creates native bindings from TypeScript interfaces, keeping JavaScript and native implementations aligned
Why Choose Nitro?
1. Exceptional Performance
Performance is one of Nitro’s strongest selling points. In benchmark comparisons of repeated method calls, Nitro demonstrates a dramatic improvement over other approaches.
| Test Case | Expo Modules | Turbo Modules | Nitro Modules |
|---|---|---|---|
100,000× addNumbers()
|
434.85ms | 115.86ms | 7.27ms |
100,000× addStrings()
|
429.53ms | 179.02ms | 29.94ms |
Nitro achieves this through several architectural advantages:
- A lightweight layer on top of JSI with compile-time type checking using C++ templates or
constexpr - Direct Swift/C++ interoperability without relying on Objective-C
- Use of
jsi::NativeStateinstead ofjsi::HostObject, enabling better native prototypes and memory management
2. Strong Type Safety
Nitro Modules are both type-safe and null-safe.
Nitrogen uses TypeScript specifications as the single source of truth and generates native interfaces that match those types exactly. If you implement a function with an incompatible return type, the app will fail to compile. That gives developers strong compile-time guarantees and helps prevent runtime type mismatches.
3. Object-Oriented Approach
Every Hybrid Object in Nitro is a real native object that can be created, passed around, and destroyed.
This supports a more natural object-oriented programming model. Functions are also treated as first-class citizens, meaning they can stay in memory, be invoked when needed, and be cleaned up automatically when they are no longer required.
Creating a Nitro Module
Let’s walk through the process of creating a Nitro Module.
1. Initialize the Template
Start by creating a new Nitro Module using the CLI.
# Add the actual Nitro CLI command here
`
2. Define Your TypeScript Interface
Create a TypeScript interface that extends HybridObject.
ts
// Add your TypeScript interface here
3. Generate Native Interfaces
Run Nitrogen to generate the native interface specifications.
`bash
Add the nitrogen/codegen command here
`
4. Implement Native Classes
Implement the generated specifications in Swift and/or Kotlin.
swift
// Add Swift implementation here
kt
// Add Kotlin implementation here
5. Register Your Hybrid Objects
Configure the nitro.json file to autolink your Hybrid Objects.
json
{
"autolink": {
"hybridObjects": []
}
}
6. Use in JavaScript
Once the native classes are implemented and registered, you can use your Hybrid Object directly from JavaScript.
ts
// Add JavaScript usage example here
View Components with Nitro
Nitro also supports creating React Native Views rendered with Fabric and backed by a C++ ShadowNode. It uses a more efficient prop parsing system than standard Fabric views.
Nitro Views require React Native
0.78.0or higher with the new architecture enabled.
Creating a Nitro View
A simplified Nitro View workflow looks like this:
- Declare your view interface
- Generate code with
npx nitro-codegen - Implement the native view
- Configure it in
nitro.jsonand run Nitrogen again - Initialize it in JavaScript
- Use it in your React Native components
Key Features
- Rich prop types, including Nitro-supported complex types
- Callback support using wrapped function objects
- Method access through refs
tsx
// Add Nitro View component example here
Final Thoughts
Nitro pushes React Native native module development toward a faster, safer, and more ergonomic future.
For teams building performance-sensitive mobile apps, Nitro offers a compelling mix of:
- near-native execution speed
- strong type safety
- lower boilerplate
- a more modern object-oriented model
- support for advanced native view integrations
If your project depends heavily on native functionality and you want a cleaner way to bridge JavaScript with platform-specific code, Nitro is absolutely worth exploring.
Originally published on GeekyAnts: Building High-Performance Native Modules for React Native with Nitro
Top comments (0)