From fe88e9e48ce99cb8b9da913051cc36575310018b Mon Sep 17 00:00:00 2001 From: Eli Perkins Date: Tue, 14 May 2019 05:49:03 -0700 Subject: [PATCH] Replace new app template with new app screen (#24805) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../components/DebugInstructions.js | 37 ++++++ .../components/ReloadInstructions.js | 35 ++++++ Libraries/NewAppScreen/index.js | 115 +----------------- RNTester/js/NewAppScreenExample.js | 58 ++++++++- template/App.js | 105 +++++++++++----- 5 files changed, 201 insertions(+), 149 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..8d16690bbe2f8b 100644 --- a/Libraries/NewAppScreen/index.js +++ b/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}) => ( - {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 ( - - - -
- -
- 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 171d0f0f4a8532..ebf0a678c96978 100644 --- a/template/App.js +++ b/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 { - 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, + }, + body: { + backgroundColor: Colors.white, + }, + sectionContainer: { + marginTop: 32, + paddingHorizontal: 24, }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, + sectionTitle: { + fontSize: 24, + fontWeight: '600', + color: Colors.black, }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, + sectionDescription: { + marginTop: 8, + fontSize: 18, + fontWeight: '400', + color: Colors.dark, + }, + highlight: { + fontWeight: '700', }, }); + +export default App;