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.
Read the original → reactnative.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.