Standardize secondary package READMEs (#57273)

huntie · meta-codesync[bot] · commit ffe3f7949585 · 2026-06-18T07:04:44.000-07:00
Summary: Pull Request resolved: #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
diff --git a/packages/assets-registry/README.md b/packages/assets-registry/README.md
@@ -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.
 
diff --git a/packages/babel-plugin-codegen/README.md b/packages/babel-plugin-codegen/README.md
@@ -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).
diff --git a/packages/community-cli-plugin/README.md b/packages/community-cli-plugin/README.md
@@ -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.
diff --git a/packages/debugger-frontend/README.md b/packages/debugger-frontend/README.md
@@ -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
 
diff --git a/packages/debugger-shell/README.md b/packages/debugger-shell/README.md
@@ -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?
 
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -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.
 
diff --git a/packages/eslint-config-react-native/README.md b/packages/eslint-config-react-native/README.md
@@ -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
diff --git a/packages/eslint-plugin-react-native/README.md b/packages/eslint-plugin-react-native/README.md
@@ -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`.
diff --git a/packages/eslint-plugin-specs/README.md b/packages/eslint-plugin-specs/README.md
@@ -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.
diff --git a/packages/gradle-plugin/README.md b/packages/gradle-plugin/README.md
@@ -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.
diff --git a/packages/jest-preset/README.md b/packages/jest-preset/README.md
@@ -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
diff --git a/packages/metro-config/README.md b/packages/metro-config/README.md
@@ -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
 
-```
-yarn add --dev @react-native/js-polyfills metro-config @react-native/metro-babel-transformer metro-runtime @react-native/metro-config
-```
+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.
 
-*Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like*
+See [Configuring Metro](https://reactnative.dev/docs/next/metro#configuring-metro) for the full guide.
 
-[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
+## Usage
 
-## Testing
+```js
+const {
+  getDefaultConfig,
+  mergeConfig,
+} = require('@react-native/metro-config');
 
-To run the tests in this package, run the following commands from the React Native root folder:
+/**
+ * Metro configuration
+ * https://metrobundler.dev/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {};
 
-1. `yarn` to install the dependencies. You just need to run this once
-2. `yarn jest packages/metro-config`.
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+```
diff --git a/packages/new-app-screen/README.md b/packages/new-app-screen/README.md
@@ -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.
 
diff --git a/packages/normalize-color/README.md b/packages/normalize-color/README.md
@@ -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.
diff --git a/packages/polyfills/README.md b/packages/polyfills/README.md
@@ -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).
diff --git a/packages/react-native-babel-preset/README.md b/packages/react-native-babel-preset/README.md
@@ -1,12 +1,15 @@
 # @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
 
-## Usage
+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.
 
-As mentioned above, you only need to use this preset if you are writing a custom `babel.config.js` file.
+## Usage
 
 ### Installation
 
@@ -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.
diff --git a/packages/react-native-babel-transformer/README.md b/packages/react-native-babel-transformer/README.md
@@ -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.
diff --git a/packages/react-native-codegen/README.md b/packages/react-native-codegen/README.md
diff --git a/packages/react-native-compatibility-check/README.md b/packages/react-native-compatibility-check/README.md
diff --git a/packages/react-native-popup-menu-android/README.md b/packages/react-native-popup-menu-android/README.md
diff --git a/packages/typescript-config/README.md b/packages/typescript-config/README.md
diff --git a/packages/virtualized-lists/README.md b/packages/virtualized-lists/README.md
