Standardize secondary package READMEs (#57273)

Summary:
Pull Request resolved: https://github.com/react/react-native/pull/57273

**Motivation**

A README is the first thing an npm visitor sees on each package; internal-repo boilerplate like the "Testing" sections and the "We're using yarn…" note doesn't belong on a published package page.

**Changes**

- Standardize every README: a `# react-native/<name>` heading, a user-facing description, and a blue version badge plus a green monthly-downloads badge.
- Keep the "internal dependency" prelude only on `community-cli-plugin`, `virtualized-lists`, and `js-polyfills`.
- Drop the monorepo-template "Testing" sections and yarn note.
- Rework `metro-config` around the Configuring Metro guide; add missing READMEs for `metro-babel-transformer` and `popup-menu-android`.

Changelog: [Internal]

Reviewed By: emily8rown

Differential Revision: D109017270

fbshipit-source-id: 6208294c4ad2e6235a6605ae54f22d730f0476e7
This commit is contained in:
Alex Hunt
2026-06-18 07:04:44 -07:00
committed by meta-codesync[bot]
parent 57cc504c82
commit ffe3f79495
22 changed files with 132 additions and 185 deletions
+4 -1
View File
@@ -1,6 +1,9 @@
# @react-native/assets-registry
![npm package](https://img.shields.io/npm/v/@react-native/assets-registry?color=brightgreen&label=npm%20package)
[![npm]](https://www.npmjs.com/package/@react-native/assets-registry) [![npm downloads]](https://www.npmjs.com/package/@react-native/assets-registry)
[npm]: https://img.shields.io/npm/v/@react-native/assets-registry.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/assets-registry.svg
Runtime registry that maps asset IDs generated in a Metro bundle to asset metadata. It backs `<Image>`, `Image.resolveAssetSource()`, and any code that resolves `require('./img.png')` on native.
+4 -17
View File
@@ -1,21 +1,8 @@
# @react-native/babel-plugin-codegen
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/babel-plugin-codegen) [![npm downloads]](https://www.npmjs.com/package/@react-native/babel-plugin-codegen)
## Installation
[npm]: https://img.shields.io/npm/v/@react-native/babel-plugin-codegen.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/babel-plugin-codegen.svg
```
yarn add --dev @babel/core @react-native/babel-plugin-codegen
```
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
[version-badge]: https://img.shields.io/npm/v/@react-native/babel-plugin-codegen?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/babel-plugin-codegen
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `yarn jest packages/babel-plugin-codegen`.
Babel plugin that generates native module and view manager binding code for React Native, powered by [`@react-native/codegen`](https://www.npmjs.com/package/@react-native/codegen).
+5
View File
@@ -1,5 +1,10 @@
# @react-native/community-cli-plugin
[![npm]](https://www.npmjs.com/package/@react-native/community-cli-plugin) [![npm downloads]](https://www.npmjs.com/package/@react-native/community-cli-plugin)
[npm]: https://img.shields.io/npm/v/@react-native/community-cli-plugin.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/community-cli-plugin.svg
> This is an internal dependency of React Native. **Please don't depend on it directly.**
CLI entry points supporting core React Native development features.
+4 -3
View File
@@ -1,10 +1,11 @@
# @react-native/debugger-frontend
![npm package](https://img.shields.io/npm/v/@react-native/debugger-frontend?color=brightgreen&label=npm%20package)
[![npm]](https://www.npmjs.com/package/@react-native/debugger-frontend) [![npm downloads]](https://www.npmjs.com/package/@react-native/debugger-frontend)
Debugger frontend for React Native based on Chrome DevTools.
[npm]: https://img.shields.io/npm/v/@react-native/debugger-frontend.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/debugger-frontend.svg
This package is internal to React Native and is intended to be used via [`@react-native/dev-middleware`](https://www.npmjs.com/package/@react-native/dev-middleware).
Debugger frontend for React Native based on Chrome DevTools. It is intended to be used via [`@react-native/dev-middleware`](https://www.npmjs.com/package/@react-native/dev-middleware).
## Usage
+5 -2
View File
@@ -1,8 +1,11 @@
# @react-native/debugger-shell
![npm package](https://img.shields.io/npm/v/@react-native/debugger-shell?color=brightgreen&label=npm%20package)
[![npm]](https://www.npmjs.com/package/@react-native/debugger-shell) [![npm downloads]](https://www.npmjs.com/package/@react-native/debugger-shell)
Experimental Electron-based shell for React Native DevTools. This package is not part of React Native's public API.
[npm]: https://img.shields.io/npm/v/@react-native/debugger-shell.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/debugger-shell.svg
Experimental Electron-based shell for React Native DevTools.
## Why Electron?
+4 -1
View File
@@ -1,6 +1,9 @@
# @react-native/dev-middleware
![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
[![npm]](https://www.npmjs.com/package/@react-native/dev-middleware) [![npm downloads]](https://www.npmjs.com/package/@react-native/dev-middleware)
[npm]: https://img.shields.io/npm/v/@react-native/dev-middleware.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/dev-middleware.svg
Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
@@ -1,15 +1,18 @@
# @react-native/eslint-config
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/eslint-config) [![npm downloads]](https://www.npmjs.com/package/@react-native/eslint-config)
[npm]: https://img.shields.io/npm/v/@react-native/eslint-config.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/eslint-config.svg
ESLint and Prettier configuration used by React Native apps.
## Installation
```
```sh
yarn add --dev eslint prettier @react-native/eslint-config
```
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
## Usage
### For ESLint 9+ (Flat Config)
@@ -45,6 +48,3 @@ Add to your eslint config (`.eslintrc`, or `eslintConfig` field in `package.json
"extends": "@react-native"
}
```
[version-badge]: https://img.shields.io/npm/v/@react-native/eslint-config.svg?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/eslint-config
+4 -24
View File
@@ -1,34 +1,14 @@
# @react-native/eslint-plugin
This plugin is intended to be used in [`@react-native/eslint-config`](https://github.com/facebook/react-native/tree/HEAD/packages/eslint-config-react-native). You probably want to install that package instead.
[![npm]](https://www.npmjs.com/package/@react-native/eslint-plugin) [![npm downloads]](https://www.npmjs.com/package/@react-native/eslint-plugin)
## Installation
[npm]: https://img.shields.io/npm/v/@react-native/eslint-plugin.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/eslint-plugin.svg
```
yarn add --dev eslint @react-native/eslint-plugin
```
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
## Usage
Add to your eslint config (`.eslintrc`, or `eslintConfig` field in `package.json`):
```json
{
"plugins": ["@react-native"]
}
```
ESLint rules for [`@react-native/eslint-config`](https://github.com/facebook/react-native/tree/HEAD/packages/eslint-config-react-native). You probably want to install that package instead.
## Rules
### `platform-colors`
Enforces that calls to `PlatformColor` and `DynamicColorIOS` are statically analyzable to enable performance optimizations.
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `yarn jest packages/eslint-plugin-react-native`.
+4 -17
View File
@@ -1,21 +1,8 @@
# @react-native/eslint-plugin-specs
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/eslint-plugin-specs) [![npm downloads]](https://www.npmjs.com/package/@react-native/eslint-plugin-specs)
## Installation
[npm]: https://img.shields.io/npm/v/@react-native/eslint-plugin-specs.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/eslint-plugin-specs.svg
```
yarn add --dev @react-native/eslint-plugin-specs
```
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
[version-badge]: https://img.shields.io/npm/v/@react-native/eslint-plugin-specs?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/eslint-plugin-specs
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `yarn jest packages/eslint-plugin-specs`.
ESLint rules that validate React Native Native Module and Component specs.
+4 -19
View File
@@ -1,23 +1,8 @@
# @react-native/gradle-plugin
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/gradle-plugin) [![npm downloads]](https://www.npmjs.com/package/@react-native/gradle-plugin)
A Gradle Plugin used to support development of React Native applications for Android.
[npm]: https://img.shields.io/npm/v/@react-native/gradle-plugin.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/gradle-plugin.svg
## Installation
```
yarn add @react-native/gradle-plugin
```
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
[version-badge]: https://img.shields.io/npm/v/@react-native/gradle-plugin?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/gradle-plugin
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `./gradlew -p packages/gradle-plugin test`.
Gradle plugin used to build and configure React Native applications for Android. It is applied automatically by apps created from the React Native template.
+5
View File
@@ -1,5 +1,10 @@
# @react-native/jest-preset
[![npm]](https://www.npmjs.com/package/@react-native/jest-preset) [![npm downloads]](https://www.npmjs.com/package/@react-native/jest-preset)
[npm]: https://img.shields.io/npm/v/@react-native/jest-preset.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/jest-preset.svg
Jest preset for [React Native](https://reactnative.dev) apps.
## Usage
+24 -16
View File
@@ -1,21 +1,29 @@
# @react-native/metro-config
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/metro-config) [![npm downloads]](https://www.npmjs.com/package/@react-native/metro-config)
## Installation
[npm]: https://img.shields.io/npm/v/@react-native/metro-config.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/metro-config.svg
Metro configuration for React Native. In React Native, your Metro config should extend either `@react-native/metro-config` or `@expo/metro-config`. These packages contain essential defaults necessary to build and run React Native apps.
See [Configuring Metro](https://reactnative.dev/docs/next/metro#configuring-metro) for the full guide.
## Usage
```js
const {
getDefaultConfig,
mergeConfig,
} = require('@react-native/metro-config');
/**
* Metro configuration
* https://metrobundler.dev/docs/configuration
*
* @type {import('metro-config').MetroConfig}
*/
const config = {};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
```
yarn add --dev @react-native/js-polyfills metro-config @react-native/metro-babel-transformer metro-runtime @react-native/metro-config
```
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
[version-badge]: https://img.shields.io/npm/v/@react-native/metro-config?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/metro-config
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `yarn jest packages/metro-config`.
+4 -1
View File
@@ -1,6 +1,9 @@
# @react-native/new-app-screen
![npm package](https://img.shields.io/npm/v/@react-native/new-app-screen?color=brightgreen&label=npm%20package)
[![npm]](https://www.npmjs.com/package/@react-native/new-app-screen) [![npm downloads]](https://www.npmjs.com/package/@react-native/new-app-screen)
[npm]: https://img.shields.io/npm/v/@react-native/new-app-screen.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/new-app-screen.svg
`NewAppScreen` component for React Native.
+4 -17
View File
@@ -1,21 +1,8 @@
# @react-native/normalize-colors
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/normalize-colors) [![npm downloads]](https://www.npmjs.com/package/@react-native/normalize-colors)
## Installation
[npm]: https://img.shields.io/npm/v/@react-native/normalize-colors.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/normalize-colors.svg
```
yarn add --dev @react-native/normalize-colors
```
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
[version-badge]: https://img.shields.io/npm/v/@react-native/normalize-colors?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/normalize-colors
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `yarn jest packages/normalize-color`.
Color normalization utility for React Native. Converts CSS color values into the numeric form consumed by the native layer.
+5 -16
View File
@@ -1,21 +1,10 @@
# @react-native/js-polyfills
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/js-polyfills) [![npm downloads]](https://www.npmjs.com/package/@react-native/js-polyfills)
## Installation
[npm]: https://img.shields.io/npm/v/@react-native/js-polyfills.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/js-polyfills.svg
```
yarn add @react-native/js-polyfills
```
> This is an internal dependency of React Native. **Please don't depend on it directly.**
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
[version-badge]: https://img.shields.io/npm/v/@react-native/js-polyfills?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/js-polyfills
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `yarn jest packages/polyfills`.
JavaScript environment polyfills set up by React Native at startup (e.g. `Promise`, timers, and other runtime globals).
+9 -10
View File
@@ -1,13 +1,16 @@
# @react-native/babel-preset
Babel presets for [React Native](https://reactnative.dev) applications. React Native itself uses this Babel preset by default when transforming your app's source code.
[![npm]](https://www.npmjs.com/package/@react-native/babel-preset) [![npm downloads]](https://www.npmjs.com/package/@react-native/babel-preset)
If you wish to use a custom Babel configuration by writing a `babel.config.js` file in your project's root directory, you must specify all the plugins necessary to transform your code. React Native does not apply its default Babel configuration in this case. So, to make your life easier, you can use this preset to get the default configuration and then specify more plugins that run before it.
[npm]: https://img.shields.io/npm/v/@react-native/babel-preset.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/babel-preset.svg
Babel preset for [React Native](https://reactnative.dev) applications. React Native uses this Babel preset by default when transforming your app's source code.
You only need to use this preset directly if you provide a custom `babel.config.js` file in your project's root directory. React Native does not apply its default Babel configuration in that case, so you must specify all the plugins necessary to transform your code — start from this preset to get the defaults and add more plugins on top.
## Usage
As mentioned above, you only need to use this preset if you are writing a custom `babel.config.js` file.
### Installation
Install `@react-native/babel-preset` in your app:
@@ -26,16 +29,12 @@ yarn add -D @react-native/babel-preset
### Configuring Babel
Then, create a file called `babel.config.js` in your project's root directory. The existence of this `babel.config.js` file will tell React Native to use your custom Babel configuration instead of its own. Then load this preset:
Then, create a file called `babel.config.js` in your project's root directory. The existence of this `babel.config.js` file tells React Native to use your custom Babel configuration instead of its own. Then load this preset:
```
```json
{
"presets": ["module:@react-native/babel-preset"]
}
```
You can further customize your Babel configuration by specifying plugins and other options. See [Babel's `babel.config.js` documentation](https://babeljs.io/docs/en/config-files/) to learn more.
## Help and Support
If you get stuck configuring Babel, please ask a question on Stack Overflow or find a consultant for help. If you discover a bug, please open up an issue.
@@ -0,0 +1,8 @@
# @react-native/metro-babel-transformer
[![npm]](https://www.npmjs.com/package/@react-native/metro-babel-transformer) [![npm downloads]](https://www.npmjs.com/package/@react-native/metro-babel-transformer)
[npm]: https://img.shields.io/npm/v/@react-native/metro-babel-transformer.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/metro-babel-transformer.svg
Metro Babel transformer for React Native applications. Applies [`@react-native/babel-preset`](https://www.npmjs.com/package/@react-native/babel-preset) when transforming source files during bundling.
+4 -17
View File
@@ -1,21 +1,8 @@
# @react-native/codegen
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/codegen) [![npm downloads]](https://www.npmjs.com/package/@react-native/codegen)
## Installation
[npm]: https://img.shields.io/npm/v/@react-native/codegen.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/codegen.svg
```
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*
[version-badge]: https://img.shields.io/npm/v/@react-native/codegen?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/codegen
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `yarn jest packages/react-native-codegen`.
Code generation tools for React Native. Parses TypeScript and Flow NativeModule and Component specs and generates the native binding code used by the New Architecture.
@@ -1,4 +1,9 @@
# **React Native compatibility-check**
# @react-native/compatibility-check
[![npm]](https://www.npmjs.com/package/@react-native/compatibility-check) [![npm downloads]](https://www.npmjs.com/package/@react-native/compatibility-check)
[npm]: https://img.shields.io/npm/v/@react-native/compatibility-check.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/compatibility-check.svg
Status: Experimental (stage 1)
@@ -0,0 +1,8 @@
# @react-native/popup-menu-android
[![npm]](https://www.npmjs.com/package/@react-native/popup-menu-android) [![npm downloads]](https://www.npmjs.com/package/@react-native/popup-menu-android)
[npm]: https://img.shields.io/npm/v/@react-native/popup-menu-android.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/popup-menu-android.svg
`PopupMenuAndroid` component for React Native, exposing the Android platform's [`PopupMenu`](https://developer.android.com/reference/android/widget/PopupMenu) for displaying a menu anchored to a view.
+5
View File
@@ -1,5 +1,10 @@
# @react-native/typescript-config
[![npm]](https://www.npmjs.com/package/@react-native/typescript-config) [![npm downloads]](https://www.npmjs.com/package/@react-native/typescript-config)
[npm]: https://img.shields.io/npm/v/@react-native/typescript-config.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/typescript-config.svg
This package provides the default `tsconfig.json` used by newly built React Native apps.
This template is customized for specific versions of React Native, and should be updated in sync with the rest of your app.
+5 -16
View File
@@ -1,21 +1,10 @@
# @react-native/virtualized-lists
[![Version][version-badge]][package]
[![npm]](https://www.npmjs.com/package/@react-native/virtualized-lists) [![npm downloads]](https://www.npmjs.com/package/@react-native/virtualized-lists)
## Installation
[npm]: https://img.shields.io/npm/v/@react-native/virtualized-lists.svg?color=blue
[npm downloads]: https://img.shields.io/npm/dm/@react-native/virtualized-lists.svg
```
yarn add @react-native/virtualized-lists
```
> This is an internal dependency of React Native. **Please don't depend on it directly.**
*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
[version-badge]: https://img.shields.io/npm/v/@react-native/virtualized-lists?style=flat-square
[package]: https://www.npmjs.com/package/@react-native/virtualized-lists
## Testing
To run the tests in this package, run the following commands from the React Native root folder:
1. `yarn` to install the dependencies. You just need to run this once
2. `yarn jest packages/virtualized-lists`.
Virtualized list primitives (`VirtualizedList`, `VirtualizedSectionList`) backing React Native's `FlatList` and `SectionList` components.