Redesign New App Screen and move to package #50939

huntie · 2025-04-25T13:57:00Z

Summary:
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/'.

Motivation

Reduces our public API (see RFC0894: Removing deep imports from react-native 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.

Redesign notes

As above, this is a refresh to our existing New App Screen — maintaining the same spirit/content, with some simplifications.

We may want to strip this down further, or make use of more per-platform native UI in future. For now, I haven't pushed towards this.

Integration plan

When we cut the 0.80-stable branch, we'll update the template 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

facebook-github-bot · 2025-04-25T13:57:25Z

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

thymikee · 2025-04-25T14:01:19Z

Lovely!

facebook-github-bot · 2025-04-25T14:39:13Z

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

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

facebook-github-bot · 2025-04-25T14:44:09Z

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

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

facebook-github-bot · 2025-04-25T14:55:37Z

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

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

facebook-github-bot · 2025-04-25T15:12:30Z

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

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

facebook-github-bot · 2025-04-25T17:01:07Z

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

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

facebook-github-bot · 2025-04-26T16:03:58Z

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

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

facebook-github-bot · 2025-04-26T16:43:17Z

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

facebook-github-bot · 2025-04-28T11:21:09Z

This pull request has been merged in 3cf0102.

react-native-bot · 2025-04-28T11:21:10Z

This pull request was successfully merged by @huntie in 3cf0102

^{When will my fix make it into a release? | How to file a pick request?}

Similar approach than: - 60515c0 - f8a83e0 Create a new project: $ rbenv global 3.4.4 $ gem install cocoapods $ npx @react-native-community/cli@latest init MemoryGame $ cd MemoryGame/ios $ bundle exec pod install $ cd .. Verify that the new project works: $ npx react-native run-ios $ npx react-native run-android Upgrade packages: $ npm i -D -E prettier@latest $ npm i -D -E typescript@latest Copy these files to the new project: - .prettierrc.js - .prettierignore Modify tsconfig.json to add noImplicitReturns. Install packages: $ npm i -E mobx mobx-react-lite $ npm i -E react-native-reanimated Follow the additional setup steps at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/ $ npm i -E react-native-linear-gradient $ cd ios && bundle exec pod install The new react-native-vector-icons library (version 12) doesn't have the same FontAwesome icons I use, so it doesn't display the icons. We need to follow the old instructions for library 10.2.0, available at https://www.npmjs.com/package/react-native-vector-icons $ npm i -E react-native-vector-icons $ npm i -D -E @types/react-native-vector-icons For Android, modify android/app/build.gradle. For iOS, run 'cd ios && bundle exec pod install'. Then open MemoryGame.xcworkspace with Xcode. At Xcode, open Info.plist and add "Fonts provided by application". At Item 0 add "FontAwesome.ttf". Doing this should add the following to Info.plist: ``` <key>UIAppFonts</key> <array> <string>FontAwesome.ttf</string> </array> ``` Run 'npx react-native run-ios' and 'npx react-native run-android' to recompile the project. After all this, copy the code in 'src' in the existing project to the new one. Also copy App.tsx. The new app screen was moved to a new package, from react-native/Libraries/NewAppScreen to @react-native/new-app-screen, see facebook/react-native#50939. It doesn't export Colors (it only exports a screen NewAppScreen), so I had to remove that code in App.tsx. I finally uninstalled the new library (https://www.npmjs.com/package/@react-native/new-app-screen), since we don't use it. Format the files with prettier if required (npx prettier --write .). Copy the everything in the new project to the old project, except: - .git folder - README.md - Android icons - Android build folders (better remove them before copying) Revert changes that shouldn't be done, for example: - Package name in android/app/build.gradle - App name in android/app/src/main/res/values/strings.xml - The Android icons - package.json: change name to lowercase (memorygame instead of MemoryGame) Delete files that are not needed anymore in the old project. For example, I've deleted yarn.lock, .yarn.yml and .yarn folder, since it now uses npm instead of yarn. Verify that the differences between the two projects make sense with `diff -qr old new`. Verify formatting with prettier (npx prettier --check .). Run the old project on Android and iOS ('npx react-native run-ios' and 'npx react-native run-android') and validate that the app works.

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner labels Apr 25, 2025

facebook-github-bot added the fb-exported label Apr 25, 2025

huntie force-pushed the export-D73657878 branch from 19e93ee to 8210d93 Compare April 25, 2025 14:39

huntie force-pushed the export-D73657878 branch from 8210d93 to b60d44d Compare April 25, 2025 14:44

huntie force-pushed the export-D73657878 branch from b60d44d to 4e66e91 Compare April 25, 2025 14:55

huntie force-pushed the export-D73657878 branch from 4e66e91 to e7d10e1 Compare April 25, 2025 15:12

huntie force-pushed the export-D73657878 branch from e7d10e1 to ea248c9 Compare April 25, 2025 17:01

huntie force-pushed the export-D73657878 branch from ea248c9 to 47c0818 Compare April 26, 2025 16:04

huntie force-pushed the export-D73657878 branch from 47c0818 to 4f5330d Compare April 26, 2025 16:43

facebook-github-bot closed this in 3cf0102 Apr 28, 2025

facebook-github-bot added the Merged This PR has been merged. label Apr 28, 2025

huntie deleted the export-D73657878 branch April 28, 2025 12:07

huntie mentioned this pull request Apr 29, 2025

Update to @react-native/new-app-screen react-native-community/template#123

Merged

This was referenced Jul 21, 2025

Integrate RN Nightly Build 0.80.0-nightly-20250506-3ac16dd6a microsoft/react-native-windows#14941

Merged

Integrate RN Nightly Build 0.80.0-nightly-20250506-3ac16dd6a microsoft/react-native-windows#14951

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign New App Screen and move to package #50939

Redesign New App Screen and move to package #50939

Uh oh!

huntie commented Apr 25, 2025 •

edited

Loading

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

thymikee commented Apr 25, 2025 •

edited

Loading

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 26, 2025

Uh oh!

facebook-github-bot commented Apr 26, 2025

Uh oh!

facebook-github-bot commented Apr 28, 2025

Uh oh!

react-native-bot commented Apr 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Redesign New App Screen and move to package #50939

Redesign New App Screen and move to package #50939

Uh oh!

Conversation

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

Uh oh!

Motivation

Redesign notes

Integration plan

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

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

Uh oh!

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 25, 2025

Uh oh!

facebook-github-bot commented Apr 26, 2025

Uh oh!

facebook-github-bot commented Apr 26, 2025

Uh oh!

facebook-github-bot commented Apr 28, 2025

Uh oh!

react-native-bot commented Apr 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

huntie commented Apr 25, 2025 •

edited

Loading

thymikee commented Apr 25, 2025 •

edited

Loading