0
# React Native Codegen
1

2
React Native Codegen is a JavaScript/TypeScript code generation library that provides tools for parsing React Native component definitions and generating corresponding native platform code. It supports both Flow and TypeScript parsers and can generate iOS (Objective-C/C++) and Android (Java/C++) code for React Native's New Architecture (Fabric and TurboModules).
3

4
## Package Information
5

6
- **Package Name**: @react-native/codegen
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript (with Flow annotations)
9
- **Installation**: `npm install --save-dev @react-native/codegen`
10

11
## Core Imports
12

13
```javascript
14
const RNCodegen = require('@react-native/codegen/lib/generators/RNCodegen');
15
const { FlowParser } = require('@react-native/codegen/lib/parsers/flow/parser');
16
const { TypeScriptParser } = require('@react-native/codegen/lib/parsers/typescript/parser');
17
const SchemaValidator = require('@react-native/codegen/lib/SchemaValidator');
18
```
19

20
For TypeScript projects:
21

22
```typescript
23
import * as RNCodegen from '@react-native/codegen/lib/generators/RNCodegen';
24
import { FlowParser } from '@react-native/codegen/lib/parsers/flow/parser';
25
import { TypeScriptParser } from '@react-native/codegen/lib/parsers/typescript/parser';
26
import * as SchemaValidator from '@react-native/codegen/lib/SchemaValidator';
27
```
28

29
## Basic Usage
30

31
```javascript
32
const RNCodegen = require('@react-native/codegen/lib/generators/RNCodegen');
33
const fs = require('fs');
34

35
// Parse a schema file and generate native code
36
const schema = JSON.parse(fs.readFileSync('schema.json', 'utf-8'));
37

38
// Generate code for all platforms
39
const success = RNCodegen.generate(
40
  {
41
    libraryName: 'MyLibrary',
42
    schema: schema,
43
    outputDirectory: './generated',
44
    packageName: 'com.example.mylibrary',
45
    assumeNonnull: false,
46
  },
47
  {
48
    generators: ['componentsAndroid', 'componentsIOS', 'modulesAndroid', 'modulesIOS'],
49
  }
50
);
51

52
console.log(success ? 'Code generation successful' : 'Code generation failed');
53
```
54

55
## Architecture
56

57
React Native Codegen is built around several key components:
58

59
- **Parsers**: Flow and TypeScript parsers that convert component definitions to schemas
60
- **Generators**: Platform-specific code generators for components and modules  
61
- **Schema System**: Central schema format that describes React Native components and modules
62
- **CLI Tools**: Command-line utilities for parsing, combining, and generating code
63
- **Validation**: Schema validation to ensure correct component definitions
64

65
## Capabilities
66

67
### Code Generation
68

69
Core code generation functionality that takes schemas and produces native platform code for React Native components and TurboModules.
70

71
```javascript { .api }
72
function generate(
73
  options: LibraryOptions,
74
  config: LibraryConfig
75
): boolean;
76

77
function generateFromSchemas(
78
  options: SchemasOptions,
79
  config: SchemasConfig
80
): boolean;
81

82
function generateViewConfig(
83
  options: Pick<LibraryOptions, 'libraryName' | 'schema'>
84
): string;
85

86
interface LibraryOptions {
87
  libraryName: string;
88
  schema: SchemaType;
89
  outputDirectory: string;
90
  packageName?: string;
91
  assumeNonnull: boolean;
92
  useLocalIncludePaths?: boolean;
93
  libraryGenerators?: LibraryGeneratorsFunctions;
94
}
95

96
interface SchemasOptions {
97
  schemas: {[string]: SchemaType};
98
  outputDirectory: string;
99
  supportedApplePlatforms?: {[string]: {[string]: boolean}};
100
}
101

102
interface LibraryConfig {
103
  generators: Array<LibraryGenerators>;
104
  test?: boolean;
105
}
106

107
interface SchemasConfig {
108
  generators: Array<SchemasGenerators>;
109
  test?: boolean;
110
}
111

112
type LibraryGenerators = 
113
  | 'componentsAndroid'
114
  | 'componentsIOS' 
115
  | 'descriptors'
116
  | 'events'
117
  | 'props'
118
  | 'states'
119
  | 'tests'
120
  | 'shadow-nodes'
121
  | 'modulesAndroid'
122
  | 'modulesCxx'
123
  | 'modulesIOS';
124

125
type SchemasGenerators = 'providerIOS';
126
```
127

128
[Code Generation](./code-generation.md)
129

130
### File Parsing
131

132
Parse Flow and TypeScript files containing React Native component definitions and convert them to standardized schemas.
133

134
```javascript { .api }
135
class FlowParser {
136
  parseFile(filename: string): SchemaType;
137
}
138

139
class TypeScriptParser {
140
  parseFile(filename: string): SchemaType;
141
}
142

143
interface SchemaType {
144
  libraryName?: string;
145
  modules: {
146
    [hasteModuleName: string]: ComponentSchema | NativeModuleSchema;
147
  };
148
}
149
```
150

151
[File Parsing](./file-parsing.md)
152

153
### Schema Management
154

155
Combine, validate, and manage React Native component schemas with utilities for merging multiple schema files and ensuring correctness.
156

157
```javascript { .api }
158
function validate(schema: SchemaType): void;
159

160
function getErrors(schema: SchemaType): Array<string>;
161

162
function combineSchemasInFileListAndWriteToFile(
163
  fileList: Array<string>,
164
  platform: string | null,
165
  outfile: string,
166
  excludeRegExp: RegExp | null,
167
  libraryName: string | null
168
): void;
169
```
170

171
[Schema Management](./schema-management.md)
172

173
### CLI Tools
174

175
Command-line utilities for parsing files, combining schemas, and generating code from the terminal.
176

177
```bash { .api }
178
# Parse files to schemas
179
node parser-cli.js file1.js file2.ts
180

181
# Combine schemas with platform filtering  
182
node combine-schemas-cli.js -p ios -o output.json -s @query.txt
183

184
# Convert JS/TS files to schema
185
node combine-js-to-schema-cli.js output.json file1.js file2.ts -l MyLibrary
186

187
# Generate all code outputs
188
node generate-all.js schema.json MyLibrary ./output MyPackage true
189
```
190

191
[CLI Tools](./cli-tools.md)
192

193
## Types
194

195
### Core Schema Types
196

197
```javascript { .api }
198
interface SchemaType {
199
  libraryName?: string;
200
  modules: {
201
    [hasteModuleName: string]: ComponentSchema | NativeModuleSchema;
202
  };
203
}
204

205
interface ComponentSchema {
206
  type: 'Component';
207
  components: {
208
    [componentName: string]: ComponentShape;
209
  };
210
}
211

212
interface NativeModuleSchema {
213
  type: 'NativeModule';
214
  aliasMap: NativeModuleAliasMap;
215
  enumMap: NativeModuleEnumMap;
216
  spec: NativeModuleSpec;
217
  moduleName: string;
218
  excludedPlatforms?: Array<PlatformType>;
219
}
220

221
type PlatformType = 'iOS' | 'android';
222
```
223

224
### Generator Configuration Types
225

226
```javascript { .api }
227
interface LibraryGeneratorsFunctions {
228
  [generatorName: string]: Array<GenerateFunction>;
229
}
230

231
type GenerateFunction = (
232
  libraryName: string,
233
  schema: SchemaType,
234
  packageName?: string,
235
  assumeNonnull: boolean,
236
  headerPrefix?: string
237
) => FilesOutput;
238

239
type FilesOutput = Map<string, string>;
240
```