Codegen

Learn Codegen and automatic code generation.

What is Codegen?

Codegen is the tool that produces C++/Java/Objective-C skeleton code from TypeScript spec files. It removes hand-written binding code; type mismatches are caught at compile time.

Codegen is an integral part of the new architecture. It runs during the build, reads the interfaces in the spec file and produces the matching native types. Its output lives under node_modules/....

Codegen types

Codegen produces three outputs: components (Fabric native components), modules (TurboModules) and all (both). The codegenConfig field in package.json sets this.

The tool looks for codegenNativeComponent and TurboModuleRegistry calls; it generates native code from them. The generated files live under node_modules and are never edited by hand.

Exercise Add the Codegen config

Add a codegenConfig field to a package.json file. name: MyLib, type: modules, jsSrcsDir: ./src.

Show example solution

{
  "name": "my-lib",
  "version": "1.0.0",
  "codegenConfig": {
    "name": "MyLib",
    "type": "modules",
    "jsSrcsDir": "./src"
  }
}

Test yourself

What does Codegen produce?
- A new JS bundle
- C++/Java/ObjC skeleton
- React components
- CSS styles
Show answer

A new JS bundle — Codegen produces native skeleton code.

Write the Codegen config type

"codegenConfig": {
  "name": "MyLib",
  "type": "____",
  "jsSrcsDir": "./src"
}

Show answer

"codegenConfig": {
  "name": "MyLib",
  "type": "modules",
  "jsSrcsDir": "./src"
}

Match the Codegen outputs

components

Fabric components
modules

TurboModules
all

Both of them
codegenConfig

package.json field

Next lesson: Summary - New architecture

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies