RFC0894: Removing deep imports from `react-native` #894

huntie · 2025-04-04T15:53:12Z

Proposes deprecating and removing subpath imports (or "deep imports") from the react-native npm package to simplify the API, reduce its surface area, and enhance maintainability.

By defining a clear, root-level JavaScript API contract, we aim to minimise future React Native breaking changes and improve long-term predictability for the ecosystem.

View the rendered RFC

shirakaba · 2025-04-09T02:41:33Z

Please expose parseErrorStack, as there's really no alternative to it:

import parseErrorStack from "react-native/Libraries/Core/Devtools/parseErrorStack";

It's necessary for doing things like printing out error.cause the same way Node.js does.

I notice it's not currently in the provisional public API.

cortinico · 2025-04-10T14:56:22Z

proposals/0894-deprecate-subpath-imports.md

+
+- **Deprecate in 0.80**, with an API consultation period of at least two major releases.
+- **Offer tools**: Provide migration aids, including dev-mode warnings, an ESLint rule, and via related TypeScript changes.
+- **Fully remove when confident**.


Is this 0.82 right?

Yup, 0.82 or later.

) Summary: After TS types generation is completed, react native deep imports will be deprecated. This rule produces warnings to let users know to use root imports instead. For more information about why this rule was added, please check [RFC](react-native-community/discussions-and-proposals#894). Changelog: [General][Added] - Added no-deep-imports rule to eslint-plugin-react-native. Reviewed By: robhogan Differential Revision: D71398004

) Summary: Pull Request resolved: facebook#50542 After TS types generation is completed, react native deep imports will be deprecated. This rule produces warnings to let users know to use root imports instead. For more information about why this rule was added, please check [RFC](react-native-community/discussions-and-proposals#894). Changelog: [General][Added] - Added no-deep-imports rule to eslint-plugin-react-native. Reviewed By: robhogan Differential Revision: D71398004

Summary: Pull Request resolved: #50542 After TS types generation is completed, react native deep imports will be deprecated. This rule produces warnings to let users know to use root imports instead. For more information about why this rule was added, please check [RFC](react-native-community/discussions-and-proposals#894). Changelog: [General][Added] - Added no-deep-imports rule to eslint-plugin-react-native. Reviewed By: robhogan Differential Revision: D71398004 fbshipit-source-id: 69104f69b1b1c59b5b0f115dcdd708a46d8d614d

…ve imports Summary: The plugin analyses the source of all `import`, `require`, and `export` statements and injects the `console.warn` statement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in the `if (__DEV__) ` block. It is possible to disable this plugin by setting `disableDeepImportWarnings: true` and **resetting** the Metro cache: ```js module.exports = { presets: [['module:react-native/babel-preset', { "disableDeepImportWarnings": true }]], }; ``` Changelog: [General][Internal] - Added plugin to react-native/babel-preset injecting `console.warn` for each react native deep import in dev mode. For a given code: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; ``` The transformed output should look like: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug')."); ``` For more information about why this plugin was needed, please check [RFC](react-native-community/discussions-and-proposals#894). Reviewed By: huntie Differential Revision: D70783145

) Summary: Pull Request resolved: facebook#50542 After TS types generation is completed, react native deep imports will be deprecated. This rule produces warnings to let users know to use root imports instead. For more information about why this rule was added, please check [RFC](react-native-community/discussions-and-proposals#894). Changelog: [General][Added] - Added no-deep-imports rule to eslint-plugin-react-native. Reviewed By: robhogan Differential Revision: D71398004 fbshipit-source-id: 69104f69b1b1c59b5b0f115dcdd708a46d8d614d

…njection under deep react native imports (facebook#50802) Summary: The plugin analyses the source of all `import`, `require`, and `export` statements and injects the `console.warn` statement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in the `if (__DEV__) ` block. It is possible to disable this plugin by setting `disableDeepImportWarnings: true` and **resetting** the Metro cache: ```js module.exports = { presets: [['module:react-native/babel-preset', { "disableDeepImportWarnings": true }]], }; ``` Changelog: [General][Internal] - Added plugin to react-native/babel-preset injecting `console.warn` for each react native deep import in dev mode. For a given code: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; ``` The transformed output should look like: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug')."); ``` For more information about why this plugin was needed, please check [RFC](react-native-community/discussions-and-proposals#894). Reviewed By: huntie Differential Revision: D70783145

…njection under deep react native imports (facebook#50802) Summary: Pull Request resolved: facebook#50802 The plugin analyses the source of all `import`, `require`, and `export` statements and injects the `console.warn` statement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in the `if (__DEV__) ` block. It is possible to disable this plugin by setting `disableDeepImportWarnings: true` and **resetting** the Metro cache: ```js module.exports = { presets: [['module:react-native/babel-preset', { "disableDeepImportWarnings": true }]], }; ``` Changelog: [General][Internal] - Added plugin to react-native/babel-preset injecting `console.warn` for each react native deep import in dev mode. For a given code: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; ``` The transformed output should look like: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug')."); ``` For more information about why this plugin was needed, please check [RFC](react-native-community/discussions-and-proposals#894). Reviewed By: huntie Differential Revision: D70783145

…njection under deep react native imports (facebook#50802) Summary: The plugin analyses the source of all `import`, `require`, and `export` statements and injects the `console.warn` statement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in the `if (__DEV__) ` block. It is possible to disable this plugin by setting `disableDeepImportWarnings: true` and **resetting** the Metro cache: ```js module.exports = { presets: [['module:react-native/babel-preset', { "disableDeepImportWarnings": true }]], }; ``` Changelog: [General][Internal] - Added plugin to react-native/babel-preset injecting `console.warn` for each react native deep import in dev mode. For a given code: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; ``` The transformed output should look like: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug')."); ``` For more information about why this plugin was needed, please check [RFC](react-native-community/discussions-and-proposals#894). Reviewed By: huntie Differential Revision: D70783145

…njection under deep react native imports (facebook#50802) Summary: Pull Request resolved: facebook#50802 The plugin analyses the source of all `import`, `require`, and `export` statements and injects the `console.warn` statement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in the `if (__DEV__) ` block. It is possible to disable this plugin by setting `disableDeepImportWarnings: true` and **resetting** the Metro cache: ```js module.exports = { presets: [['module:react-native/babel-preset', { "disableDeepImportWarnings": true }]], }; ``` Changelog: [General][Internal] - Added plugin to react-native/babel-preset injecting `console.warn` for each react native deep import in dev mode. For a given code: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; ``` The transformed output should look like: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug')."); ``` For more information about why this plugin was needed, please check [RFC](react-native-community/discussions-and-proposals#894). Reviewed By: huntie Differential Revision: D70783145

…njection under deep react native imports (#50802) Summary: Pull Request resolved: #50802 The plugin analyses the source of all `import`, `require`, and `export` statements and injects the `console.warn` statement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in the `if (__DEV__) ` block. It is possible to disable this plugin by setting `disableDeepImportWarnings: true` and **resetting** the Metro cache: ```js module.exports = { presets: [['module:react-native/babel-preset', { "disableDeepImportWarnings": true }]], }; ``` Changelog: [General][Internal] - Added plugin to react-native/babel-preset injecting `console.warn` for each react native deep import in dev mode. For a given code: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; ``` The transformed output should look like: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug')."); ``` For more information about why this plugin was needed, please check [RFC](react-native-community/discussions-and-proposals#894). Reviewed By: huntie Differential Revision: D70783145 fbshipit-source-id: ae145db6471d861099566a8faf2fbd93bd136450

migueldaipre · 2025-04-24T18:33:26Z

Hey folks, please expose TextNativeComponent.

import { NativeText } from 'react-native/Libraries/Text/TextNativeComponent';

Many apps and component libraries use this under the hood because it is more performant.

Summary: Redesigns React Native's `NewAppScreen` component, and moves it into a new `react-native/new-app-screen` package with a single component export. {F1977434404} **Motivation** - **Reduces our public API** (see react-native-community/discussions-and-proposals#894) - Separates this screen from the main `react-native` package, where it was a number of subpath exports. - Reduces the size of the main `react-native` package, including image assets — which are redundant for consumers like Expo. - **Updated visual treatment** - Replace outdated logo, update to a responsive tablet/windowed layout. - Removes outdated guidance (e.g. "use cmd+R to reload"), and generally simplifies the layout (with the aim of reducing future maintenance). - **Simplifies template boilerplate** - `NewAppScreen` is now a fully encapsulated screen layout, avoiding the cruft of the previous modular design. **Integration plan** When we cut the `0.80-stable` branch, we'll update [the template](https://github.com/react-native-community/template/blob/main/template/App.tsx) to import and use `<NewAppScreen />`. - This will cause an extra runtime dependency in the template `package.json`, which will require user cleanup. We are happy with this tradeoff, given the self-evident package name, reduction of template boilerplate, and size reduction on the main `react-native` package. Changelog: [General][Added] - Create new `react-native/new-app-screen` package Differential Revision: D73657878

huntie · 2025-04-25T14:09:21Z

@migueldaipre I've added this API to our internal tracking (will also aim to share this publicly). 0.80 will be the start of our deprecation period, in which there's plenty of time to decide how we'll handle individual APIs 👍🏻

Summary: Pull Request resolved: facebook#50939 Redesigns React Native's `NewAppScreen` component, and moves it into a new `react-native/new-app-screen` package with a single component export. Deletes the old New App Screen under `'react-native/Libraries/NewAppScreen/'`. {F1977434404} **Motivation** - **Reduces our public API** (see react-native-community/discussions-and-proposals#894) - Separates this screen from the main `react-native` package, where it was a number of subpath exports. - Reduces the size of the main `react-native` package, including image assets — which are redundant for consumers like Expo. - **Updated visual treatment** - Replace outdated logo, update to a responsive tablet/windowed layout. - Removes outdated guidance (e.g. "use cmd+R to reload"), and generally simplifies the layout (with the aim of reducing future maintenance). - **Simplifies template boilerplate** - `NewAppScreen` is now a fully encapsulated screen layout, avoiding the cruft of the previous modular design. **Integration plan** When we cut the `0.80-stable` branch, we'll update [the template](https://github.com/react-native-community/template/blob/main/template/App.tsx) to import and use `<NewAppScreen />`. - This will cause an extra runtime dependency in the template `package.json`, which will require user cleanup. We are happy with this tradeoff, given the self-evident package name, reduction of template boilerplate, and size reduction on the main `react-native` package. Changelog: [General][Breaking] - The `NewAppScreen` component is redesigned and moved to the `react-native/new-app-screen` package Differential Revision: D73657878

satya164 · 2025-04-25T16:08:25Z

proposals/0894-deprecate-subpath-imports.md

+//          import {Alert} from 'react-native';
+```
+
+**Under the hood**: As we are unsure about the % usage of [@react-native/eslint-config](https://www.npmjs.com/package/@react-native/eslint-config), we believe integrating via Metro is important for consistent visibility.


imo there should be a separate eslint-plugin. the config includes way more things and mostly a collection of configs which people may or may not want, since a lot of them will be according to preference.

with a eslint plugin everyone can include it in their config regardless of if they want to use the official config or not, and get the benefit of autofix (and any future react native specific features).

Summary: Pull Request resolved: facebook#50939 Redesigns React Native's `NewAppScreen` component, and moves it into a new `react-native/new-app-screen` package with a single component export. Deletes the old New App Screen under `'react-native/Libraries/NewAppScreen/'`. {F1977434404} **Motivation** - **Reduces our public API** (see react-native-community/discussions-and-proposals#894) - Separates this screen from the main `react-native` package, where it was a number of subpath exports. - Reduces the size of the main `react-native` package, including image assets — which are redundant for consumers like Expo. - **Updated visual treatment** - Replace outdated logo, update to a responsive tablet/windowed layout. - Removes outdated guidance (e.g. "use cmd+R to reload"), and generally simplifies the layout (with the aim of reducing future maintenance). - **Simplifies template boilerplate** - `NewAppScreen` is now a fully encapsulated screen layout, avoiding the cruft of the previous modular design. **Integration plan** When we cut the `0.80-stable` branch, we'll update [the template](https://github.com/react-native-community/template/blob/main/template/App.tsx) to import and use `<NewAppScreen />`. - This will cause an extra runtime dependency in the template `package.json`, which will require user cleanup. We are happy with this tradeoff, given the self-evident package name, reduction of template boilerplate, and size reduction on the main `react-native` package. Changelog: [General][Breaking] - The `NewAppScreen` component is redesigned and moved to the `react-native/new-app-screen` package Reviewed By: cipolleschi Differential Revision: D73657878

Summary: Pull Request resolved: #50939 Redesigns React Native's `NewAppScreen` component, and moves it into a new `react-native/new-app-screen` package with a single component export. Deletes the old New App Screen under `'react-native/Libraries/NewAppScreen/'`. {F1977434404} **Motivation** - **Reduces our public API** (see react-native-community/discussions-and-proposals#894) - Separates this screen from the main `react-native` package, where it was a number of subpath exports. - Reduces the size of the main `react-native` package, including image assets — which are redundant for consumers like Expo. - **Updated visual treatment** - Replace outdated logo, update to a responsive tablet/windowed layout. - Removes outdated guidance (e.g. "use cmd+R to reload"), and generally simplifies the layout (with the aim of reducing future maintenance). - **Simplifies template boilerplate** - `NewAppScreen` is now a fully encapsulated screen layout, avoiding the cruft of the previous modular design. **Integration plan** When we cut the `0.80-stable` branch, we'll update [the template](https://github.com/react-native-community/template/blob/main/template/App.tsx) to import and use `<NewAppScreen />`. - This will cause an extra runtime dependency in the template `package.json`, which will require user cleanup. We are happy with this tradeoff, given the self-evident package name, reduction of template boilerplate, and size reduction on the main `react-native` package. Changelog: [General][Breaking] - The `NewAppScreen` component is redesigned and moved to the `react-native/new-app-screen` package Reviewed By: cipolleschi Differential Revision: D73657878 fbshipit-source-id: 9ca07afa9fbdd6f32015eafa2f27d52ed182918e

huntie requested review from rubennorte and cortinico April 4, 2025 15:53

huntie changed the title ~~RFC0893: Removing deep imports from react-native~~ RFC0894: Removing deep imports from react-native Apr 4, 2025

RFC0894: Removing deep imports from react-native

49ce56d

huntie force-pushed the proposal-deprecate-subpath-imports branch from dc1ae5f to 49ce56d Compare April 4, 2025 16:06

Add detail on the Strict TypeScript API

eb368f9

huntie force-pushed the proposal-deprecate-subpath-imports branch from a6ba7a8 to eb368f9 Compare April 6, 2025 17:02

cortinico reviewed Apr 10, 2025

View reviewed changes

coado mentioned this pull request Apr 18, 2025

Add babel plugin to @react-native/babel-preset for console.warn injection under deep react native imports facebook/react-native#50802

Closed

cipolleschi approved these changes Apr 24, 2025

View reviewed changes

huntie mentioned this pull request Apr 25, 2025

Redesign New App Screen and move to package facebook/react-native#50939

Closed

huntie merged commit 094e7c9 into react-native-community:main Apr 25, 2025

huntie deleted the proposal-deprecate-subpath-imports branch April 25, 2025 14:09

satya164 reviewed Apr 25, 2025

View reviewed changes

vonovak mentioned this pull request May 26, 2025

refactor: stricter Expo compatibility checks oblador/react-native-vector-icons#1750

Merged

huntie mentioned this pull request Jun 2, 2025

fix(types): Devtools.d.ts facebook/react-native#51737

Closed

krystofwoldrich mentioned this pull request Jun 2, 2025

Prepare for removal of parseErrorStack and symbolicateStackTrace from RN Public APIs getsentry/sentry-react-native#4877

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

RFC0894: Removing deep imports from `react-native` #894

RFC0894: Removing deep imports from `react-native` #894

Uh oh!

huntie commented Apr 4, 2025 •

edited

Loading

Uh oh!

shirakaba commented Apr 9, 2025 •

edited

Loading

Uh oh!

cortinico Apr 10, 2025

Uh oh!

huntie Apr 14, 2025 •

edited

Loading

Uh oh!

migueldaipre commented Apr 24, 2025 •

edited

Loading

Uh oh!

huntie commented Apr 25, 2025

Uh oh!

satya164 Apr 25, 2025

Uh oh!

Uh oh!

RFC0894: Removing deep imports from react-native #894

RFC0894: Removing deep imports from react-native #894

Uh oh!

Conversation

huntie commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

View the rendered RFC

Uh oh!

shirakaba commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cortinico Apr 10, 2025

Choose a reason for hiding this comment

Uh oh!

huntie Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

migueldaipre commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

huntie commented Apr 25, 2025

Uh oh!

satya164 Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

RFC0894: Removing deep imports from `react-native` #894

RFC0894: Removing deep imports from `react-native` #894

huntie commented Apr 4, 2025 •

edited

Loading

shirakaba commented Apr 9, 2025 •

edited

Loading

huntie Apr 14, 2025 •

edited

Loading

migueldaipre commented Apr 24, 2025 •

edited

Loading