Replace new app template with new app screen

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

@@ -11,53 +11,18 @@
 'use strict';
 
 import React, {Fragment} from 'react';
-import {
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  Platform,
-  StatusBar,
-} from 'react-native';
+import {StyleSheet, ScrollView, View, Text, 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>
@@ -77,12 +42,16 @@ const App = () => {
 
           <Section>
             <Text style={styles.sectionTitle}>See Your Changes</Text>
-            <ReloadInstructions />
+            <Text style={styles.sectionDescription}>
+              <ReloadInstructions />
+            </Text>
           </Section>
 
           <Section>
             <Text style={styles.sectionTitle}>Debug</Text>
-            <DebugInstructions />
+            <Text style={styles.sectionDescription}>
+              <DebugInstructions />
+            </Text>
           </Section>
 
           <Section>

template/App.js

@@ -6,44 +6,85 @@
  * @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 from 'react-native/Libraries/NewAppScreen/components/Header';
+import LearnMoreLinks from 'react-native/Libraries/NewAppScreen/components/LearnMoreLinks';
+import Colors from 'react-native/Libraries/NewAppScreen/components/Colors';
+import DebugInstructions from 'react-native/Libraries/NewAppScreen/components/DebugInstructions';
+import ReloadInstructions from 'react-native/Libraries/NewAppScreen/components/ReloadInstructions';
+
+const Section = ({children}) => (
+  <View style={styles.sectionContainer}>{children}</View>
+);
 
-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}>
+          <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>
+            <Text style={styles.sectionDescription}>
+              <ReloadInstructions />
+            </Text>
+          </Section>
+          <Section>
+            <Text style={styles.sectionTitle}>Debug</Text>
+            <Text style={styles.sectionDescription}>
+              <DebugInstructions />
+            </Text>
+          </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({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+  scrollView: {
+    backgroundColor: Colors.lighter,
+  },
+  body: {
+    backgroundColor: Colors.white,
   },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
   },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: Colors.black,
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+    color: Colors.dark,
+  },
+  highlight: {
+    fontWeight: '700',
   },
 });
+
+export default App;