React Native Codegen: Bridging JS and Native
React Native's Codegen auto-generates the boilerplate 'glue code' connecting your JavaScript specs to native implementations. It's essential for building Turbo Modules and Fabric Components.
Why it exists
Codegen was created to eliminate the manual, error-prone work of writing the bridge code between JavaScript and native platforms. It enforces type safety and a consistent interface based on your JS/TS specs, making native module development faster and more reliable in React Native's New Architecture.
The mental model
Codegen is a build-time tool, not a runtime library. It reads your JavaScript or TypeScript interface definitions (the "specs") and generates the corresponding native code stubs (Java for Android, Objective-C for iOS) that allow your JS and native code to communicate. It's the machine that builds the bridge, not the bridge itself.
How it works
The process is triggered during your app's build. First, you define your module or component's interface in a TypeScript file. Second, you configure your package.json with a codegenConfig block, pointing to your spec files' directory (jsSrcsDir). Third, Codegen scans for files with specific names, like NativeMyModule.ts for a Turbo Module or MyViewNativeComponent.ts for a Fabric Component. Finally, it generates the necessary native files into your project's build folder, ready for you to fill in the platform-specific logic.
When to use it
Use Codegen whenever you are creating a new native module (Turbo Module) or native UI component (Fabric Component) for an app using React Native's New Architecture. It is not optional; it is the standard, required way to create typed, performant native integrations.
When not to use it
You don't need to interact with Codegen directly if you are only using pre-existing native modules from third-party libraries or sticking to pure JavaScript components. It is also not part of the legacy React Native architecture; it is specific to the New Architecture (JSI, Turbo Modules, Fabric).
One canonical example
On Android, Codegen is integrated into the build system via Gradle. After configuring package.json, running ./gradlew generateCodegenArtifactsFromSchema from the android directory will scan your project and its dependencies. It finds your spec files and generates the Java bridge code into a build/generated/source/codegen directory, creating the necessary manager and delegate classes for your native code to use.
Interview question
What is the primary function of React Native Codegen in the New Architecture?
- a.To manage the lifecycle and state synchronization of native UI components with React's virtual DOM.
- b.To enable direct, synchronous execution of JavaScript functions on the native thread at runtime.
- c.To automatically generate the native boilerplate code required for custom Turbo Modules and Fabric Components from JavaScript/TypeScript specifications.Correct
- d.To optimize the size and loading speed of JavaScript bundles by tree-shaking and minification during the build process.
Why? this is the answer
Codegen's core role is to automate the creation of the native interface code (boilerplate) for custom native modules and UI components, based on JavaScript/TypeScript definitions, eliminating manual bridging work. Option B describes the function of JSI (JavaScript Interface), which Codegen helps enable by generating the necessary interfaces, but is not Codegen's direct function.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #codegen
- #new-architecture
- #turbo-modules
- #fabric
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