Replace new app template with new app screen

facebook · May 10, 2019 · a0f0708 · a0f0708
1 parent 310cc38
commit a0f0708
Showing 1 changed file with 106 additions and 34 deletions.
diff --git a/template/App.js b/template/App.js
@@ -6,44 +6,116 @@
  * @flow
  */
 
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} 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 React, {Fragment} from 'react';
+import {
+  StyleSheet,
+  ScrollView,
+  View,
+  Text,
+  Platform,
+  StatusBar,
+} from 'react-native';
+
+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';
+
+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>
+  );
+};
 
-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>
+            <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({
-  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;