@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:

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

Changelog

v0.77.2

Added

iOS specific

• Codegen: Add the source parameter to generate-codegen-artifacts to avoid generating files not needed by libraries. (98b8f17811 by @cipolleschi)

Fixed

• DevTools: Fix disconnections of DevTools when the network is under significant strain. (b0974135bf by @vzaidman)
• CLI: Fix registering of start and bundle commands with community CLI and isolated node_modules. (1f002f9999 by @robhogan)
• Metro: Bump minimum Metro to 0.81.3, fix "_interopRequireDefault is not a function" with enablePackageExports (b335436113 by @robhogan)

Android specific

• Fabric: Avoid NPE when touch event is triggered before SurfaceManager is initiated (b8095f4692 by @CHOIMINSEOK)
• Image: Fix defaultSource runtime error (1c51b77868 by @fbp93)

iOS specific

• Interop Layer: Properly pass nil for nullable parameters instead of NSNull for legacy modules (619d5dfbb2 by @cipolleschi)
• TextInput: Fix crashes when any text is entered while running as iOS app on apple silicon mac (8d7aca30e7 by @zhongwuzw)