Polish the new app screen (#24737)

Summary:
Continuation of #24687

> Issue: [Polish the "new app screen"](react-native-community/discussions-and-proposals#122)
> This is the pull request for the new intro screen proposal in react native as directed by cpojer

This PR was created because the previous one could not be pushed to for some reason. I cleaned up a few small things and added the component as an example to RNTester so we can keep iterating. My plan is to land this, and then polish it and make it the default in a follow-up.

[General][Added] - New Intro screen, Icons

Removed Lottie Integration
100% React Native 💥
Pull Request resolved: #24737

Differential Revision: D15259092

Pulled By: cpojer

fbshipit-source-id: bc141fb1425cf354f29deffd907c37f83fd92c75

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',
+};

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 = () => (
+  <View style={styles.container}>
+    <ImageBackground
+      accessibilityRole={'image'}
+      source={require('./logo.png')}
+      style={styles.backgroundLogo}
+    />
+
+    <Text style={styles.text}>Welcome to React Native</Text>
+  </View>
+);
+
+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;

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 = () => (
+  <View style={styles.container}>
+    {links.map((item, index) => {
+      return (
+        <React.Fragment key={index}>
+          <View style={styles.separator} />
+          <TouchableOpacity
+            accessibilityRole={'button'}
+            onPress={() => Linking.openURL(item.link)}
+            style={styles.linkContainer}>
+            <Text style={styles.link}>{item.title}</Text>
+            <Text style={styles.description}>{item.description}</Text>
+          </TouchableOpacity>
+        </React.Fragment>
+      );
+    })}
+  </View>
+);
+
+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;

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}) => (
+  <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>
+      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>
+      <SafeAreaView style={styles.topSafeArea} />
+
+      <SafeAreaView style={styles.bottomSafeArea}>
+        <StatusBar barStyle="dark-content" />
+        <ScrollView>
+          <Header />
+          <View style={styles.body}>
+            <Section>
+              <Text style={styles.sectionTitle}>Step One</Text>
+              <Text style={styles.sectionDescription}>
+                Edit <Text style={styles.highlight}>App.js</Text> to change this
+                screen and then come back to see your edits.
+              </Text>
+            </Section>
+
+            <Section>
+              <Text style={styles.sectionTitle}>See Your Changes</Text>
+              <Text style={styles.sectionDescription}>
+                <ReloadInstructions />
+              </Text>
+            </Section>
+
+            <Section>
+              <Text style={styles.sectionTitle}>Debug</Text>
+              <DebugInstructions />
+            </Section>
+
+            <Section>
+              <Text style={styles.sectionTitle}>Learn More</Text>
+              <Text style={styles.sectionDescription}>
+                Read the docs on what to do once seen how to work in React
+                Native.
+              </Text>
+            </Section>
+            <LearnMoreLinks />
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </Fragment>
+  );
+};
+
+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;

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<any> {
+      return <NewAppScreen />;
+    },
+  },
+];

RNTester/js/RNTesterList.android.js

@@ -41,6 +41,10 @@ const ComponentExamples: Array<RNTesterExample> = [
     key: 'MultiColumnExample',
     module: require('./MultiColumnExample'),
   },
+  {
+    key: 'NewAppScreenExample',
+    module: require('./NewAppScreenExample'),
+  },
   {
     key: 'PickerExample',
     module: require('./PickerExample'),

RNTester/js/RNTesterList.ios.js

@@ -73,6 +73,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('./MultiColumnExample'),
     supportsTVOS: true,
   },
+  {
+    key: 'NewAppScreenExample',
+    module: require('./NewAppScreenExample'),
+    supportsTVOS: false,
+  },
   {
     key: 'PickerExample',
     module: require('./PickerExample'),