Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/assets-registry/README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
21 changes: 4 additions & 17 deletions packages/babel-plugin-codegen/README.md
Original file line number Diff line number Diff line change
@@ -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 changes: 5 additions & 0 deletions packages/community-cli-plugin/README.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
7 changes: 4 additions & 3 deletions packages/debugger-frontend/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
7 changes: 5 additions & 2 deletions packages/debugger-shell/README.md
Original file line number Diff line number Diff line change
@@ -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?

Expand Down
5 changes: 4 additions & 1 deletion packages/dev-middleware/README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
14 changes: 7 additions & 7 deletions packages/eslint-config-react-native/README.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down Expand Up @@ -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
28 changes: 4 additions & 24 deletions packages/eslint-plugin-react-native/README.md
Original file line number Diff line number Diff line change
@@ -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`.
21 changes: 4 additions & 17 deletions packages/eslint-plugin-specs/README.md
Original file line number Diff line number Diff line change
@@ -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.
23 changes: 4 additions & 19 deletions packages/gradle-plugin/README.md
Original file line number Diff line number Diff line change
@@ -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 changes: 5 additions & 0 deletions packages/jest-preset/README.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
32 changes: 20 additions & 12 deletions packages/metro-config/README.md
Original file line number Diff line number Diff line change
@@ -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);
```
5 changes: 4 additions & 1 deletion packages/new-app-screen/README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
21 changes: 4 additions & 17 deletions packages/normalize-color/README.md
Original file line number Diff line number Diff line change
@@ -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.
21 changes: 5 additions & 16 deletions packages/polyfills/README.md
Original file line number Diff line number Diff line change
@@ -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).
19 changes: 9 additions & 10 deletions packages/react-native-babel-preset/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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.
8 changes: 8 additions & 0 deletions packages/react-native-babel-transformer/README.md
Original file line number Diff line number Diff line change
@@ -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.
Loading
Loading