React Native Developer Tools
Tools which help developers build, deliver, and maintain React Native apps and libraries.
The Basics
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.
An 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
library, you can say that your project's folder is a kit, since you are
writing the code and releasing it.
A kit has
configuration
which informs how its dependencies are managed, and how it is bundled,
published, delivered, and hosted. Configuration comes from rnx-kit.config.js,
an rnx-kit section of package.json, or any of the other
standard ways of supplying configuration.
Working with Kits
We have a
command-line interface
which is the front-end for common kit tasks. It uses the kit configuration
to control how it operates, as well as command-line overrides. The CLI is useful
as a development tool and in automated CI loops.
Dependency Management
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
Shipping your kit starts with bundling it into a single JavaScript file.
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
command-line interface:
yarn react-native rnx-bundleThe 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
Releasing your kit to customers may require distribution of a 3rd-party
notice. This notice might include licenses and attribution for external
dependencies your kit uses.
example.
You can use the command-line interface to assist you in building this 3rd-party notice:
yarn react-native rnx-write-third-party-noticesNOTE: 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
use kit configuration of the CLI, you can use individual @rnx-kit packages.
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.
| Name | Description |
|---|---|
| @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-resolver-symlinks | Metro resolver with support for symlinks |
| @rnx-kit/metro-serializer | Metro's default JavaScript bundle serializer but with plugin support |
| @rnx-kit/metro-serializer-esbuild | Experimental esbuild serializer for Metro |
| @rnx-kit/metro-service | Metro service for bundling and bundle-serving |
| @rnx-kit/react-native-auth | @rnx-kit/react-native-auth provides a cross-app uniform API for user authentication |
| @rnx-kit/react-native-lazy-index | RAM bundle friendly index.js with on-demand loaded modules |
| @rnx-kit/react-native-test-app-msal | Microsoft Authentication Library (MSAL) module for react-native-test-app |
| @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-language | A collection of supplemental JavaScript functions and types |
| @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-react-native-compiler | TypeScript compiler with a custom module resolver for react-native projects |
| @rnx-kit/typescript-react-native-resolver | TypeScript module resolver for use with react-native projects |
| @rnx-kit/typescript-service | TypeScript language services with support for custom module resolution |
Incubator
For experimental work we have a dedicated folder, incubator - the packages
collected here are not to be used by the general audience.
| Name | Description |
|---|---|
| @rnx-kit/metro-swc-worker | wc under the hood |
| @rnx-kit/patcher-rnmacos | A tool to generate patches and apply them to a codebase |
| @rnx-kit/rn-changelog-generator | Generate a markdown-formatted list of changes between two version of react-native |
Contributing
This project welcomes contributions and suggestions. See CONTRIBUTING for details.
NOTE:
@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.