@react-native/new-app-screen 0.80.0-nightly-20250429-e486fda10

package/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).

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-native/new-app-screen",
+  "version": "0.80.0-nightly-20250429-e486fda10",
+  "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",
+  "main": "./src/index.js",
+  "exports": "./src/index.js",
+  "files": [
+    "src"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "*",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/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;

package/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',
+  },
+});

package/src/Theme.js

@@ -0,0 +1,76 @@
+/**
+ * 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 type {TextProps} from 'react-native';
+
+import * as React from 'react';
+import {Text, useColorScheme} from 'react-native';
+
+const COLORS = {
+  light: {
+    background: '#f3f3f3',
+    backgroundHighlight: '#cfe6ee',
+    cardBackground: '#fff',
+    cardOutline: '#dae1e7',
+    textPrimary: '#000',
+    textSecondary: '#404756',
+  },
+  dark: {
+    background: '#000',
+    backgroundHighlight: '#193c47',
+    cardBackground: '#222',
+    cardOutline: '#444',
+    textPrimary: '#fff',
+    textSecondary: '#c0c1c4',
+  },
+};
+
+type Theme = {
+  colors: {
+    background: string,
+    backgroundHighlight: string,
+    cardBackground: string,
+    cardOutline: string,
+    textPrimary: string,
+    textSecondary: string,
+  },
+};
+
+export function useTheme(): Theme {
+  const colorScheme = useColorScheme();
+
+  return {
+    colors: COLORS[colorScheme === 'dark' ? 'dark' : 'light'],
+  };
+}
+
+export function ThemedText({
+  color,
+  style,
+  ...props
+}: {
+  ...TextProps,
+  color?: 'primary' | 'secondary',
+}): React.Node {
+  const {colors} = useTheme();
+
+  return (
+    <Text
+      style={[
+        {
+          color:
+            color === 'secondary' ? colors.textSecondary : colors.textPrimary,
+        },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}

package/src/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+
+export type NewAppScreenProps = Readonly<{
+  templateFileName?: string | undefined;
+}>;
+
+export function NewAppScreen(props: NewAppScreenProps): React.ReactNode;

package/src/index.js

@@ -0,0 +1,13 @@
+/**
+ * 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 NewAppScreen from './NewAppScreen';
+
+export {NewAppScreen};