Redesign New App Screen and move to package (#50939)

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

Differential Revision: D73657878

Author: huntie

packages/helloworld/App.jsx

@@ -4,10 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @flow strict-local
  * @format
  */
 
-import React from 'react';
+import * as React from 'react';
 import {
   SafeAreaView,
   ScrollView,
@@ -17,29 +18,15 @@ import {
   View,
   useColorScheme,
 } from 'react-native';
-import {Colors, Header} from 'react-native/Libraries/NewAppScreen';
 
-function App(): React.JSX.Element {
+function App(): React.Node {
   const isDarkMode = useColorScheme() === 'dark';
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
+    <SafeAreaView>
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        <View>
           <Text style={styles.title}>Hello, World!</Text>
         </View>
       </ScrollView>

packages/new-app-screen/README.md

@@ -0,0 +1,21 @@
+# @react-native/new-app-screen
+
+![npm package](https://img.shields.io/npm/v/@react-native/new-app-screen?color=brightgreen&label=npm%20package)
+
+`NewAppScreen` component for React Native.
+
+## Usage
+
+```js
+import { NewAppScreen } from '@react-native/new-app-screen';
+
+function MyAppOrTemplate() {
+  ...
+
+  return <NewAppScreen />;
+}
+```
+
+## Contributing
+
+Changes to this package can be made locally and tested against the `rn-tester` app, per the [Contributing guide](https://reactnative.dev/contributing/overview#contributing-code).

packages/new-app-screen/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-native/new-app-screen",
+  "version": "0.80.0-main",
+  "description": "NewAppScreen component for React Native",
+  "keywords": [
+    "react-native"
+  ],
+  "homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/new-app-screen#readme",
+  "bugs": "https://github.com/facebook/react-native/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/react-native.git",
+    "directory": "packages/new-app-screen"
+  },
+  "license": "MIT",
+  "exports": "./src/index.js",
+  "files": [
+    "src"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "*",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

packages/new-app-screen/src/Links.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+const Links: Array<{
+  title: string,
+  description: string,
+  url: string,
+}> = [
+  {
+    title: 'Hello World',
+    description: 'Learn the basics',
+    url: 'https://reactnative.dev/docs/tutorial',
+  },
+  {
+    title: 'Fast Refresh',
+    description: 'See edits instantly',
+    url: 'https://reactnative.dev/docs/fast-refresh',
+  },
+  {
+    title: 'DevTools',
+    description: 'View logs & debug your app',
+    url: 'https://reactnative.dev/docs/debugging',
+  },
+  {
+    title: 'Components',
+    description: 'View components and APIs',
+    url: 'https://reactnative.dev/docs/components-and-apis',
+  },
+  {
+    title: 'Style',
+    description: 'Use the style prop',
+    url: 'https://reactnative.dev/docs/style',
+  },
+  {
+    title: 'Layout',
+    description: 'Flexbox & layout techniques',
+    url: 'https://reactnative.dev/docs/flexbox',
+  },
+  {
+    title: 'Navigation',
+    description: 'Move between screens',
+    url: 'https://reactnative.dev/docs/navigation',
+  },
+  {
+    title: 'Networking',
+    description: 'Use the Fetch API',
+    url: 'https://reactnative.dev/docs/navigation',
+  },
+  {
+    title: 'Showcase',
+    description: 'Featured React Native apps',
+    url: 'https://reactnative.dev/showcase',
+  },
+  {
+    title: 'Blog',
+    description: 'Latest news & updates',
+    url: 'https://reactnative.dev/blog',
+  },
+  {
+    title: 'Community',
+    description: 'Expore & get help',
+    url: 'https://reactnative.dev/community/overview',
+  },
+  {
+    title: 'Follow @reactnative',
+    description: 'Stay in touch on X',
+    url: 'https://x.com/reactnative',
+  },
+];
+
+export default Links;

packages/new-app-screen/src/NewAppScreen.js

@@ -0,0 +1,199 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import Links from './Links';
+import {ThemedText, useTheme} from './Theme';
+import * as React from 'react';
+import {
+  Image,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+  useColorScheme,
+  useWindowDimensions,
+} from 'react-native';
+import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';
+import {version as ReactNativeVersion} from 'react-native/Libraries/Core/ReactNativeVersion';
+
+export type NewAppScreenProps = $ReadOnly<{
+  templateFileName?: string,
+}>;
+
+export default function NewAppScreen({
+  templateFileName = 'App.tsx',
+}: NewAppScreenProps): React.Node {
+  const {colors} = useTheme();
+  const isDarkMode = useColorScheme() === 'dark';
+  const isLargeScreen = useWindowDimensions().width > 600;
+
+  return (
+    <SafeAreaView style={{backgroundColor: colors.background}}>
+      <ScrollView>
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <Image
+              style={styles.logo}
+              source={
+                isDarkMode
+                  ? require('./assets/react-dark.png')
+                  : require('./assets/react-light.png')
+              }
+            />
+            <ThemedText style={styles.title}>
+              Welcome to React Native
+            </ThemedText>
+            {getVersionLabel()}
+            {getHermesLabel()}
+            <ThemedText
+              style={[
+                styles.callout,
+                {backgroundColor: colors.backgroundHighlight},
+              ]}>
+              💡&ensp;Open{' '}
+              <Text style={styles.calloutEmphasis}>{templateFileName}</Text> to
+              get started
+            </ThemedText>
+          </View>
+          <View style={styles.linksContainer}>
+            <ThemedText style={styles.linksTitle}>Learn & Explore</ThemedText>
+            {Links.map(({title, description, url}, i) => (
+              <TouchableHighlight
+                key={i}
+                activeOpacity={0.6}
+                underlayColor={colors.background}
+                onPress={() => openURLInBrowser(url)}
+                style={[
+                  styles.link,
+                  // eslint-disable-next-line react-native/no-inline-styles
+                  {
+                    maxWidth: isLargeScreen ? 240 : 360,
+                    borderColor: colors.cardOutline,
+                    backgroundColor: colors.cardBackground,
+                  },
+                ]}>
+                <View>
+                  <ThemedText style={styles.linkText}>{title}</ThemedText>
+                  <ThemedText style={{color: colors.textSecondary}}>
+                    {description}
+                  </ThemedText>
+                </View>
+              </TouchableHighlight>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+function getVersionLabel(): React.Node {
+  const version =
+    [
+      ReactNativeVersion.major,
+      ReactNativeVersion.minor,
+      ReactNativeVersion.patch,
+    ].join('.') +
+    (ReactNativeVersion.prerelease != null
+      ? '-' + ReactNativeVersion.prerelease
+      : '');
+
+  return (
+    <ThemedText color="secondary" style={styles.label}>
+      Version: {version}
+    </ThemedText>
+  );
+}
+
+function getHermesLabel(): React.Node {
+  if (global.HermesInternal == null) {
+    return null;
+  }
+
+  return (
+    <ThemedText color="secondary" style={styles.label}>
+      JS Engine: Hermes
+    </ThemedText>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    alignItems: 'center',
+    paddingHorizontal: 24,
+  },
+  header: {
+    width: '100%',
+    alignItems: 'center',
+    marginTop: 64,
+    marginBottom: 48,
+  },
+  logo: {
+    height: 80,
+    aspectRatio: 1,
+    marginBottom: 24,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    marginBottom: 24,
+  },
+  label: {
+    fontSize: 14,
+    marginBottom: 8,
+  },
+  callout: {
+    width: '100%',
+    maxWidth: 320,
+    marginTop: 36,
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    paddingLeft: 16,
+    borderRadius: 12,
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  calloutEmphasis: {
+    fontWeight: 'bold',
+  },
+  linksContainer: {
+    flex: 1,
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    columnGap: 12,
+    rowGap: 12,
+    maxWidth: 800,
+    marginBottom: 48,
+  },
+  linksTitle: {
+    width: '100%',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  link: {
+    width: '100%',
+    paddingVertical: 20,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    boxShadow: '0 4px 8px rgba(0, 0, 0, .03)',
+  },
+  linkText: {
+    marginBottom: 4,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});