Codegen
- React Native course
- Expert
- Lesson 5/47
- 5 min
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.
Practice Add the Codegen config
Add a codegenConfig field to a package.json file. name: MyLib, type: modules, jsSrcsDir: ./src.
Starter code
{
"name": "my-lib",
"version": "1.0.0"
// Add the codegenConfig field here
}Sample solution
{
"name": "my-lib",
"version": "1.0.0",
"codegenConfig": {
"name": "MyLib",
"type": "modules",
"jsSrcsDir": "./src"
}
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does Codegen produce?
- A new JS bundle Correct answer
- C++/Java/ObjC skeleton
- React components
- CSS styles
Explanation: Codegen produces native skeleton code.
2 Write the Codegen config type
"codegenConfig": {
"name": "MyLib",
"type": "____",
"jsSrcsDir": "./src"
}"codegenConfig": {
"name": "MyLib",
"type": "modules",
"jsSrcsDir": "./src"
}Explanation: type 'modules' generates TurboModules.
3 Match the Codegen outputs
| Term | Meaning |
|---|---|
components |
Fabric components |
modules |
TurboModules |
all |
Both of them |
codegenConfig |
package.json field |