{"id":14873,"library":"react-native-codegen","title":"React Native Codegen Tools","description":"react-native-codegen is an essential internal tool within the React Native ecosystem, responsible for generating native code (Java, Objective-C++, C++) from JavaScript type definitions (Flow or TypeScript). These generated definitions form the basis of \"TurboModules\" and \"Fabric Components\" in React Native's New Architecture, enabling type-safe, performant communication between JavaScript and native platforms. It primarily operates at build time, invoked by the React Native CLI, to automatically create the necessary bridging code for native modules and UI components. The package versioning is tightly coupled with the React Native monorepo, with the latest stable versions generally mirroring the `react-native` package's minor version (e.g., `react-native-codegen@0.85.x` for `react-native@0.85.x`). Its release cadence follows the React Native release schedule, typically bi-monthly or quarterly for minor versions. It differentiates itself from older bridging mechanisms by providing a standardized, strongly-typed, and automatically generated interface, significantly reducing boilerplate and improving developer experience and performance for native module authors.","status":"active","version":"0.70.7","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/facebook/react-native","tags":["javascript"],"install":[{"cmd":"npm install react-native-codegen","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-codegen","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-codegen","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This function is primarily for internal React Native tools or advanced custom build scripts, not for typical application development. It's the core programmatic interface for triggering code generation from a schema.","symbol":"generateFromSchema","correct":"import { generateFromSchema } from 'react-native-codegen/lib/generators/GenerateFromSchema';"},{"note":"This type definition (or similar) is used internally to define the configuration structure for the codegen CLI. While not typically imported by app developers, it's relevant for those extending the codegen process or building custom tools that interact with it programmatically.","symbol":"CodegenConfig","correct":"import type { CodegenConfig } from 'react-native-codegen/lib/cli/types';"},{"note":"This import provides programmatic access to the CLI entry points and utilities. It's generally used for integration into larger build systems or custom scripts, rather than directly within a typical React Native application.","symbol":"cli","correct":"import * as cli from 'react-native-codegen/lib/cli';"}],"quickstart":{"code":"import type { TurboModule } from 'react-native';\nimport type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';\n\n// native_modules/MyNativeModule/NativeMyNativeModule.ts\n\n/**\n * This is the interface for your native module, defining methods and constants.\n * The codegen tool reads this TypeScript (or Flow) spec file.\n */\nexport interface Spec extends TurboModule {\n  /**\n   * Say hello to the native side.\n   * @returns A greeting string from native.\n   */\n  sayHello(): Promise<string>;\n  /**\n   * Adds two integers on the native side.\n   * @param a The first integer.\n   * @param b The second integer.\n   * @returns The sum of a and b.\n   */\n  add(a: Int32, b: Int32): Int32;\n  /**\n   * Returns a constant object.\n   */\n  getConstants(): {\n    DEFAULT_VALUE: string;\n  };\n}\n\n// Declare the global TurboModule proxy for type safety\ndeclare global {\n  var __turboModuleProxy: (moduleName: string) => Spec | null;\n}\n\n// --- To generate native code, run this command in your project root ---\n// npx react-native codegen-native-modules \\ \n//   --platform ios \\ \n//   --platform android \\ \n//   --project-root . \\ \n//   --output-dir ./node_modules/my-native-module/generated\n\n// (Note: The --output-dir is illustrative; in a real project, this might be managed by the CLI)","lang":"typescript","description":"This quickstart demonstrates how to define a TurboModule spec file using TypeScript, which `react-native-codegen` processes to generate native code, and how to trigger the generation via the React Native CLI."},"warnings":[{"fix":"Consult the React Native 'New Architecture' migration guide and adapt native module definitions to use the codegen-compatible Flow or TypeScript spec files. Ensure your native module code implements the generated interfaces.","message":"Projects upgrading to React Native versions 0.68 and above (which include `react-native-codegen`) must adopt the \"New Architecture\" (TurboModules/Fabric) for native modules and components. Legacy native modules will typically require significant refactoring or the use of compatibility layers. This is a fundamental shift in how native modules are defined and integrated.","severity":"breaking","affected_versions":">=0.68.0"},{"fix":"Always install `react-native-codegen` as a `devDependency` and ensure its version aligns with the `react-native` version specified in your `package.json`. It's usually managed automatically by the `react-native` CLI.","message":"The `react-native-codegen` package is tightly coupled with the `react-native` package. Using a `react-native-codegen` version incompatible with your `react-native` version (e.g., from a different major series like `0.70.x` with `0.85.x`) will almost certainly lead to build failures due to API mismatches or schema inconsistencies.","severity":"gotcha","affected_versions":">=0.68.0"},{"fix":"Always consult the official React Native documentation and migration guides for specific `react-native` releases to ensure your spec files remain compatible with the current `react-native-codegen` expectations. Keep your spec files as close to the provided examples as possible.","message":"The Flow/TypeScript spec file format used for defining TurboModules and Fabric Components can evolve between React Native minor and major versions. Changes to type definitions, allowed syntax, or structural requirements in these spec files can break code generation.","severity":"gotcha","affected_versions":">=0.68.0"},{"fix":"Verify your `package.json` scripts and CI/CD pipelines correctly invoke the codegen command. Incorrect `project-root` or missing platform flags can lead to missing generated files and subsequent native build errors.","message":"Ensure the `npx react-native codegen-native-modules` command (or `yarn react-native codegen-native-modules`) is executed in the correct project root, with all necessary `--platform` flags (e.g., `ios`, `android`), for the generated native code to be correctly created and linked into your native builds.","severity":"gotcha","affected_versions":">=0.68.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Int32` and similar types are only used within the `TurboModule` or `FabricComponent` spec files. For regular JavaScript/TypeScript, use standard number types. Also, verify your TypeScript `tsconfig.json` or Flow config properly recognizes the codegen type definitions.","cause":"Using `Int32` or other codegen-specific types directly in TypeScript/Flow code that isn't intended for the spec file, or incorrect environment setup.","error":"error: Type 'Int32' is not assignable to type 'number'."},{"fix":"Inspect the console output preceding the error for more specific messages (e.g., parsing errors, unsupported types, file access issues). Double-check your spec files for syntax errors and ensure all required tools (e.g., `clang`, Java SDK) are correctly installed and configured in your environment.","cause":"A generic error indicating that the `codegen-native-modules` command encountered an issue, often due to malformed spec files, missing dependencies, or incorrect paths.","error":"Command failed with exit code 1"},{"fix":"Run `npm install` or `yarn install` to ensure all dependencies are correctly linked. Verify your `react-native-codegen` version is compatible with your `react-native` version. If using custom scripts, ensure the import path precisely matches the package's internal structure for that version.","cause":"Mismatched `react-native-codegen` and `react-native` versions, incorrect import paths in custom scripts, or `node_modules` corruption.","error":"Cannot find module 'react-native-codegen/lib/cli/index' or similar path."},{"fix":"Review the official React Native documentation for the exact syntax required for TurboModule and Fabric Component spec files. Ensure you are using the correct type annotations and interface definitions as expected by `react-native-codegen`.","cause":"This error typically occurs when a TypeScript or Flow spec file intended for codegen has syntax that the codegen parser doesn't understand or misinterprets.","error":"Expected a call signature, but got a Flow type annotation. Did you mean to use 'function' instead of 'interface'?"}],"ecosystem":"npm"}