react-native - Ensures the default launch screen compiles (#37303)

* Ensures the default launch screen compiles in react-native

* Fix linter issues

types/react-native/LaunchScreen.d.ts

@@ -0,0 +1,9 @@
+// Adds the JSX elements used in the launch screen.
+
+declare module 'react-native/Libraries/NewAppScreen' {
+  export const Header: any
+  export const LearnMoreLinks: any
+  export const Colors: any
+  export const DebugInstructions: any
+  export const ReloadInstructions: any
+}

types/react-native/index.d.ts

@@ -40,6 +40,7 @@
 /// <reference path="legacy-properties.d.ts" />
 /// <reference path="BatchedBridge.d.ts" />
 /// <reference path="Devtools.d.ts" />
+/// <reference path="LaunchScreen.d.ts" />
 
 import * as PropTypes from "prop-types";
 import * as React from "react";
@@ -9496,4 +9497,6 @@ declare global {
      * <code> if (__DEV__) console.log('Running in dev mode')</code>
      */
     const __DEV__: boolean;
+
+    const HermesInternal: null | {};
 }

types/react-native/test/init-example.tsx

@@ -1,36 +1,104 @@
-import * as React from "react";
-import { AppRegistry, StyleSheet, Text, View } from "react-native";
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
 
-export default class AwesomeProject extends React.Component {
-    render() {
-        return (
-            <View style={styles.container}>
-                <Text style={styles.welcome}>Welcome to React Native!</Text>
-                <Text style={styles.instructions}>To get started, edit index.ios.js</Text>
-                <Text style={styles.instructions}>
-                    Press Cmd+R to reload,{"\n"}
-                    Cmd+D or shake for dev menu
-                </Text>
-            </View>
-        );
-    }
-}
+import * as React from 'react';
+import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar } from 'react-native';
+
+import {
+    Header,
+    LearnMoreLinks,
+    Colors,
+    DebugInstructions,
+    ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+const App = () => {
+    const hasHermes = typeof HermesInternal === 'object' && HermesInternal !== null;
+    return (
+        <>
+            <StatusBar barStyle="dark-content" />
+            <SafeAreaView>
+                <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}>
+                    <Header />
+                    {!hasHermes ? null : (
+                        <View style={styles.engine}>
+                            <Text style={styles.footer}>Engine: Hermes</Text>
+                        </View>
+                    )}
+                    <View style={styles.body}>
+                        <View style={styles.sectionContainer}>
+                            <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>
+                        </View>
+                        <View style={styles.sectionContainer}>
+                            <Text style={styles.sectionTitle}>See Your Changes</Text>
+                            <Text style={styles.sectionDescription}>
+                                <ReloadInstructions />
+                            </Text>
+                        </View>
+                        <View style={styles.sectionContainer}>
+                            <Text style={styles.sectionTitle}>Debug</Text>
+                            <Text style={styles.sectionDescription}>
+                                <DebugInstructions />
+                            </Text>
+                        </View>
+                        <View style={styles.sectionContainer}>
+                            <Text style={styles.sectionTitle}>Learn More</Text>
+                            <Text style={styles.sectionDescription}>Read the docs to discover what to do next:</Text>
+                        </View>
+                        <LearnMoreLinks />
+                    </View>
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "#F5FCFF",
+    scrollView: {
+        backgroundColor: Colors.lighter,
     },
-    welcome: {
-        fontSize: 20,
-        textAlign: "center",
-        margin: 10,
+    engine: {
+        position: 'absolute',
+        right: 0,
     },
-    instructions: {
-        textAlign: "center",
-        color: "#333333",
-        marginBottom: 5,
+    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',
+    },
+    footer: {
+        color: Colors.dark,
+        fontSize: 12,
+        fontWeight: '600',
+        padding: 4,
+        paddingRight: 12,
+        textAlign: 'right',
     },
 });
+
+export default App;

types/react-native/tslint.json

@@ -25,6 +25,7 @@
         "space-within-parens": false,
         "strict-export-declare-modifiers": false,
         "use-default-type-parameter": false,
-        "no-unnecessary-generics": false
+        "no-unnecessary-generics": false,
+        "no-single-declare-module": false
     }
 }