RFC: Add @react-native/metro-config package

[huntie]

Summary:

Context

React Native Metro config → React Native repo

We (the React Native team) are aiming to relocate the default Metro config for React Native out of react-native-community/cli-plugin-metro and into the React Native repo + app template as a new react-native/metro-config package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

Motivation

Today, the Metro config required to use React Native is entangled within react-native-community/cli-plugin-metro and is not readable from within a project. We instead want to relocate the default Metro config into the React Native repo and have users explicitly inherit this config in their projects.

Before	After
	Note: CLI change will be breaking, to explicitly target React Native 0.72 and onwards

Benefits

• Allows projects to clearly understand, extend, and override options within their metro.config.js file as the source of truth.
• Logically, locates the config for using Metro with React Native within the React Native repo — where we can set baseline defaults that are inherited by other tooling (e.g. both RN CLI and Expo).
• The previous setup meant that the resolved Metro configuration was hidden, preventing standalone Metro CLI commands from being runnable.
  • e.g. metro get-dependencies, which currently fails in a default React Native or Expo project.
• Removes existing noise from the template config.
• Moves us closer to shipping Metro updates and bugfixes independent of the CLI.

User-side change: Default metro.config.js file in a new React Native project

We will also signal the need to update existing metro.config.js files in the release blog post.

Before	After
⚠️ Config contains user overrides only, will be overridden by defaults set by React Native CLI.	✅ Complete Metro config is defined by extending react-native/metro-config.
⚠️ Config contains stale defaults that were split across the template and RN CLI.	✅ Both RN CLI and metro CLI will read the same config.
	✅ Dynamic/extended config will continue to be applied by RN CLI on top of these.
	✅ User-defined config object is cleaned up.

Plan

1. ➡️ This PR: Create a new package within facebook/react-native, @react-native/metro-config, to contain the default Metro config for React Native projects going forward.
2. Update React Native app template to define an updated metro.config.js extending the new config package.
3. (Depends on the above two changes) breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Note: Changes in this repo (1, 2) will be compatible with the current version of RN CLI on main — the only breaking change is that the new CLI will not be able to support RN projects without these changes.

Changes

• This PR adds the new @react-native/metro-config package which reproduces all static values previously defined in RN CLI.
  • The values not included, which remain in RN CLI, are dynamic values derived from CLI options passed by the user.

Test Plan (all PRs + incoming changes)

E2E expectation: The new config is non-breaking against old CLI, the new CLI is breaking against old config.

Pre-steps

With the relevant repos cloned:

.
└── Development/forks
├── react-native # huntie/react-native@export-D44099692
└── react-native-cli # huntie/react-native-cli@c53e49b

1. cd Development/forks/react-native/packages/rn-tester/
2. Copy over metro.config.js and package.json changes from react-native/template/ (next commit in stack).
3. Run yarn.

[Base case] React Native @ main (this stack, before new CLI is merged — non-breaking)
(template = new, CLI = old)

yarn start

✅ Works (new complete Metro config is read into RN CLI, and overridden by its previous defaults — for this reason we can't delete ./rn-get-polyfills.js yet!)

yarn metro get-dependencies --entry-file js/RNTesterApp.android.js --platform android

✅ Works (new complete Metro config is available to Metro CLI)

[Release state] React Native 0.72 (new CLI, new config required)
(template = new, CLI = new)

1. Use (cd ../..; yarn link @react-native-community/cli-plugin-metro) to substitute version of @react-native-community/cli-plugin-metro using cloned react-native-cli directory.
2. Run yarn.
3. Update watchFolders (see Metro Local Development Setup).

yarn start

✅ Works (new complete Metro config is read into RN CLI, and merged with sparser defaults in react-native-community/cli#1875)
- (Note console logs)
- Note: At the point this test was run, found a small unrelated bug (post monorepo land) where rn-tester would look for a metro.config.js at the repo root and not inside packages/rn-tester/ — hence an extra /metro.config.js file was added in the above screenshot. This will be re-tested in the commit when we bump RN CLI.

Changelog:
[General][Added] Add react-native/metro-config package

Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,519,193	+0
android	hermes	armeabi-v7a	7,834,776	+0
android	hermes	x86	8,999,081	+0
android	hermes	x86_64	8,854,121	+0
android	jsc	arm64-v8a	9,141,838	+0
android	jsc	armeabi-v7a	8,333,472	+0
android	jsc	x86	9,196,418	+0
android	jsc	x86_64	9,454,245	+0

Base commit: 0eff8d6
Branch: main

[huntie]

This is the only base config divergence: ['android', 'ios'] here matches the default RN repo setup. As before, this will be overridden by RN CLI based on the platforms CLI argument.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[huntie]

Changes to metro.config.js files within the template and rn-tester are prepared and will be shipped shortly after this PR (as we need to publish the new package first).

[cortinico]

LGTM on the React Native side of things

[facebook-github-bot]

This pull request has been merged in 745cdb1.

[huntie]

Summary:

Context

React Native Metro config → React Native repo

We (the React Native team) are aiming to relocate the default Metro config for React Native out of react-native-community/cli-plugin-metro and into the React Native repo + app template as a new react-native/metro-config package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

Motivation

Today, the Metro config required to use React Native is entangled within react-native-community/cli-plugin-metro and is not readable from within a project. We instead want to relocate the default Metro config into the React Native repo and have users explicitly inherit this config in their projects.

Before	After
	Note: CLI change will be breaking, to explicitly target React Native 0.72 and onwards

Benefits

• Allows projects to clearly understand, extend, and override options within their metro.config.js file as the source of truth.
• Logically, locates the config for using Metro with React Native within the React Native repo — where we can set baseline defaults that are inherited by other tooling (e.g. both RN CLI and Expo).
• The previous setup meant that the resolved Metro configuration was hidden, preventing standalone Metro CLI commands from being runnable.
  • e.g. metro get-dependencies, which currently fails in a default React Native or Expo project.
• Removes existing noise from the template config.
• Moves us closer to shipping Metro updates and bugfixes independent of the CLI.

User-side change: Default metro.config.js file in a new React Native project

We will also signal the need to update existing metro.config.js files in the release blog post.

Before	After
⚠️ Config contains user overrides only, will be overridden by defaults set by React Native CLI.	✅ Complete Metro config is defined by extending react-native/metro-config.
⚠️ Config contains stale defaults that were split across the template and RN CLI.	✅ Both RN CLI and metro CLI will read the same config.
	✅ Dynamic/extended config will continue to be applied by RN CLI on top of these.
	✅ User-defined config object is cleaned up.

Plan

1. ➡️ This PR: Create a new package within facebook/react-native, @react-native/metro-config, to contain the default Metro config for React Native projects going forward.
2. Update React Native app template to define an updated metro.config.js extending the new config package.
3. (Depends on the above two changes) breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Note: Changes in this repo (1, 2) will be compatible with the current version of RN CLI on main — the only breaking change is that the new CLI will not be able to support RN projects without these changes.

Changes

• This PR adds the new @react-native/metro-config package which reproduces all static values previously defined in RN CLI.
  • The values not included, which remain in RN CLI, are dynamic values derived from CLI options passed by the user.

Test Plan (all PRs + incoming changes)

E2E expectation: The new config is non-breaking against old CLI, the new CLI is breaking against old config.

Pre-steps

With the relevant repos cloned:

.
└── Development/forks
├── react-native # huntie/react-native@export-D44099692
└── react-native-cli # huntie/react-native-cli@c53e49b

1. cd Development/forks/react-native/packages/rn-tester/
2. Copy over metro.config.js and package.json changes from react-native/template/ (next commit in stack).
3. Run yarn.

[Base case] React Native @ main (this stack, before new CLI is merged — non-breaking)
(template = new, CLI = old)

yarn start

✅ Works (new complete Metro config is read into RN CLI, and overridden by its previous defaults — for this reason we can't delete ./rn-get-polyfills.js yet!)

yarn metro get-dependencies --entry-file js/RNTesterApp.android.js --platform android

✅ Works (new complete Metro config is available to Metro CLI)

[Release state] React Native 0.72 (new CLI, new config required)
(template = new, CLI = new)

1. Use (cd ../..; yarn link @react-native-community/cli-plugin-metro) to substitute version of @react-native-community/cli-plugin-metro using cloned react-native-cli directory.
2. Run yarn.
3. Update watchFolders (see Metro Local Development Setup).

yarn start

✅ Works (new complete Metro config is read into RN CLI, and merged with sparser defaults in react-native-community/cli#1875)
- (Note console logs)
- Note: At the point this test was run, found a small unrelated bug (post monorepo land) where rn-tester would look for a metro.config.js at the repo root and not inside packages/rn-tester/ — hence an extra /metro.config.js file was added in the above screenshot. This will be re-tested in the commit when we bump RN CLI.

Changelog:
[General][Added] Add react-native/metro-config package

Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,519,193	+0
android	hermes	armeabi-v7a	7,834,776	+0
android	hermes	x86	8,999,081	+0
android	hermes	x86_64	8,854,121	+0
android	jsc	arm64-v8a	9,141,838	+0
android	jsc	armeabi-v7a	8,333,472	+0
android	jsc	x86	9,196,418	+0
android	jsc	x86_64	9,454,245	+0

Base commit: 0eff8d6
Branch: main

[huntie]

This is the only base config divergence: ['android', 'ios'] here matches the default RN repo setup. As before, this will be overridden by RN CLI based on the platforms CLI argument.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[huntie]

Changes to metro.config.js files within the template and rn-tester are prepared and will be shipped shortly after this PR (as we need to publish the new package first).

[cortinico]

LGTM on the React Native side of things

[facebook-github-bot]

This pull request has been merged in 745cdb1.

[huntie]

Summary:

Context

React Native Metro config → React Native repo

We (the React Native team) are aiming to relocate the default Metro config for React Native out of react-native-community/cli-plugin-metro and into the React Native repo + app template as a new react-native/metro-config package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

Motivation

Today, the Metro config required to use React Native is entangled within react-native-community/cli-plugin-metro and is not readable from within a project. We instead want to relocate the default Metro config into the React Native repo and have users explicitly inherit this config in their projects.

Before	After
	Note: CLI change will be breaking, to explicitly target React Native 0.72 and onwards

Benefits

• Allows projects to clearly understand, extend, and override options within their metro.config.js file as the source of truth.
• Logically, locates the config for using Metro with React Native within the React Native repo — where we can set baseline defaults that are inherited by other tooling (e.g. both RN CLI and Expo).
• The previous setup meant that the resolved Metro configuration was hidden, preventing standalone Metro CLI commands from being runnable.
  • e.g. metro get-dependencies, which currently fails in a default React Native or Expo project.
• Removes existing noise from the template config.
• Moves us closer to shipping Metro updates and bugfixes independent of the CLI.

User-side change: Default metro.config.js file in a new React Native project

We will also signal the need to update existing metro.config.js files in the release blog post.

Before	After
⚠️ Config contains user overrides only, will be overridden by defaults set by React Native CLI.	✅ Complete Metro config is defined by extending react-native/metro-config.
⚠️ Config contains stale defaults that were split across the template and RN CLI.	✅ Both RN CLI and metro CLI will read the same config.
	✅ Dynamic/extended config will continue to be applied by RN CLI on top of these.
	✅ User-defined config object is cleaned up.

Plan

1. ➡️ This PR: Create a new package within facebook/react-native, @react-native/metro-config, to contain the default Metro config for React Native projects going forward.
2. Update React Native app template to define an updated metro.config.js extending the new config package.
3. (Depends on the above two changes) breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Note: Changes in this repo (1, 2) will be compatible with the current version of RN CLI on main — the only breaking change is that the new CLI will not be able to support RN projects without these changes.

Changes

• This PR adds the new @react-native/metro-config package which reproduces all static values previously defined in RN CLI.
  • The values not included, which remain in RN CLI, are dynamic values derived from CLI options passed by the user.

Test Plan (all PRs + incoming changes)

E2E expectation: The new config is non-breaking against old CLI, the new CLI is breaking against old config.

Pre-steps

With the relevant repos cloned:

.
└── Development/forks
├── react-native # huntie/react-native@export-D44099692
└── react-native-cli # huntie/react-native-cli@c53e49b

1. cd Development/forks/react-native/packages/rn-tester/
2. Copy over metro.config.js and package.json changes from react-native/template/ (next commit in stack).
3. Run yarn.

[Base case] React Native @ main (this stack, before new CLI is merged — non-breaking)
(template = new, CLI = old)

yarn start

✅ Works (new complete Metro config is read into RN CLI, and overridden by its previous defaults — for this reason we can't delete ./rn-get-polyfills.js yet!)

yarn metro get-dependencies --entry-file js/RNTesterApp.android.js --platform android

✅ Works (new complete Metro config is available to Metro CLI)

[Release state] React Native 0.72 (new CLI, new config required)
(template = new, CLI = new)

1. Use (cd ../..; yarn link @react-native-community/cli-plugin-metro) to substitute version of @react-native-community/cli-plugin-metro using cloned react-native-cli directory.
2. Run yarn.
3. Update watchFolders (see Metro Local Development Setup).

yarn start

✅ Works (new complete Metro config is read into RN CLI, and merged with sparser defaults in react-native-community/cli#1875)
- (Note console logs)
- Note: At the point this test was run, found a small unrelated bug (post monorepo land) where rn-tester would look for a metro.config.js at the repo root and not inside packages/rn-tester/ — hence an extra /metro.config.js file was added in the above screenshot. This will be re-tested in the commit when we bump RN CLI.

Changelog:
[General][Added] Add react-native/metro-config package

Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,519,193	+0
android	hermes	armeabi-v7a	7,834,776	+0
android	hermes	x86	8,999,081	+0
android	hermes	x86_64	8,854,121	+0
android	jsc	arm64-v8a	9,141,838	+0
android	jsc	armeabi-v7a	8,333,472	+0
android	jsc	x86	9,196,418	+0
android	jsc	x86_64	9,454,245	+0

Base commit: 0eff8d6
Branch: main

[huntie]

This is the only base config divergence: ['android', 'ios'] here matches the default RN repo setup. As before, this will be overridden by RN CLI based on the platforms CLI argument.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[huntie]

Changes to metro.config.js files within the template and rn-tester are prepared and will be shipped shortly after this PR (as we need to publish the new package first).

[cortinico]

LGTM on the React Native side of things

[facebook-github-bot]

This pull request has been merged in 745cdb1.

[huntie]

Summary:

Context

React Native Metro config → React Native repo

We (the React Native team) are aiming to relocate the default Metro config for React Native out of react-native-community/cli-plugin-metro and into the React Native repo + app template as a new react-native/metro-config package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

Motivation

Today, the Metro config required to use React Native is entangled within react-native-community/cli-plugin-metro and is not readable from within a project. We instead want to relocate the default Metro config into the React Native repo and have users explicitly inherit this config in their projects.

Before	After
	Note: CLI change will be breaking, to explicitly target React Native 0.72 and onwards

Benefits

• Allows projects to clearly understand, extend, and override options within their metro.config.js file as the source of truth.
• Logically, locates the config for using Metro with React Native within the React Native repo — where we can set baseline defaults that are inherited by other tooling (e.g. both RN CLI and Expo).
• The previous setup meant that the resolved Metro configuration was hidden, preventing standalone Metro CLI commands from being runnable.
  • e.g. metro get-dependencies, which currently fails in a default React Native or Expo project.
• Removes existing noise from the template config.
• Moves us closer to shipping Metro updates and bugfixes independent of the CLI.

User-side change: Default metro.config.js file in a new React Native project

We will also signal the need to update existing metro.config.js files in the release blog post.

Before	After
⚠️ Config contains user overrides only, will be overridden by defaults set by React Native CLI.	✅ Complete Metro config is defined by extending react-native/metro-config.
⚠️ Config contains stale defaults that were split across the template and RN CLI.	✅ Both RN CLI and metro CLI will read the same config.
	✅ Dynamic/extended config will continue to be applied by RN CLI on top of these.
	✅ User-defined config object is cleaned up.

Plan

1. ➡️ This PR: Create a new package within facebook/react-native, @react-native/metro-config, to contain the default Metro config for React Native projects going forward.
2. Update React Native app template to define an updated metro.config.js extending the new config package.
3. (Depends on the above two changes) breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Note: Changes in this repo (1, 2) will be compatible with the current version of RN CLI on main — the only breaking change is that the new CLI will not be able to support RN projects without these changes.

Changes

• This PR adds the new @react-native/metro-config package which reproduces all static values previously defined in RN CLI.
  • The values not included, which remain in RN CLI, are dynamic values derived from CLI options passed by the user.

Test Plan (all PRs + incoming changes)

E2E expectation: The new config is non-breaking against old CLI, the new CLI is breaking against old config.

Pre-steps

With the relevant repos cloned:

.
└── Development/forks
├── react-native # huntie/react-native@export-D44099692
└── react-native-cli # huntie/react-native-cli@c53e49b

1. cd Development/forks/react-native/packages/rn-tester/
2. Copy over metro.config.js and package.json changes from react-native/template/ (next commit in stack).
3. Run yarn.

[Base case] React Native @ main (this stack, before new CLI is merged — non-breaking)
(template = new, CLI = old)

yarn start

✅ Works (new complete Metro config is read into RN CLI, and overridden by its previous defaults — for this reason we can't delete ./rn-get-polyfills.js yet!)

yarn metro get-dependencies --entry-file js/RNTesterApp.android.js --platform android

✅ Works (new complete Metro config is available to Metro CLI)

[Release state] React Native 0.72 (new CLI, new config required)
(template = new, CLI = new)

1. Use (cd ../..; yarn link @react-native-community/cli-plugin-metro) to substitute version of @react-native-community/cli-plugin-metro using cloned react-native-cli directory.
2. Run yarn.
3. Update watchFolders (see Metro Local Development Setup).

yarn start

✅ Works (new complete Metro config is read into RN CLI, and merged with sparser defaults in react-native-community/cli#1875)
- (Note console logs)
- Note: At the point this test was run, found a small unrelated bug (post monorepo land) where rn-tester would look for a metro.config.js at the repo root and not inside packages/rn-tester/ — hence an extra /metro.config.js file was added in the above screenshot. This will be re-tested in the commit when we bump RN CLI.

Changelog:
[General][Added] Add react-native/metro-config package

Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,519,193	+0
android	hermes	armeabi-v7a	7,834,776	+0
android	hermes	x86	8,999,081	+0
android	hermes	x86_64	8,854,121	+0
android	jsc	arm64-v8a	9,141,838	+0
android	jsc	armeabi-v7a	8,333,472	+0
android	jsc	x86	9,196,418	+0
android	jsc	x86_64	9,454,245	+0

Base commit: 0eff8d6
Branch: main

[huntie]

This is the only base config divergence: ['android', 'ios'] here matches the default RN repo setup. As before, this will be overridden by RN CLI based on the platforms CLI argument.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[huntie]

Changes to metro.config.js files within the template and rn-tester are prepared and will be shipped shortly after this PR (as we need to publish the new package first).

[cortinico]

LGTM on the React Native side of things

[facebook-github-bot]

This pull request has been merged in 745cdb1.

[huntie]

Summary:

Context

React Native Metro config → React Native repo

We (the React Native team) are aiming to relocate the default Metro config for React Native out of react-native-community/cli-plugin-metro and into the React Native repo + app template as a new react-native/metro-config package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

Motivation

Today, the Metro config required to use React Native is entangled within react-native-community/cli-plugin-metro and is not readable from within a project. We instead want to relocate the default Metro config into the React Native repo and have users explicitly inherit this config in their projects.

Before	After
	Note: CLI change will be breaking, to explicitly target React Native 0.72 and onwards

Benefits

• Allows projects to clearly understand, extend, and override options within their metro.config.js file as the source of truth.
• Logically, locates the config for using Metro with React Native within the React Native repo — where we can set baseline defaults that are inherited by other tooling (e.g. both RN CLI and Expo).
• The previous setup meant that the resolved Metro configuration was hidden, preventing standalone Metro CLI commands from being runnable.
  • e.g. metro get-dependencies, which currently fails in a default React Native or Expo project.
• Removes existing noise from the template config.
• Moves us closer to shipping Metro updates and bugfixes independent of the CLI.

User-side change: Default metro.config.js file in a new React Native project

We will also signal the need to update existing metro.config.js files in the release blog post.

Before	After
⚠️ Config contains user overrides only, will be overridden by defaults set by React Native CLI.	✅ Complete Metro config is defined by extending react-native/metro-config.
⚠️ Config contains stale defaults that were split across the template and RN CLI.	✅ Both RN CLI and metro CLI will read the same config.
	✅ Dynamic/extended config will continue to be applied by RN CLI on top of these.
	✅ User-defined config object is cleaned up.

Plan

1. ➡️ This PR: Create a new package within facebook/react-native, @react-native/metro-config, to contain the default Metro config for React Native projects going forward.
2. Update React Native app template to define an updated metro.config.js extending the new config package.
3. (Depends on the above two changes) breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Note: Changes in this repo (1, 2) will be compatible with the current version of RN CLI on main — the only breaking change is that the new CLI will not be able to support RN projects without these changes.

Changes

• This PR adds the new @react-native/metro-config package which reproduces all static values previously defined in RN CLI.
  • The values not included, which remain in RN CLI, are dynamic values derived from CLI options passed by the user.

Test Plan (all PRs + incoming changes)

E2E expectation: The new config is non-breaking against old CLI, the new CLI is breaking against old config.

Pre-steps

With the relevant repos cloned:

.
└── Development/forks
├── react-native # huntie/react-native@export-D44099692
└── react-native-cli # huntie/react-native-cli@c53e49b

1. cd Development/forks/react-native/packages/rn-tester/
2. Copy over metro.config.js and package.json changes from react-native/template/ (next commit in stack).
3. Run yarn.

[Base case] React Native @ main (this stack, before new CLI is merged — non-breaking)
(template = new, CLI = old)

yarn start

✅ Works (new complete Metro config is read into RN CLI, and overridden by its previous defaults — for this reason we can't delete ./rn-get-polyfills.js yet!)

yarn metro get-dependencies --entry-file js/RNTesterApp.android.js --platform android

✅ Works (new complete Metro config is available to Metro CLI)

[Release state] React Native 0.72 (new CLI, new config required)
(template = new, CLI = new)

1. Use (cd ../..; yarn link @react-native-community/cli-plugin-metro) to substitute version of @react-native-community/cli-plugin-metro using cloned react-native-cli directory.
2. Run yarn.
3. Update watchFolders (see Metro Local Development Setup).

yarn start

✅ Works (new complete Metro config is read into RN CLI, and merged with sparser defaults in react-native-community/cli#1875)
- (Note console logs)
- Note: At the point this test was run, found a small unrelated bug (post monorepo land) where rn-tester would look for a metro.config.js at the repo root and not inside packages/rn-tester/ — hence an extra /metro.config.js file was added in the above screenshot. This will be re-tested in the commit when we bump RN CLI.

Changelog:
[General][Added] Add react-native/metro-config package

Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,519,193	+0
android	hermes	armeabi-v7a	7,834,776	+0
android	hermes	x86	8,999,081	+0
android	hermes	x86_64	8,854,121	+0
android	jsc	arm64-v8a	9,141,838	+0
android	jsc	armeabi-v7a	8,333,472	+0
android	jsc	x86	9,196,418	+0
android	jsc	x86_64	9,454,245	+0

Base commit: 0eff8d6
Branch: main

[huntie]

This is the only base config divergence: ['android', 'ios'] here matches the default RN repo setup. As before, this will be overridden by RN CLI based on the platforms CLI argument.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[huntie]

Changes to metro.config.js files within the template and rn-tester are prepared and will be shipped shortly after this PR (as we need to publish the new package first).

[cortinico]

LGTM on the React Native side of things

[facebook-github-bot]

This pull request has been merged in 745cdb1.

[huntie]

Summary:

Context

React Native Metro config → React Native repo

We (the React Native team) are aiming to relocate the default Metro config for React Native out of react-native-community/cli-plugin-metro and into the React Native repo + app template as a new react-native/metro-config package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

Motivation

Today, the Metro config required to use React Native is entangled within react-native-community/cli-plugin-metro and is not readable from within a project. We instead want to relocate the default Metro config into the React Native repo and have users explicitly inherit this config in their projects.

Before	After
	Note: CLI change will be breaking, to explicitly target React Native 0.72 and onwards

Benefits

• Allows projects to clearly understand, extend, and override options within their metro.config.js file as the source of truth.
• Logically, locates the config for using Metro with React Native within the React Native repo — where we can set baseline defaults that are inherited by other tooling (e.g. both RN CLI and Expo).
• The previous setup meant that the resolved Metro configuration was hidden, preventing standalone Metro CLI commands from being runnable.
  • e.g. metro get-dependencies, which currently fails in a default React Native or Expo project.
• Removes existing noise from the template config.
• Moves us closer to shipping Metro updates and bugfixes independent of the CLI.

User-side change: Default metro.config.js file in a new React Native project

We will also signal the need to update existing metro.config.js files in the release blog post.

Before	After
⚠️ Config contains user overrides only, will be overridden by defaults set by React Native CLI.	✅ Complete Metro config is defined by extending react-native/metro-config.
⚠️ Config contains stale defaults that were split across the template and RN CLI.	✅ Both RN CLI and metro CLI will read the same config.
	✅ Dynamic/extended config will continue to be applied by RN CLI on top of these.
	✅ User-defined config object is cleaned up.

Plan

1. ➡️ This PR: Create a new package within facebook/react-native, @react-native/metro-config, to contain the default Metro config for React Native projects going forward.
2. Update React Native app template to define an updated metro.config.js extending the new config package.
3. (Depends on the above two changes) breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Note: Changes in this repo (1, 2) will be compatible with the current version of RN CLI on main — the only breaking change is that the new CLI will not be able to support RN projects without these changes.

Changes

• This PR adds the new @react-native/metro-config package which reproduces all static values previously defined in RN CLI.
  • The values not included, which remain in RN CLI, are dynamic values derived from CLI options passed by the user.

Test Plan (all PRs + incoming changes)

E2E expectation: The new config is non-breaking against old CLI, the new CLI is breaking against old config.

Pre-steps

With the relevant repos cloned:

.
└── Development/forks
├── react-native # huntie/react-native@export-D44099692
└── react-native-cli # huntie/react-native-cli@c53e49b

1. cd Development/forks/react-native/packages/rn-tester/
2. Copy over metro.config.js and package.json changes from react-native/template/ (next commit in stack).
3. Run yarn.

[Base case] React Native @ main (this stack, before new CLI is merged — non-breaking)
(template = new, CLI = old)

yarn start

✅ Works (new complete Metro config is read into RN CLI, and overridden by its previous defaults — for this reason we can't delete ./rn-get-polyfills.js yet!)

yarn metro get-dependencies --entry-file js/RNTesterApp.android.js --platform android

✅ Works (new complete Metro config is available to Metro CLI)

[Release state] React Native 0.72 (new CLI, new config required)
(template = new, CLI = new)

1. Use (cd ../..; yarn link @react-native-community/cli-plugin-metro) to substitute version of @react-native-community/cli-plugin-metro using cloned react-native-cli directory.
2. Run yarn.
3. Update watchFolders (see Metro Local Development Setup).

yarn start

✅ Works (new complete Metro config is read into RN CLI, and merged with sparser defaults in react-native-community/cli#1875)
- (Note console logs)
- Note: At the point this test was run, found a small unrelated bug (post monorepo land) where rn-tester would look for a metro.config.js at the repo root and not inside packages/rn-tester/ — hence an extra /metro.config.js file was added in the above screenshot. This will be re-tested in the commit when we bump RN CLI.

Changelog:
[General][Added] Add react-native/metro-config package

Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,519,193	+0
android	hermes	armeabi-v7a	7,834,776	+0
android	hermes	x86	8,999,081	+0
android	hermes	x86_64	8,854,121	+0
android	jsc	arm64-v8a	9,141,838	+0
android	jsc	armeabi-v7a	8,333,472	+0
android	jsc	x86	9,196,418	+0
android	jsc	x86_64	9,454,245	+0

Base commit: 0eff8d6
Branch: main

[huntie]

This is the only base config divergence: ['android', 'ios'] here matches the default RN repo setup. As before, this will be overridden by RN CLI based on the platforms CLI argument.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[huntie]

Changes to metro.config.js files within the template and rn-tester are prepared and will be shipped shortly after this PR (as we need to publish the new package first).

[cortinico]

LGTM on the React Native side of things

[facebook-github-bot]

This pull request has been merged in 745cdb1.

[huntie]

Summary:

Context

React Native Metro config → React Native repo

We (the React Native team) are aiming to relocate the default Metro config for React Native out of react-native-community/cli-plugin-metro and into the React Native repo + app template as a new react-native/metro-config package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

Motivation

Today, the Metro config required to use React Native is entangled within react-native-community/cli-plugin-metro and is not readable from within a project. We instead want to relocate the default Metro config into the React Native repo and have users explicitly inherit this config in their projects.

Before	After
	Note: CLI change will be breaking, to explicitly target React Native 0.72 and onwards

Benefits

• Allows projects to clearly understand, extend, and override options within their metro.config.js file as the source of truth.
• Logically, locates the config for using Metro with React Native within the React Native repo — where we can set baseline defaults that are inherited by other tooling (e.g. both RN CLI and Expo).
• The previous setup meant that the resolved Metro configuration was hidden, preventing standalone Metro CLI commands from being runnable.
  • e.g. metro get-dependencies, which currently fails in a default React Native or Expo project.
• Removes existing noise from the template config.
• Moves us closer to shipping Metro updates and bugfixes independent of the CLI.

User-side change: Default metro.config.js file in a new React Native project

We will also signal the need to update existing metro.config.js files in the release blog post.

Before	After
⚠️ Config contains user overrides only, will be overridden by defaults set by React Native CLI.	✅ Complete Metro config is defined by extending react-native/metro-config.
⚠️ Config contains stale defaults that were split across the template and RN CLI.	✅ Both RN CLI and metro CLI will read the same config.
	✅ Dynamic/extended config will continue to be applied by RN CLI on top of these.
	✅ User-defined config object is cleaned up.

Plan

1. ➡️ This PR: Create a new package within facebook/react-native, @react-native/metro-config, to contain the default Metro config for React Native projects going forward.
2. Update React Native app template to define an updated metro.config.js extending the new config package.
3. (Depends on the above two changes) breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72) react-native-community/cli#1875

Note: Changes in this repo (1, 2) will be compatible with the current version of RN CLI on main — the only breaking change is that the new CLI will not be able to support RN projects without these changes.

Changes

• This PR adds the new @react-native/metro-config package which reproduces all static values previously defined in RN CLI.
  • The values not included, which remain in RN CLI, are dynamic values derived from CLI options passed by the user.

Test Plan (all PRs + incoming changes)

E2E expectation: The new config is non-breaking against old CLI, the new CLI is breaking against old config.

Pre-steps

With the relevant repos cloned:

.
└── Development/forks
├── react-native # huntie/react-native@export-D44099692
└── react-native-cli # huntie/react-native-cli@c53e49b

1. cd Development/forks/react-native/packages/rn-tester/
2. Copy over metro.config.js and package.json changes from react-native/template/ (next commit in stack).
3. Run yarn.

[Base case] React Native @ main (this stack, before new CLI is merged — non-breaking)
(template = new, CLI = old)

yarn start

✅ Works (new complete Metro config is read into RN CLI, and overridden by its previous defaults — for this reason we can't delete ./rn-get-polyfills.js yet!)

yarn metro get-dependencies --entry-file js/RNTesterApp.android.js --platform android

✅ Works (new complete Metro config is available to Metro CLI)

[Release state] React Native 0.72 (new CLI, new config required)
(template = new, CLI = new)

1. Use (cd ../..; yarn link @react-native-community/cli-plugin-metro) to substitute version of @react-native-community/cli-plugin-metro using cloned react-native-cli directory.
2. Run yarn.
3. Update watchFolders (see Metro Local Development Setup).

yarn start

✅ Works (new complete Metro config is read into RN CLI, and merged with sparser defaults in react-native-community/cli#1875)
- (Note console logs)
- Note: At the point this test was run, found a small unrelated bug (post monorepo land) where rn-tester would look for a metro.config.js at the repo root and not inside packages/rn-tester/ — hence an extra /metro.config.js file was added in the above screenshot. This will be re-tested in the commit when we bump RN CLI.

Changelog:
[General][Added] Add react-native/metro-config package

Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,519,193	+0
android	hermes	armeabi-v7a	7,834,776	+0
android	hermes	x86	8,999,081	+0
android	hermes	x86_64	8,854,121	+0
android	jsc	arm64-v8a	9,141,838	+0
android	jsc	armeabi-v7a	8,333,472	+0
android	jsc	x86	9,196,418	+0
android	jsc	x86_64	9,454,245	+0

Base commit: 0eff8d6
Branch: main

[huntie]

This is the only base config divergence: ['android', 'ios'] here matches the default RN repo setup. As before, this will be overridden by RN CLI based on the platforms CLI argument.

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[facebook-github-bot]

This pull request was exported from Phabricator. Differential Revision: D44099692

[huntie]

Changes to metro.config.js files within the template and rn-tester are prepared and will be shipped shortly after this PR (as we need to publish the new package first).

[cortinico]

LGTM on the React Native side of things

[facebook-github-bot]

This pull request has been merged in 745cdb1.