or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-tools.mdcode-generation.mdfile-parsing.mdindex.mdschema-management.md
tile.json

tessl/npm-react-native--codegen

Code generation tools for parsing React Native component definitions and generating native platform code.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-native/codegen@0.81.x

To install, run

npx @tessl/cli install tessl/npm-react-native--codegen@0.81.0

index.mddocs/

React Native Codegen

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).

Package Information

  • Package Name: @react-native/codegen
  • Package Type: npm
  • Language: JavaScript/TypeScript (with Flow annotations)
  • Installation: npm install --save-dev @react-native/codegen

Core Imports

const RNCodegen = require('@react-native/codegen/lib/generators/RNCodegen');
const { FlowParser } = require('@react-native/codegen/lib/parsers/flow/parser');
const { TypeScriptParser } = require('@react-native/codegen/lib/parsers/typescript/parser');
const SchemaValidator = require('@react-native/codegen/lib/SchemaValidator');

For TypeScript projects:

import * as RNCodegen from '@react-native/codegen/lib/generators/RNCodegen';
import { FlowParser } from '@react-native/codegen/lib/parsers/flow/parser';
import { TypeScriptParser } from '@react-native/codegen/lib/parsers/typescript/parser';
import * as SchemaValidator from '@react-native/codegen/lib/SchemaValidator';

Basic Usage

const RNCodegen = require('@react-native/codegen/lib/generators/RNCodegen');
const fs = require('fs');

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

// Generate code for all platforms
const success = RNCodegen.generate(
  {
    libraryName: 'MyLibrary',
    schema: schema,
    outputDirectory: './generated',
    packageName: 'com.example.mylibrary',
    assumeNonnull: false,
  },
  {
    generators: ['componentsAndroid', 'componentsIOS', 'modulesAndroid', 'modulesIOS'],
  }
);

console.log(success ? 'Code generation successful' : 'Code generation failed');

Architecture

React Native Codegen is built around several key components:

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

Capabilities

Code Generation

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

function generate(
  options: LibraryOptions,
  config: LibraryConfig
): boolean;

function generateFromSchemas(
  options: SchemasOptions,
  config: SchemasConfig
): boolean;

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

interface LibraryOptions {
  libraryName: string;
  schema: SchemaType;
  outputDirectory: string;
  packageName?: string;
  assumeNonnull: boolean;
  useLocalIncludePaths?: boolean;
  libraryGenerators?: LibraryGeneratorsFunctions;
}

interface SchemasOptions {
  schemas: {[string]: SchemaType};
  outputDirectory: string;
  supportedApplePlatforms?: {[string]: {[string]: boolean}};
}

interface LibraryConfig {
  generators: Array<LibraryGenerators>;
  test?: boolean;
}

interface SchemasConfig {
  generators: Array<SchemasGenerators>;
  test?: boolean;
}

type LibraryGenerators = 
  | 'componentsAndroid'
  | 'componentsIOS' 
  | 'descriptors'
  | 'events'
  | 'props'
  | 'states'
  | 'tests'
  | 'shadow-nodes'
  | 'modulesAndroid'
  | 'modulesCxx'
  | 'modulesIOS';

type SchemasGenerators = 'providerIOS';

Code Generation

File Parsing

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

class FlowParser {
  parseFile(filename: string): SchemaType;
}

class TypeScriptParser {
  parseFile(filename: string): SchemaType;
}

interface SchemaType {
  libraryName?: string;
  modules: {
    [hasteModuleName: string]: ComponentSchema | NativeModuleSchema;
  };
}

File Parsing

Schema Management

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

function validate(schema: SchemaType): void;

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

function combineSchemasInFileListAndWriteToFile(
  fileList: Array<string>,
  platform: string | null,
  outfile: string,
  excludeRegExp: RegExp | null,
  libraryName: string | null
): void;

Schema Management

CLI Tools

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

# Parse files to schemas
node parser-cli.js file1.js file2.ts

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

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

# Generate all code outputs
node generate-all.js schema.json MyLibrary ./output MyPackage true

CLI Tools

Types

Core Schema Types

interface SchemaType {
  libraryName?: string;
  modules: {
    [hasteModuleName: string]: ComponentSchema | NativeModuleSchema;
  };
}

interface ComponentSchema {
  type: 'Component';
  components: {
    [componentName: string]: ComponentShape;
  };
}

interface NativeModuleSchema {
  type: 'NativeModule';
  aliasMap: NativeModuleAliasMap;
  enumMap: NativeModuleEnumMap;
  spec: NativeModuleSpec;
  moduleName: string;
  excludedPlatforms?: Array<PlatformType>;
}

type PlatformType = 'iOS' | 'android';

Generator Configuration Types

interface LibraryGeneratorsFunctions {
  [generatorName: string]: Array<GenerateFunction>;
}

type GenerateFunction = (
  libraryName: string,
  schema: SchemaType,
  packageName?: string,
  assumeNonnull: boolean,
  headerPrefix?: string
) => FilesOutput;

type FilesOutput = Map<string, string>;