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
+
+
+
+
+
+
+
+
+ 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'),