Move debug and reload instructions to their own modules

This will abstract over the platform checks and reduce the amount of hard coded copy we have in the initial app template.
facebook · May 13, 2019 · b266a5c · b266a5c
1 parent 829f723
commit b266a5c
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 80 deletions.
diff --git a/Libraries/NewAppScreen/components/DebugInstructions.js b/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;
diff --git a/Libraries/NewAppScreen/components/ReloadInstructions.js b/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;
diff --git a/Libraries/NewAppScreen/index.js b/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>

diff --git a/template/App.js b/template/App.js
@@ -7,53 +7,18 @@
  */
 
 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 '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>
 );
 
-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>
@@ -72,11 +37,15 @@ const App = () => {
           </Section>
           <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>
             <Text style={styles.sectionTitle}>Learn More</Text>