From 829f723420419554aa82978e46c9c621f4975d10 Mon Sep 17 00:00:00 2001 From: Eli Perkins Date: Fri, 10 May 2019 12:16:18 -0400 Subject: [PATCH 1/4] Replace new app template with new app screen --- template/App.js | 140 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 106 insertions(+), 34 deletions(-) diff --git a/template/App.js b/template/App.js index 171d0f0f4a8532..be84f15457c8df 100644 --- 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}) => ( + {children} +); + +const ReloadInstructions = () => { + return Platform.OS === 'ios' ? ( + + Press Cmd+R in the simulator to + reload your app's code + + ) : ( + + Double tap R on your keyboard to + reload your app's code + + ); +}; + +const DebugInstructions = () => { + return Platform.OS === 'ios' ? ( + + Press Cmd+D in the simulator or{' '} + Shake your device to open the React + Native debug menu. + + ) : ( + + Press menu button or + Shake your device to open the React + Native debug menu. + + ); +}; -type Props = {}; -export default class App extends Component { - render() { - return ( - - Welcome to React Native! - To get started, edit App.js - {instructions} - - ); - } -} +const App = () => { + return ( + + + +
+ +
+ Step One + + Edit App.js to change this + screen and then come back to see your edits. + +
+
+ See Your Changes + +
+
+ Debug + +
+
+ Learn More + + Read the docs on what to do once seen how to work in React Native. + +
+ + + + + ); +}; 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; From b266a5c46cf3cba2380ab7103497f767414eba61 Mon Sep 17 00:00:00 2001 From: Eli Perkins Date: Mon, 13 May 2019 11:27:30 -0400 Subject: [PATCH 2/4] 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. --- .../components/DebugInstructions.js | 37 ++++++++++++++ .../components/ReloadInstructions.js | 35 +++++++++++++ Libraries/NewAppScreen/index.js | 49 ++++--------------- template/App.js | 49 ++++--------------- 4 files changed, 90 insertions(+), 80 deletions(-) create mode 100644 Libraries/NewAppScreen/components/DebugInstructions.js create mode 100644 Libraries/NewAppScreen/components/ReloadInstructions.js diff --git a/Libraries/NewAppScreen/components/DebugInstructions.js b/Libraries/NewAppScreen/components/DebugInstructions.js new file mode 100644 index 00000000000000..821f7cbde710f3 --- /dev/null +++ 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: () => ( + + Press Cmd+D in the simulator or{' '} + Shake your device to open the React + Native debug menu. + + ), + default: () => ( + + Press menu button or + Shake your device to open the React + Native debug menu. + + ), +}); + +export default DebugInstructions; diff --git a/Libraries/NewAppScreen/components/ReloadInstructions.js b/Libraries/NewAppScreen/components/ReloadInstructions.js new file mode 100644 index 00000000000000..3404b3e8817166 --- /dev/null +++ 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: () => ( + + Press Cmd+R in the simulator to + reload your app's code + + ), + default: () => ( + + Double tap R on your keyboard to + reload your app's code + + ), +}); + +export default ReloadInstructions; diff --git a/Libraries/NewAppScreen/index.js b/Libraries/NewAppScreen/index.js index 3e415aa386f19f..0ee2ff3fa778ea 100644 --- 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}) => ( {children} ); -const ReloadInstructions = () => { - return Platform.OS === 'ios' ? ( - - Press Cmd+R in the simulator to - reload your app's code - - ) : ( - - Double tap R on your keyboard to - reload your app's code - - ); -}; - -const DebugInstructions = () => { - return Platform.OS === 'ios' ? ( - - Press Cmd+D in the simulator or{' '} - Shake your device to open the React - Native debug menu. - - ) : ( - - Press menu button or - Shake your device to open the React - Native debug menu. - - ); -}; - const App = () => { return ( @@ -77,12 +42,16 @@ const App = () => {
See Your Changes - + + +
Debug - + + +
diff --git a/template/App.js b/template/App.js index be84f15457c8df..4b88c5e3fc22ed 100644 --- 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}) => ( {children} ); -const ReloadInstructions = () => { - return Platform.OS === 'ios' ? ( - - Press Cmd+R in the simulator to - reload your app's code - - ) : ( - - Double tap R on your keyboard to - reload your app's code - - ); -}; - -const DebugInstructions = () => { - return Platform.OS === 'ios' ? ( - - Press Cmd+D in the simulator or{' '} - Shake your device to open the React - Native debug menu. - - ) : ( - - Press menu button or - Shake your device to open the React - Native debug menu. - - ); -}; - const App = () => { return ( @@ -72,11 +37,15 @@ const App = () => {
See Your Changes - + + +
Debug - + + +
Learn More From a5c274f255a4ce2ff8264b6389e10146d791efad Mon Sep 17 00:00:00 2001 From: Eli Perkins Date: Mon, 13 May 2019 12:08:44 -0400 Subject: [PATCH 3/4] Remove Section component from new app template MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This component wasn’t really helpful to us, as it only applied a style that we could apply in render anyway. --- template/App.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/template/App.js b/template/App.js index 4b88c5e3fc22ed..7dfe1a33859c18 100644 --- a/template/App.js +++ b/template/App.js @@ -15,10 +15,6 @@ 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}) => ( - {children} -); - const App = () => { return ( @@ -28,31 +24,31 @@ const App = () => { style={styles.scrollView}>
-
+ Step One Edit App.js to change this screen and then come back to see your edits. -
-
+ + See Your Changes -
-
+ + Debug -
-
+ + Learn More Read the docs on what to do once seen how to work in React Native. -
+ From 2bc2b1edeb91ebf697b92be26561d980ef364d36 Mon Sep 17 00:00:00 2001 From: Eli Perkins Date: Mon, 13 May 2019 12:10:49 -0400 Subject: [PATCH 4/4] Restructure NewAppScreen module to export individual components This reduces duplicity in the new app screen, and makes it easier to understand what comes from this module. --- Libraries/NewAppScreen/index.js | 80 +----------------------------- RNTester/js/NewAppScreenExample.js | 58 ++++++++++++++++++++-- template/App.js | 12 +++-- 3 files changed, 62 insertions(+), 88 deletions(-) diff --git a/Libraries/NewAppScreen/index.js b/Libraries/NewAppScreen/index.js index 0ee2ff3fa778ea..8d16690bbe2f8b 100644 --- a/Libraries/NewAppScreen/index.js +++ b/Libraries/NewAppScreen/index.js @@ -10,88 +10,10 @@ 'use strict'; -import React, {Fragment} from 'react'; -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}) => ( - {children} -); - -const App = () => { - return ( - - - -
- -
- Step One - - Edit App.js to change this - screen and then come back to see your edits. - -
- -
- See Your Changes - - - -
- -
- Debug - - - -
- -
- Learn More - - Read the docs on what to do once seen how to work in React Native. - -
- - - - - ); -}; - -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}; diff --git a/RNTester/js/NewAppScreenExample.js b/RNTester/js/NewAppScreenExample.js index 142aac3b8ba740..0b75f826f43eb7 100644 --- a/RNTester/js/NewAppScreenExample.js +++ b/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 { - return ; + return ( + +
+ + ); + }, + }, + { + title: 'Learn More Links', + description: + 'Learn more about the tools and techniques for building React Native apps.', + render(): React.Element { + return ; + }, + }, + { + title: 'New App Screen Colors', + description: 'Consistent colors to use throughout the new app screen.', + render(): React.Element { + return ( + + {Object.keys(Colors).map(key => ( + + ))} + + ); + }, + }, + { + title: 'Debug Instructions', + description: + 'Platform-specific instructions on how to start debugging a React Native app.', + render(): React.Element { + return ; + }, + }, + { + title: 'Reload Instructions', + description: + 'Platform-specific instructions on how to reload a React Native app.', + render(): React.Element { + return ; }, }, ]; diff --git a/template/App.js b/template/App.js index 7dfe1a33859c18..ebf0a678c96978 100644 --- a/template/App.js +++ b/template/App.js @@ -9,11 +9,13 @@ import React, {Fragment} from 'react'; 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'; +import { + Header, + LearnMoreLinks, + Colors, + DebugInstructions, + ReloadInstructions, +} from 'react-native/Libraries/NewAppScreen'; const App = () => { return (