Replace new app template with new app screen (#24805)

Summary:
This replaces the "new app screen" in the template with the new design from https://github.com/react-native-community/discussions-and-proposals/issues/122

This uses components that are shipped as part of the `react-native` module, but not necessarily as proper components exported by the main `react-native` module. To use these, we use absolute imports to those components.

Related to #24760

[General] [Changed] - Updated new app template design 💖
Pull Request resolved: https://github.com/facebook/react-native/pull/24805

Differential Revision: D15334459

Pulled By: cpojer

fbshipit-source-id: d0b67d08f936eeabd9e93d4e0ff78302b4d6429f

Libraries/NewAppScreen/components/DebugInstructions.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import React from 'react';
+import {Platform, StyleSheet, Text} from 'react-native';
+
+const styles = StyleSheet.create({
+  highlight: {
+    fontWeight: '700',
+  },
+});
+
+const DebugInstructions = Platform.select({
+  ios: () => (
+    <Text>
+      Press <Text style={styles.highlight}>Cmd+D</Text> in the simulator or{' '}
+      <Text style={styles.highlight}>Shake</Text> your device to open the React
+      Native debug menu.
+    </Text>
+  ),
+  default: () => (
+    <Text>
+      Press <Text style={styles.highlight}>menu button</Text> or
+      <Text style={styles.highlight}>Shake</Text> your device to open the React
+      Native debug menu.
+    </Text>
+  ),
+});
+
+export default DebugInstructions;

Libraries/NewAppScreen/components/ReloadInstructions.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import React from 'react';
+import {Platform, StyleSheet, Text} from 'react-native';
+
+const styles = StyleSheet.create({
+  highlight: {
+    fontWeight: '700',
+  },
+});
+
+const ReloadInstructions = Platform.select({
+  ios: () => (
+    <Text>
+      Press <Text style={styles.highlight}>Cmd+R</Text> in the simulator to
+      reload your app's code
+    </Text>
+  ),
+  default: () => (
+    <Text>
+      Double tap <Text style={styles.highlight}>R</Text> on your keyboard to
+      reload your app's code
+    </Text>
+  ),
+});
+
+export default ReloadInstructions;

Libraries/NewAppScreen/index.js

@@ -10,119 +10,10 @@
 
 'use strict';
 
-import React, {Fragment} from 'react';
-import {
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  Platform,
-  StatusBar,
-} from 'react-native';
-
 import Header from './components/Header';
 import LearnMoreLinks from './components/LearnMoreLinks';
 import Colors from './components/Colors';
+import DebugInstructions from './components/DebugInstructions';
+import ReloadInstructions from './components/ReloadInstructions';
 
-const Section = ({children}) => (
-  <View style={styles.sectionContainer}>{children}</View>
-);
-
-const ReloadInstructions = () => {
-  return Platform.OS === 'ios' ? (
-    <Text style={styles.sectionDescription}>
-      Press <Text style={styles.highlight}>Cmd+R</Text> in the simulator to
-      reload your app's code
-    </Text>
-  ) : (
-    <Text style={styles.sectionDescription}>
-      Double tap <Text style={styles.highlight}>R</Text> on your keyboard to
-      reload your app's code
-    </Text>
-  );
-};
-
-const DebugInstructions = () => {
-  return Platform.OS === 'ios' ? (
-    <Text style={styles.sectionDescription}>
-      Press <Text style={styles.highlight}>Cmd+D</Text> in the simulator or{' '}
-      <Text style={styles.highlight}>Shake</Text> your device to open the React
-      Native debug menu.
-    </Text>
-  ) : (
-    <Text style={styles.sectionDescription}>
-      Press <Text style={styles.highlight}>menu button</Text> or
-      <Text style={styles.highlight}>Shake</Text> your device to open the React
-      Native debug menu.
-    </Text>
-  );
-};
-
-const App = () => {
-  return (
-    <Fragment>
-      <StatusBar barStyle="dark-content" />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={styles.scrollView}>
-        <Header />
-        <View style={styles.body}>
-          <Section>
-            <Text style={styles.sectionTitle}>Step One</Text>
-            <Text style={styles.sectionDescription}>
-              Edit <Text style={styles.highlight}>App.js</Text> to change this
-              screen and then come back to see your edits.
-            </Text>
-          </Section>
-
-          <Section>
-            <Text style={styles.sectionTitle}>See Your Changes</Text>
-            <ReloadInstructions />
-          </Section>
-
-          <Section>
-            <Text style={styles.sectionTitle}>Debug</Text>
-            <DebugInstructions />
-          </Section>
-
-          <Section>
-            <Text style={styles.sectionTitle}>Learn More</Text>
-            <Text style={styles.sectionDescription}>
-              Read the docs on what to do once seen how to work in React Native.
-            </Text>
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </Fragment>
-  );
-};
-
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
+export {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions};

RNTester/js/NewAppScreenExample.js

@@ -11,16 +11,66 @@
 'use strict';
 
 const React = require('react');
-const NewAppScreen = require('../../Libraries/NewAppScreen').default;
+const {View} = require('react-native');
+const {
+  Header,
+  LearnMoreLinks,
+  Colors,
+  DebugInstructions,
+  ReloadInstructions,
+} = require('../../Libraries/NewAppScreen');
 
 exports.title = 'New App Screen';
 exports.description = 'Displays the content of the new app screen';
 exports.examples = [
   {
-    title: 'New App Screen',
-    description: 'Displays the content of the new app screen',
+    title: 'New App Screen Header',
+    description: 'Displays a welcome to building a React Native app',
     render(): React.Element<any> {
-      return <NewAppScreen />;
+      return (
+        <View style={{overflow: 'hidden'}}>
+          <Header />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Learn More Links',
+    description:
+      'Learn more about the tools and techniques for building React Native apps.',
+    render(): React.Element<any> {
+      return <LearnMoreLinks />;
+    },
+  },
+  {
+    title: 'New App Screen Colors',
+    description: 'Consistent colors to use throughout the new app screen.',
+    render(): React.Element<any> {
+      return (
+        <View style={{flexDirection: 'row'}}>
+          {Object.keys(Colors).map(key => (
+            <View
+              style={{width: 50, height: 50, backgroundColor: Colors[key]}}
+            />
+          ))}
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Debug Instructions',
+    description:
+      'Platform-specific instructions on how to start debugging a React Native app.',
+    render(): React.Element<any> {
+      return <DebugInstructions />;
+    },
+  },
+  {
+    title: 'Reload Instructions',
+    description:
+      'Platform-specific instructions on how to reload a React Native app.',
+    render(): React.Element<any> {
+      return <ReloadInstructions />;
     },
   },
 ];

template/App.js

@@ -6,44 +6,83 @@
  * @flow
  */
 
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import React, {Fragment} from 'react';
+import {StyleSheet, ScrollView, View, Text, StatusBar} from 'react-native';
 
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
+import {
+  Header,
+  LearnMoreLinks,
+  Colors,
+  DebugInstructions,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
 
-type Props = {};
-export default class App extends Component<Props> {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-      </View>
-    );
-  }
-}
+const App = () => {
+  return (
+    <Fragment>
+      <StatusBar barStyle="dark-content" />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={styles.scrollView}>
+        <Header />
+        <View style={styles.body}>
+          <View style={styles.sectionContainer}>
+            <Text style={styles.sectionTitle}>Step One</Text>
+            <Text style={styles.sectionDescription}>
+              Edit <Text style={styles.highlight}>App.js</Text> to change this
+              screen and then come back to see your edits.
+            </Text>
+          </View>
+          <View style={styles.sectionContainer}>
+            <Text style={styles.sectionTitle}>See Your Changes</Text>
+            <Text style={styles.sectionDescription}>
+              <ReloadInstructions />
+            </Text>
+          </View>
+          <View style={styles.sectionContainer}>
+            <Text style={styles.sectionTitle}>Debug</Text>
+            <Text style={styles.sectionDescription}>
+              <DebugInstructions />
+            </Text>
+          </View>
+          <View style={styles.sectionContainer}>
+            <Text style={styles.sectionTitle}>Learn More</Text>
+            <Text style={styles.sectionDescription}>
+              Read the docs on what to do once seen how to work in React Native.
+            </Text>
+          </View>
+          <LearnMoreLinks />
+        </View>
+      </ScrollView>
+    </Fragment>
+  );
+};
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+  scrollView: {
+    backgroundColor: Colors.lighter,
   },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+  body: {
+    backgroundColor: Colors.white,
   },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: Colors.black,
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+    color: Colors.dark,
+  },
+  highlight: {
+    fontWeight: '700',
   },
 });
+
+export default App;