Tools which help developers build, deliver, and maintain React Native apps and libraries.
- The Basics
- Working with Kits
- Using Individual @rnx-kit Packages
React Native engineering is complicated, and the ecosystem changes quickly. The tools here aim to improve the developer experience throughout the lifecycle of React Native apps and libraries.
rnx is a React Native user experience. It's any code you've written
using React Native. A
kit is the package you use to deliver this code. For
most common scenarios, such as a greenfield React Native app or a React Native
libary, you can say that your project's folder is a
kit, since you are writing
the code and releasing it.
which informs how its dependencies are managed, and how it is bundled,
published, delivered, and hosted. Configuration comes from
rnx-kit section of
package.json, or any of the other
standard ways of supplying configuration.
Working with Kits
We have a
which is the front-end for common
kit tasks. It uses the
to control how it operates, as well as command-line overrides. The CLI is useful
as a development tool and in automated CI loops.
React Native is a moving target, as is the ecosystem of dependencies designed to work with it. Finding dependencies that are actively maintained and compatible can be challenging. On top of that, once you know what dependencies to use, keeping them aligned across your repo(s) is a significant burden.
The dependency manager aims to bring alignment to all React Native developers who are working in any-size repositories, from small self-contained repositories to big, enterprise monorepos.
You can manage dependencies using the command-line interface:
$ yarn react-native rnx-dep-check [options] [/path/to/package.json]
Bundling is done using Metro, the official
React Native bundling system.
Consistently configuring Metro to produce a type-safe, minimal bundle, across
all of your
kit packages, is difficult.
@rnx-kit has a number of plugins,
presets, services to make this easier, all wrapped up in the
$ yarn react-native rnx-bundle
The bundling process is controlled by kit configuration and optional command-line overrides. This eliminates the need for boiler-plate Metro and Babel configuration files/code.
Licensing and Attribution
kit to customers may require distribution of a 3rd-party
notice. This notice might include licenses and attribution for external
You can use the command-line interface to assist you in building this 3rd-party notice:
$ yarn react-native rnx-write-third-party-notices
NOTE: A 3rd-party notice is a legal document. You are solely responsble for its content, even if you use
@rnx-kitto assist you in generating it. You should consult with an attorney to ensure your notice meets all legal requirements.
Using Individual @rnx-kit Packages
If you only need a specific plugin, preset, tool or service, and don't want to
kit configuration of the CLI, you can use individual
Most packages are designed to be used on their own, having a documented API, a
suite of tests, and a log of changes. Packages are updated and released
individually, as features are added and fixes are made.
|@rnx-kit/babel-plugin-import-path-remapper||Babel plugin for remapping 'lib/' imports to 'src/'|
|@rnx-kit/babel-preset-metro-react-native||Babel preset for React Native applications|
|@rnx-kit/bundle-diff||Simple tool for diffing the content of two bundles|
|@rnx-kit/cli||Command-line interface for working with kit packages in your repo|
|@rnx-kit/config||Define and query information about a kit package|
|@rnx-kit/console||Simple console logger|
|@rnx-kit/dep-check||Dependency checker for React Native apps|
|@rnx-kit/esbuild-plugin-import-path-remapper||Esbuild plugin for remapping 'lib/' imports to 'src/'|
|@rnx-kit/eslint-plugin||A set of ESLint rules for React developers|
|@rnx-kit/golang||Integrate Go into your monorepo and create native apps that accelerate development and CI builds|
|@rnx-kit/jest-preset||Jest preset for React Native code bases|
|@rnx-kit/metro-config||Metro config for monorepos|
|@rnx-kit/metro-plugin-cyclic-dependencies-detector||Cyclic dependencies detector for Metro|
|@rnx-kit/metro-plugin-duplicates-checker||Duplicate packages checker|
|@rnx-kit/metro-plugin-typescript-validation||Typescript validation during Metro bundling|
|@rnx-kit/metro-resolver-symlinks||Metro resolver with support for symlinks|
|@rnx-kit/metro-serializer-esbuild||Experimental esbuild serializer for Metro|
|@rnx-kit/metro-service||Metro service for bundling and bundle-serving|
|@rnx-kit/third-party-notices||Library and tool to build a third party notices file based on a js bundle's source map|
|@rnx-kit/tools-node||A collection of supplemental NodeJS functions and types|
|@rnx-kit/tools-react-native||A collection of supplemental react-native functions and types|
|@rnx-kit/typescript-service||TypeScript language services with support for custom module resolution|
This project welcomes contributions and suggestions. See CONTRIBUTING for details.
@rnx-kitis still in the early stages of development. We are hard at work, adding new packages and features on a regular basis. Given our focus on building out the first "complete" version of
@rnx-kit, supporting external users is not currently a high priority, so we unfortunately cannot guarantee prompt responses at this time.