@react-native/codegen
Advanced tools
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.
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"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 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.
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
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 onceyarn jest packages/react-native-codegen.0.74.0
start/end in styles always refer to writing direction (e859f6c773 by @NickGerleman)configFilename and configKey arguments from iOS codegen CLI. Now we always expect them to be package.json and codegenConfig respectively. (33a44e68fc by @dmytrorykun)Float -> float; Int32 -> int. (ccd3b04770 by @dmytrorykun)getJSCallInvokerHolder() for Bridgeless Catalyst Instance (c6076bca97 by @arushikesarwani94)onKeyLongPress in Bridgeless (f345fcf3e8 by @arushikesarwani94)onKeyDown in Bridgeless (b14f7d58e3 by @arushikesarwani94)onConfigurationChanged in Bridgeless (b2e1db0fbf by @arushikesarwani94)onNewIntent in Bridgeless (5d711f83b5 by @arushikesarwani94)onWindowFocusChange in Bridgeless (7b40c8ee5f by @arushikesarwani94)handler param on PushNotificationIOS.removeEventListener (fdf4ec3297)ios_folder argument from the use_react_native function. (be0c353e18 by @dmytrorykun)Float -> float; Int32 -> NSInteger. (5aa425c086 by @dmytrorykun)react-native.config.js is not supported anymore. Define them as normal dependencies in package.json. (ca39a11b27 by @dmytrorykun)exclude array inside tsconfig (40bb425f48 by @bartlomein).gitignore in template (965f2eb1fb by @szymonrybczak)cursorColor and selectionHandleColor to override selectionColor on Android (1e68e48534 by @jakex7)tabIndex for View and userSelect in the Text props were added. (b36505bf06 by @wootsbot)alignContent: "space-evenly" (c9d0a006fd by @NickGerleman)npx react-native init (a6397afb7f by @byCedric)nativeNetworkInspection target capability flag (f3ce7cd76e by @byCedric)user-agent when header is unset (c62be78d99 by @byCedric)getJavaScriptContextHolder() for Bridgeless Catalyst Instance (b72f5e9982 by @arushikesarwani94)getRuntimeExecutor() for Bridgeless Catalyst Instance (6a5aaad9e0 by @arushikesarwani94)onUserLeaveHint support into ReactActivityDelegate (3b6c522942 by @behenate)removeAllViews to IViewGroupManager. (3cd85dc933 by @javache)rrc_text and rrc_textinput (ad9f0b0ab8 by @j-piasecki)vision interfaceIdiom (258d8e51b4 by @okwasniewski)shouldBeRecycled method on iOS. (613a5a7597 by @WoLewicki)RCTIsNewArchEnabled() to check whether the New Arch is enabled at runtime. (f1a7f08feb by @cipolleschi)ccache, to speed up subsequent builds of native code. After installing ccache and running pod install, the Xcode project is injected with compiler and linker build settings pointing scripts that loads a default Ccache configuration and invokes the ccache executable. (e85d51c6f1 by @kraenhansen)REACT_NATIVE_PATH in the "Bundle React Native code and images" shell script build phase. This will help apps initialized into a mono-repo which hoists the react-native package. (289e78388a by @kraenhansen)dismissActionSheet function in ActionSheetIOS. (89c7be890b by @LRNZ09)Platform.isMacCatalyst (027d520d65 by @jacobp100)@react-native-community/cli to 13.6.4 (4f50089da2 by @szymonrybczak)hermes-parser instead of flow-parser to parse Flow Codegen specs. (5abaf388cd by @motiz88)--experimental-debugger flag, restore Flipper as base launch flow (9e068ac163 by @huntie)position: "relative" (88a55baeaa by @NickGerleman)react_render_textlayoutmanager via prefab. (642b4e5c2c by @tomekzaw)rrc_text via prefab. (1c69100a2b by @tomekzaw)rrc_textinput via prefab. (adc9e5b0fa by @tomekzaw)PopupMenuAndroidNativeComponent.js to PopupMenuAndroidNativeComponent.android.js (fcabb2ad21 by @cipolleschi).mm) file in prep for DisplayP3 changes (267ea2661a by @cipolleschi)RCTKeyWindow to be more resilient and work in multi-window apps (782e9eace9 by @okwasniewski)NDEBUG flag for Release builds for both architectures (1a0e1741c0 by @tjzel)scrollEventThrottle no longer needs to be set for continuous scroll events when using the new architecture. (56b57e2db4 by @NickGerleman)RCTRootViewFrameDidChangeNotification as it's not tracking root view frame changes (625d0ece6d by @Saadnajmi)[RCTConvert RCTTransformOrigin:] out of UIAccessibilityTraits category (c7aa3954e3 by @Saadnajmi)<Webkit/Webkit.h> import in RCTConvert.h (452bf0ff06 by @Saadnajmi)RCTAppSetupPrepareApp (reverts #41976) (ce3ce1194b by @huntie)[RCTConvert UIBarStyle:] (157cb0e02b by @Saadnajmi)RCTAppSetupPrepareApp, replaced with C++ overload (7a4950b366 by @huntie)getSurfacePresenter and getModuleRegistry for surfacePresenter and moduleRegistry` props. (c3b0a8f162 by @cipolleschi)react (62c15bacaa by @jbroma)onEndReached is called (4dcc1d3efb by @janicduplessis)react-native config failing in pnpm setups (8f4f09bf70 by @tido64)react-native/community-cli-plugin is unable to resolve out-of-tree platforms in monorepos (e350859d72 by @tido64)onViewableItemsChanged signature (35f5c3a204 by @miallo)translateX & translateX to be able to use percentage values (b133bf6024 by @retyui)compose-source-maps.js failing if -o is not specified when it should output the composed source map (ab192ced69 by @tido64)SectionList while transiting between empty and filled state (0c37f8c85c by @MateWW)react-native/codegen not being able to resolve dependencies in pnpm setups (c58e19e89a by @tido64)ping() method into WebSocket interface (016b62c549 by @alexzel)react-native-babel-preset (c90485eb10 by @jonthysell)number | null to ViewProps['hitSlop'] TypeScript type (bc16bc5b01 by @DimitarNestorov)originalKeywordKind deprecation error (5de0ddae30 by @mrousavy)registerCallableModule TypeScript definitions (6bc95b2074 by @Kudo)convertRawPropAliases (5e37c1f219 by @NickGerleman)[Android][Fixed] - Fix incorrect measurement of TextInput when new architecture is enabled ([dc2ce9e66e](https://github.com/facebook/react-native/commit/dc2ce9e66e337ef90a179853467dbb8b09b9d24c) by [@mdvacca](https://github.com/mdvacca))
DefaultComponentsRegistry::registerComponentDescriptorsFromEntryPoint is set (8474e239df by @tido64)ReactCompoundViewGroup comments (385473522c by @kkafar)java.lang.NoSuchMethodError for Bridgeless (b22f566104 by @cortinico)configureJavaToolChains is only executed once during configuration (c7d969f31b by @UNIDY2002)rrc_text and rrc_textinput (623bbe6bd6 by @j-piasecki)addUIBlock provides a Dictionary-look-alike object that returns the right views when queried. (f61f87c5ef by @cipolleschi)RCTAppDelegate to template's AppDelegate (ebb55a780a by @cipolleschi)DoubleConversion build error from Swift integration (631b6a12c5 by @Kudo)UIMenuController (6801fc3f9b by @Saadnajmi)with-environment.sh script for the case when Node can't be found prior to loading .xcode.env (c684f9fc62 by @birdofpreyru)setState is not working for nested inline views in text (9b33e752c7 by @ehsemloh)setState is not working properly for text inline image (36ef6460f0 by @ehsemloh)D continuously (a257e9f5f0 by @zhongwuzw)createRootViewWithBridge being deprecated (a1197695fc by @okwasniewski)bundleURL so that it can connect to metro on Reload when the url changes.
(90296be1d4 by @cipolleschi)FAQs
Code generation tools for React Native
The npm package @react-native/codegen receives a total of 1,508,841 weekly downloads. As such, @react-native/codegen popularity was classified as popular.
We found that @react-native/codegen demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.