@react-native/codegen

What is @react-native/codegen?

The @react-native/codegen package is a tool used in the React Native ecosystem to generate native code (Java for Android, Objective-C for iOS) from JavaScript. It is primarily used to bridge custom native modules and components in a React Native application, facilitating the communication between JavaScript and native code. This tool automates the process of creating the necessary boilerplate code for native modules, making the development process more efficient and less error-prone.

What are @react-native/codegen's main functionalities?

Generating Native Modules

This feature allows developers to generate the boilerplate code for native modules by specifying the platform (iOS or Android), the path to a schema file (schema.json) that describes the module, and the output directory. The schema file is a JSON file that outlines the structure and types of the native module's methods and properties.

"npx react-native codegen --platform ios/android --schemaPath ./schema.json --outputDir ./output"

Generating Native Components

Similar to native modules, this feature enables the generation of boilerplate code for native components. The process involves specifying a schema file (componentSchema.json) that describes the component's properties and events, allowing for seamless integration of custom native UI components into React Native applications.

"npx react-native codegen --platform ios/android --schemaPath ./componentSchema.json --outputDir ./output"

Other packages similar to @react-native/codegen

react-native-builder-bob

React Native Builder Bob is a tool that helps developers create React Native libraries with support for both native and JavaScript code. While it provides a streamlined process for setting up, building, and publishing libraries, it does not offer the same code generation capabilities for bridging native modules and components as @react-native/codegen.

react-native-create-bridge

React Native Create Bridge is a CLI tool designed to simplify the process of creating native modules and UI components for React Native. It offers a more interactive approach by prompting users for input to generate the necessary boilerplate code. However, it is not as automated or schema-driven as @react-native/codegen, requiring more manual intervention.

README

@react-native/codegen

Installation

yarn add --dev @react-native/codegen

Note: We're using yarn to install deps. Feel free to change commands to use npm 3+ and npx if you like

Testing

To run the tests in this package, run the following commands from the React Native root folder:

1. yarn to install the dependencies. You just need to run this once
2. yarn jest packages/react-native-codegen.

Changelog

v0.76.2

Added

• TypeScript Add CodegenTypes for TS (20b141508b by @cipolleschi)

Changed

• infra Bump CLI to 15.0.1 (51b98c24bd by @szymonrybczak)

iOS specific

• TextInput Include existing attributes in newly typed text (557e3447f5 by @NickGerleman)

Fixed

• Hermes Update Hermes to support Intl (94d4bfd7c8 by @blakef)
• infra Skip hermes-parser under Babel for non-Flow JS code (ff1261e7dc by @huntie)
• infra fix semver not being found in pnpm setups (0def73d1a6 by @tido64)
• Error Handling Fix setUpErrorHandling to show early JS errors (dac6d508af by @cipolleschi)

Android specific

• infra Use absolute path when compiling appmodules.so sources (3956955eaa by @cortinico)
• infra Properly handle paths with spaces in autolinking (1f62529dc4 by @cortinico)
• Modal Fix Regression - Modal content rendering below system bar on < API 30 when activity is edge-to-edge (2cd48ef351 by @alanleedev)
• runtime Fix timers in headless tasks on bridgeless mode (ee7b4e2763 by @j-piasecki)

iOS specific

• Codegen Properly stop generating component registration for components defined in app. (97a4234b6e by @cipolleschi)
• infra Give apps access to Yoga headers (e851e73c18 by @cipolleschi)
• TextInput Fix missing emitter attributes on iOS TextInput when controlled component value specified using value instead of children (52cdedb40e by @NickGerleman)
• TextInput Fix cursor moving in iOS controlled single line TextInput on Autocorrection (New Arch) (36fd5533f6 by @NickGerleman)