diff --git a/Libraries/NewAppScreen/components/Colors.js b/Libraries/NewAppScreen/components/Colors.js new file mode 100644 index 00000000000000..512d5bd79acdf8 --- /dev/null +++ b/Libraries/NewAppScreen/components/Colors.js @@ -0,0 +1,20 @@ +/** + * 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 + */ + +'use strict'; + +export default { + primary: '#1292B4', + white: '#FFF', + lighter: '#F3F3F3', + light: '#DAE1E7', + dark: '#444', + black: '#000', +}; diff --git a/Libraries/NewAppScreen/components/Header.js b/Libraries/NewAppScreen/components/Header.js new file mode 100644 index 00000000000000..31b159a576d029 --- /dev/null +++ b/Libraries/NewAppScreen/components/Header.js @@ -0,0 +1,56 @@ +/** + * 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 + */ + +'use strict'; + +import React from 'react'; +import {View, Text, StyleSheet, ImageBackground} from 'react-native'; +import Colors from './Colors'; + +const Header = () => ( + + + + Welcome to React Native + +); + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + justifyContent: 'center', + paddingTop: 100, + paddingBottom: 40, + paddingHorizontal: 32, + backgroundColor: Colors.lighter, + }, + backgroundLogo: { + position: 'absolute', + top: -20, + left: -200, + opacity: 0.2, + alignItems: 'center', + justifyContent: 'center', + height: 540, + width: 540, + }, + text: { + fontSize: 40, + fontWeight: '600', + textAlign: 'center', + color: Colors.black, + }, +}); + +export default Header; diff --git a/Libraries/NewAppScreen/components/LearnMoreLinks.js b/Libraries/NewAppScreen/components/LearnMoreLinks.js new file mode 100644 index 00000000000000..6b9cab65cfec8b --- /dev/null +++ b/Libraries/NewAppScreen/components/LearnMoreLinks.js @@ -0,0 +1,109 @@ +/** + * 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 + */ + +'use strict'; + +import React from 'react'; +import {View, Text, StyleSheet, TouchableOpacity, Linking} from 'react-native'; +import Colors from './Colors'; + +const links = [ + { + title: 'The Basics', + link: 'https://facebook.github.io/react-native/docs/tutorial', + description: + 'Read the docs on what to do once seen how to work in React Native.', + }, + { + title: 'Style', + link: 'https://facebook.github.io/react-native/docs/style', + description: 'All of the core components accept a prop named style.', + }, + { + title: 'Layout', + link: 'https://facebook.github.io/react-native/docs/flexbox', + description: + 'A component can specify the layout of its children using the flexbox specification.', + }, + { + title: 'Components', + link: 'https://facebook.github.io/react-native/docs/components-and-apis', + description: 'The full list of components and APIs inside React Native.', + }, + { + title: 'Navigation', + link: 'https://facebook.github.io/react-native/docs/navigation', + description: + 'How to handle moving between screens inside your application.', + }, + { + title: 'Networking', + link: 'https://facebook.github.io/react-native/docs/network', + description: 'How to use the Fetch API in React Native.', + }, + { + title: 'Help', + link: 'https://facebook.github.io/react-native/help', + description: + 'Need more help? There are many other React Native developers who may have the answer.', + }, +]; + +const LinkList = () => ( + + {links.map((item, index) => { + return ( + + + Linking.openURL(item.link)} + style={styles.linkContainer}> + {item.title} + {item.description} + + + ); + })} + +); + +const styles = StyleSheet.create({ + container: { + marginTop: 32, + paddingHorizontal: 24, + }, + linkContainer: { + flexWrap: 'wrap', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingVertical: 8, + }, + link: { + flex: 2, + fontSize: 18, + fontWeight: '400', + color: Colors.primary, + }, + description: { + flex: 3, + paddingVertical: 16, + fontWeight: '400', + fontSize: 18, + color: Colors.dark, + }, + separator: { + backgroundColor: Colors.light, + height: 1, + }, +}); + +export default LinkList; diff --git a/Libraries/NewAppScreen/components/logo.png b/Libraries/NewAppScreen/components/logo.png new file mode 100644 index 00000000000000..7dc42891300a2f Binary files /dev/null and b/Libraries/NewAppScreen/components/logo.png differ diff --git a/Libraries/NewAppScreen/index.js b/Libraries/NewAppScreen/index.js new file mode 100644 index 00000000000000..5b9bcc6a1642a7 --- /dev/null +++ b/Libraries/NewAppScreen/index.js @@ -0,0 +1,139 @@ +/** + * 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 + */ + +'use strict'; + +import React, {Fragment} from 'react'; +import { + StyleSheet, + ScrollView, + View, + Text, + Platform, + StatusBar, + SafeAreaView, +} from 'react-native'; + +import Header from './components/Header'; +import LearnMoreLinks from './components/LearnMoreLinks'; +import Colors from './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. + + ); +}; + +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({ + sectionContainer: { + marginTop: 32, + paddingHorizontal: 24, + }, + topSafeArea: { + flex: 0, + backgroundColor: Colors.lighter, + }, + bottomSafeArea: { + flex: 1, + backgroundColor: Colors.white, + }, + body: { + backgroundColor: Colors.white, + }, + sectionTitle: { + fontSize: 24, + fontWeight: '600', + color: Colors.black, + }, + sectionDescription: { + marginTop: 8, + fontSize: 18, + fontWeight: '400', + color: Colors.dark, + }, + highlight: { + fontWeight: '700', + }, +}); + +export default App; diff --git a/RNTester/js/NewAppScreenExample.js b/RNTester/js/NewAppScreenExample.js new file mode 100644 index 00000000000000..142aac3b8ba740 --- /dev/null +++ b/RNTester/js/NewAppScreenExample.js @@ -0,0 +1,26 @@ +/** + * 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. + * + * @format + * @flow + */ + +'use strict'; + +const React = require('react'); +const NewAppScreen = require('../../Libraries/NewAppScreen').default; + +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', + render(): React.Element { + return ; + }, + }, +]; diff --git a/RNTester/js/RNTesterList.android.js b/RNTester/js/RNTesterList.android.js index c982f2787848d9..db60069b1e2e71 100644 --- a/RNTester/js/RNTesterList.android.js +++ b/RNTester/js/RNTesterList.android.js @@ -41,6 +41,10 @@ const ComponentExamples: Array = [ key: 'MultiColumnExample', module: require('./MultiColumnExample'), }, + { + key: 'NewAppScreenExample', + module: require('./NewAppScreenExample'), + }, { key: 'PickerExample', module: require('./PickerExample'), diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js index b5d38ee0c1176c..a221ed9dccf442 100644 --- a/RNTester/js/RNTesterList.ios.js +++ b/RNTester/js/RNTesterList.ios.js @@ -73,6 +73,11 @@ const ComponentExamples: Array = [ module: require('./MultiColumnExample'), supportsTVOS: true, }, + { + key: 'NewAppScreenExample', + module: require('./NewAppScreenExample'), + supportsTVOS: false, + }, { key: 'PickerExample', module: require('./PickerExample'),