What is Codegen in the new React Native architecture, and why is it required?

Short answer

It is a tool that reads TypeScript/Flow type files and automatically generates matching C++, Java, and Swift/Objective-C code to ensure full type compatibility and prevent type errors between JS and Native.

Explanation

Codegen prevents crashes caused by parameter mismatches between JavaScript and native code. Instead of manually and slowly checking Bridge parameters, Codegen generates strong, strict intermediate C++ code during the build, ensuring type safety on both sides before the app runs.

Code example

// Define the interface read by the tool Codegen:
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  multiply(a: number, b: number): Promise<number>;
}

export default TurboModuleRegistry.get<Spec>('Calculator');

Common mistakes

• Using unsupported types such as Any or complex union types in a Codegen specification file.

Follow-up questions

• What is the New Architecture in React Native, and what is the role of JSI (JavaScript Interface)?
• What is the traditional React Native architecture (The Bridge), and what performance bottlenecks are associated with it?

Sources

• React Native docs — What is Codegen?