Native Modules: Bridge JS to Native Platform APIs
Native Modules are your bridge from JavaScript to platform-specific APIs, letting your app use features not exposed by default. Use them when you need direct access to Android or iOS SDKs. The main footgun is misconfiguring Codegen in your project.
Why it exists
React Native provides many components, but it can't cover every platform-specific API for Android and iOS. When your app needs to interact with a native feature that isn't available in React Native or an existing library, you need a way to write that integration code yourself. Native Modules solve this by providing a mechanism to bridge your JavaScript application with the underlying native platform.
The mental model
Think of a Native Module as a contract and a translator. You first write a contract in a language both sides understand: a typed JavaScript specification. This contract defines the functions you want to expose, like setItem or getItem. Then, you write the native code (the translator) on Android and iOS that fulfills this contract, using platform-specific APIs. The React Native runtime ensures your JavaScript calls are correctly routed to the right native implementation.
How it works
The modern process uses "Turbo Native Modules" and Codegen. First, you define a typed specification in a TypeScript or Flow file, outlining the methods and their signatures. Second, you configure Codegen in your package.json file, pointing it to your spec file. When you build the app, Codegen automatically generates the necessary interface boilerplate in the native languages (Java for Android, Objective-C for iOS). Finally, you write the actual native code that implements these generated interfaces, and then you can call your module from your JavaScript code.
When to use it
Use a Native Module when you need to access a platform API that has no React Native equivalent or existing third-party library. This is common for features deeply integrated with the OS, such as custom hardware interactions, using specific OS-level data stores, or integrating a native SDK that doesn't have a React Native wrapper.
When not to use it
Avoid writing a Native Module if a well-maintained third-party library already exists. Building and maintaining native code adds complexity and requires platform-specific knowledge. Always check for existing solutions before building your own. If the functionality can be achieved purely in JavaScript, stick with that to maintain cross-platform simplicity.
One canonical example
A common use case is creating a persistent key-value storage module. To build a NativeLocalStorage module that mirrors the web's localStorage API, you define a spec in JavaScript with setItem, getItem, and removeItem. Codegen creates the interfaces. Then, you implement the module on Android using SharedPreferences and on iOS using NSUserDefaults to provide a unified, persistent storage API for your React Native app.
Interview question
Under which circumstance would you most appropriately choose to implement a React Native Native Module?
- a.When you need to optimize a computationally intensive JavaScript function by rewriting it in a native language.
- b.To ensure all application logic runs natively for maximum performance and security across both iOS and Android.
- c.To access a platform-specific API (like a custom hardware sensor) that lacks a React Native equivalent or existing third-party library.Correct
- d.When you want to share JavaScript code directly between your React Native application and a native iOS or Android app.
Why? this is the answer
The card states that Native Modules are used "when your app needs to interact with a native feature that isn't available in React Native or an existing library." Option C directly reflects this core purpose. Option A is incorrect because the card advises against Native Modules if functionality can be achieved purely in JavaScript, even if native might offer performance gains, as their primary role is API bridging, not general JS optimization.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react native
- #native modules
- #mobile
- #codegen
- #javascript
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles