@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.v0.81.0-rc.0
react-native/Libraries/BugReporting APIs have been removed (9d4d8dcb02 by @huntie)yarn diff-api-snapshot script. (6b40f35032 by @coado)resolver.resolveRequest and serializer.getModulesRunBeforeMainModule Metro config now takes precedence over CLI defaults (fe2bcbf4ba by @robhogan)react-native package no longer ships with the flow directory (38acb4c074 by @huntie)View no longer sets any default accessibility props, which should not result in visible changes in behaviour but may affect snapshot tests. (039a333df5 by @javache)View component to React 19. (eedd60b9e6 by @EvanBacon)FpsDebugFrameCallback (cf6569bc18 by @cortinico)RN_SERIALIZABLE_STATE to 3rd party CMake targets. Users with custom CMake and C++ code should update to use target_compile_reactnative_options inside their CMakeLists.txt files.(c059ae1b77 by @cortinico)FabricUIManager.measure overload which accepts attachment positions (2ba86caf18 by @NickGerleman)ViewManagerInterfaces to kotlin. Some types in code generated ViewManagerInterfaces might differ. e.g. this will start enforcing nullability in parameters of viewManagerInterface methods (e.g. String commands parameters are not nullable, view params are not nullable in any method, etc) (76ff1aa5c6 by @mdvacca)com.facebook.react.ReactDelegate to Kotlin. Some users implementing this class in Kotlin could have breakages. (50ea5b4380 by @mateoguzmana)MountingManager (f33fdca876 by @cortinico)textAlignVertical to paragraph attributes instead of text attributes (55fd8b26f8 by @joevilches)TextLayoutManager Internal (e82a677c79 by @NickGerleman)RCTDisplayLink's API from RCTModuleData (70eeb9f541 by @RSNara)SynchronouslyUpdateViewOnUIThread now accepts folly::dynamic instead of NSDictionary. Use https://github.com/facebook/react-native/blob/main/packages/react-native/ReactCommon/react/utils/platform/ios/react/utils/FollyConvert.h#L14 for conversion. (82279bd981 by @sammy-SC)unstable_TextAncestorContext API (962a7dda44 by @huntie)*AnimationConfig types on the Animated namespace (11a1ad7a98 by @huntie)InterpolationConfig is now exposed on the Animated namespace (b01a5f91fe by @huntie)ScrollViewImperativeMethods and ScrollViewScrollToOptions types to public API (f184b591cf by Antonio Pires)--validate flag to build-types script for JS API snapshot validation. (f529fd6ba5 by @coado)Class methods return types (e403b510d0 by @hoxyq)Fantom.getFabricUpdateProps for reading fabric update props scheduled via UIManager::updateShadowTree (cc442eb8c8 by @zeyap)registerBundle calls from the same origin only (a9007ea586 by @jbroma)IntersectionObserver support for root with fixes for viewport offsets (c5b6716311 by @lunaleaps)ScrollView (a6908ad1a5 by @riteshshukla04)cloneMultiple to ShadowNode class. (1161fb4fcd by @bartlomiejbloniarz)pressRetentionOffset prop to be recognised by typescript in Text.d.ts (d94f4d8c9d by @iamAbhi-916)URLSearchParams implementation (9b1a8ffac4 by @louix)onFocus / onBlur event dispatching logic to all native views that implement BaseViewManager (e960a28af7 by @Abbondanzo)RNGP- Add support for exclusiveEnterpriseRepository to specify an internal Maven mirror. (6cb8dc37c7 by @cortinico)RNTester build.gradle to avoid automatic installation of Android SDK Build Tools. (35dba09724 by @mojavad)fadingEdgeLength to be set independently on the start and end of the ScrollView (a21a4b87c3 by Mark Verlingieri)onFocus and onBlur function calls in View components (af0a76cf5f by @Abbondanzo)borderWidths (70962ef3ed by @a-klotz-p8)Modals. (28986a7599 by @okwasniewski)Package.swift (592b09781b by @chrfalch)computeNightlyTarballURL in ios pre-build (1a6887bd70 by @cortinico)React-Core-prebuilt.podspec in package.json (46b562b9b3 by @cipolleschi)RNCore with Cocoapods (90654e4ba2 by @chrfalch)React-Core-prebuild.podspec to integrate React native core prebuilds using Cocoapods (1a86ee17fb by @chrfalch)XCFframework from the prebuild script (55534f518a by @chrfalch)HERMES_ENABLE_DEBUGGER to debug configuration for the reactRuntime target. (560ac23001 by @chrfalch)props.style, which fixes an error that results from props.style objects in which AnimatedNode instances are shadowed (i.e. flattened to not exist in the resulting props.style object). (da520848c9 by @yungsters)Animated to no longer produce invalid props.style if every AnimatedNode instance is shadowed via style flattening. (5c8c5388fc by @yungsters)Animated to reduce memory usage. (2a13d20085 by @yungsters)infoLog from react-native package (8a0cfec815 by @coado)IntersectionObserver#observe to avoid retaining memory for unmounted child nodes of observed views. (d945c5863a by @yungsters)LegacyArchitecture classes (38a4b62211 by @mdvacca)LegacyArchitecture classes when minimizing of legacy architecture is enabled (0d1cde7f36 by @mdvacca)^0.82.5 (083644647e by @robhogan)6.1.5 (c302902b1d by @hoxyq)RuntimeExecutor: Remove noexcept from sync ui thread utils (7ef278af50 by @RSNara)types/react to 19.1 (3ae9328571 by @gabrieldonadel)DefaultNewArchitectureEntryPoint.load(Boolean, Boolean, Boolean) (efdf73983c by @cortinico)com.facebook.react.views.common.ContextUtils internal (d1ef8f1fa3 by @cortinico)AGP to 8.11.0 (04858ecbab by @cortinico)Gradle to 8.14.2 (e20bb56f3b by @cortinico)UIManagerModuleConstantsHelper to Kotlin (45fd7feb9f by @cortinico)ThemedReactContext to Kotlin (78c9671c24 by @cortinico)ReactViewGroup to Kotlin (48395d346b by @cortinico)com.facebook.react.LazyReactPackage to Kotlin. (b4ae5c1de1 by @Xintre)ReactAndroid package (b2ffd34a39 by @l2hyunwoo)ReactCodegen to support Core prebuilds (152cb538f6 by @chrfalch)hasTVPreferredFocus (cfb6c968dd by @Abbondanzo)SafeAreaView due to its iOS-only support and incompatibility with Android 15 edge-to-edge behavior; recommend using react-native-safe-area-context instead. (73133a31d5 by @kikoso)ShadowNode::Shared is now deprecated. Use std::shared_ptr<const ShadowNode> instead. (0e175ce5b6 by @sammy-SC)ShadowNode::Unshared and ShadowNode::Weak in favour of std::shared_ptr<ShadowNode> and std::weak_ptr<ShadowNode> (12fb101e30 by @sammy-SC)RCTFollyConvert.h is deprecated please use /ReactCommon/react/utils/platform/ios/react/utils/FollyConvert.h instead (685a60e6b4 by @sammy-SC)YogaLayoutableShadowNode::cleanLayout() and Fix ParagraphShadowNode Font Size Invalidation Logic (7979c7ce06 by @NickGerleman)NetworkingModule's UriHandler, RequestBodyHandler, and ResponseHandler APIs (987e3f8c00 by @huntie)isStartSamplingProfilerOnInit from DeveloperSettings (ccb9edc717 by @cortinico)JSEngineResolutionAlgorithm (0954c1db45 by @cortinico)onContentSizeChange callback's type definition (0386b9bd51 by @pchalupa)BindingsInstallerHolder (4a8fda83e3 by @tomekzaw)default: case to avoid warnings/errors for targets that compile with -Wswitch-enum and -Wswitch-default enabled (22b8b53c77 by @NSProgrammer)default: case to avoid warnings/errors for targets that compile with -Wswitch-enum and -Wswitch-default enabled (9079b53c6f by @NSProgrammer)rgba() color string format. (1cc12ce7fd by @piaskowyk)backgroundColor set to rgba(255, 255, 255, 127/256) (b1e8729f4d by @rubennorte)getBoundingClientRect to respect viewport offsets (b5c62f52d1 by @lunaleaps)IntersectionObserver (a55f430daa by @RSNara)ScrollView.getNativeScrollRef on the type definition to allow accessing the underlying HostInstance. (4b91b63094 by @zbauman3)ImageSource type to TypeScript (42ca46b95c by @okwasniewski)BoringLayout (2fe6c1a947 by @NickGerleman)shouldForwardToReactInstance check in ReactDelegate for Bridgeless (0f7bf66bba by @arushikesarwani94)Dimensions window values on Android < 15 when edge-to-edge is enabled (85d10ed904 by @zoontek)FBReactNativeSpec's core components including Unimplemented from auto-generated registry (b417b0c2d5 by @arushikesarwani94)free to delete to call destructor of ImageFetcher and release contextContainer. (90da666691 by @WoLewicki)Modal first frame being rendered on top-left corner (b950fa2afb by @cortinico)onTextLayout metrics not incorporating ReactTextViewManagerCallback (a6a2884d63 by @NickGerleman)TextLayoutManager MeasureMode Regression (99119a2104 by @NickGerleman)React-RCTSettings to Package.swift (e40c1d265a by @chrfalch)Package.swift (e2f6ce4ddf by @chrfalch)RCTImage in Swift codebase by enabling "Defines Module" option (1d80586730 by @kkafar)RCTImageComponentView image loading after source props change with no layout invalidation (cd5d74518b by Nick Lefever)RCTScreenSize take horizontal orientation into account (50ce8c77a7 by @okwasniewski)TextInput on iOS (2da4a6059a by @tomekzaw)null (4a4fd1cb8b by @zhongwuzw)FAQs
Code generation tools for React Native
The npm package @react-native/codegen receives a total of 2,530,687 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
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.