CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native--codegen

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

Pending
Overview
Eval results
Files

code-generation.mddocs/

Code Generation

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

Capabilities

Main Generator Function

Generates native code from a schema for specified platforms and outputs.

/**
 * Generate native code from a React Native schema
 * @param options - Configuration options for code generation
 * @param config - Generator configuration specifying what to generate
 * @returns true if generation succeeded, false otherwise
 */
function generate(
  options: LibraryOptions,
  config: LibraryConfig
): boolean;

interface LibraryOptions {
  /** Name of the library being generated */
  libraryName: string;
  /** Schema describing the components and modules */
  schema: SchemaType;
  /** Directory where generated files will be written */
  outputDirectory: string;
  /** Package name for platform-specific code (e.g., com.example.mylibrary) */
  packageName?: string;
  /** Whether to assume nonnull annotations */
  assumeNonnull: boolean;
  /** Whether to use local include paths instead of full paths */
  useLocalIncludePaths?: boolean;
  /** Custom generator functions (uses built-in generators if not provided) */
  libraryGenerators?: LibraryGeneratorsFunctions;
}

interface LibraryConfig {
  /** Array of generator types to run */
  generators: Array<LibraryGenerators>;
  /** If true, check files for changes instead of writing them */
  test?: boolean;
}

Usage Example:

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

const schema = JSON.parse(fs.readFileSync('MyComponent.json', 'utf-8'));

const success = RNCodegen.generate(
  {
    libraryName: 'MyLibrary',
    schema: schema,
    outputDirectory: './ios/Generated',
    packageName: 'com.example.mylibrary',
    assumeNonnull: false,
  },
  {
    generators: ['componentsIOS', 'modulesIOS'],
    test: false,
  }
);

Multi-Schema Generation

Generate code from multiple schemas at once, useful for combining multiple libraries.

/**
 * Generate code from multiple schemas
 * @param options - Configuration for multi-schema generation
 * @param config - Generator configuration
 * @returns true if generation succeeded, false otherwise
 */
function generateFromSchemas(
  options: SchemasOptions,
  config: SchemasConfig
): boolean;

interface SchemasOptions {
  /** Map of library name to schema */
  schemas: { [libraryName: string]: SchemaType };
  /** Directory where generated files will be written */
  outputDirectory: string;
  /** Platform support configuration for Apple platforms */
  supportedApplePlatforms?: { [platform: string]: { [key: string]: boolean } };
}

interface SchemasConfig {
  /** Array of schema generator types to run */
  generators: Array<SchemasGenerators>;
  /** If true, check files for changes instead of writing them */
  test?: boolean;
}

type SchemasGenerators = 'providerIOS';

View Configuration Generation

Generate JavaScript view configuration for React Native components.

/**
 * Generate view configuration JavaScript for a component
 * @param options - Library name and schema
 * @returns Generated view configuration as a string
 */
function generateViewConfig(options: {
  libraryName: string;
  schema: SchemaType;
}): string;

Usage Example:

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

const viewConfig = RNCodegen.generateViewConfig({
  libraryName: 'MyComponent',
  schema: componentSchema,
});

console.log(viewConfig); // JavaScript view configuration code

Available Generators

Generator types available for the generators array:

type LibraryGenerators = 
  | 'componentsAndroid'  // Android component code (C++/Java)
  | 'componentsIOS'      // iOS component code (Objective-C++/C++)
  | 'descriptors'        // Component descriptor files
  | 'events'             // Event emitter code
  | 'props'              // Props interface code
  | 'states'             // Component state code
  | 'tests'              // Test code generation
  | 'shadow-nodes'       // Shadow node implementations
  | 'modulesAndroid'     // Android TurboModule code (JNI/Java)
  | 'modulesCxx'         // C++ TurboModule code
  | 'modulesIOS';        // iOS TurboModule code (Objective-C++)

Access to Individual Generators

Access individual generator functions for custom workflows.

/** Object containing all available generator functions */
const allGenerators: {
  [generatorName: string]: GenerateFunction;
};

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

type FilesOutput = Map<string, string>;

Usage Example:

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

// Use a specific generator directly
const files = RNCodegen.allGenerators.generateComponentDescriptorH(
  'MyLibrary',
  schema,
  'com.example.mylibrary',
  false,
  'react/renderer/components/MyLibrary/'
);

// files is a Map<string, string> of filename -> file content
files.forEach((content, filename) => {
  console.log(`Generated ${filename}`);
});

Generator Output Structure

Generated files are organized by platform and type:

  • iOS Component Files: C++ headers (.h), C++ implementation (.cpp), Objective-C++ (.mm)
  • Android Component Files: C++ headers (.h), C++ implementation (.cpp), Java interfaces (.java)
  • Module Files: Platform-specific TurboModule implementations
  • Descriptor Files: Component registration and metadata
  • Test Files: Generated test cases for components and modules

The exact file structure depends on the generator types specified and the schema content.

Install with Tessl CLI

npx tessl i tessl/npm-react-native--codegen

docs

cli-tools.md

code-generation.md

file-parsing.md

index.md

schema-management.md

tile.json