Renamed from js to tsx

example/App.js

@@ -1,169 +0,0 @@
-/**
- * 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
- */
-
-import React, {Component} from 'react';
-import {
-  StyleSheet,
-  SafeAreaView,
-  Text,
-  TouchableOpacity,
-  View,
-  Keyboard,
-  Button,
-} from 'react-native';
-
-import Alerts from './examples/Alerts';
-import Scrolling from './examples/Scrolling';
-import Background from './examples/Background';
-
-const TESTS = {
-  Alerts: {
-    title: 'Alerts',
-    testId: 'alerts',
-    description: 'Alerts tests',
-    render() {
-      return <Alerts />;
-    },
-  },
-  Scrolling: {
-    title: 'Scrolling',
-    testId: 'scrolling',
-    description: 'Scrolling event test',
-    render() {
-      return <Scrolling />;
-    },
-  },
-  Background: {
-    title: 'Background',
-    testId: 'background',
-    description: 'Background color test',
-    render() {
-      return <Background />;
-    },
-  },
-};
-
-type Props = {};
-type State = {restarting: boolean, currentTest: Object};
-
-export default class App extends Component<Props, State> {
-  state = {
-    restarting: false,
-    currentTest: TESTS.Alerts,
-  };
-
-  _simulateRestart = () => {
-    this.setState({restarting: true}, () => this.setState({restarting: false}));
-  };
-
-  _changeTest = testName => {
-    this.setState({currentTest: TESTS[testName]});
-  };
-
-  render() {
-    const {restarting, currentTest} = this.state;
-    return (
-      <SafeAreaView style={styles.container}>
-        <TouchableOpacity
-          style={styles.closeKeyboardView}
-          onPress={() => Keyboard.dismiss()}
-          testID="closeKeyboard"
-        />
-
-        <TouchableOpacity
-          testID="restart_button"
-          onPress={this._simulateRestart}
-          style={styles.restartButton}
-          activeOpacity={0.6}>
-          <Text>Simulate Restart</Text>
-        </TouchableOpacity>
-
-        <View style={styles.testPickerContainer}>
-          <Button
-            testID="testType_alerts"
-            title="Alerts"
-            onPress={() => this._changeTest('Alerts')}
-          />
-          <Button
-            testID="testType_scrolling"
-            title="Scrolling"
-            onPress={() => this._changeTest('Scrolling')}
-          />
-          <Button
-            testID="testType_background"
-            title="Background"
-            onPress={() => this._changeTest('Background')}
-          />
-        </View>
-
-        {restarting ? null : (
-          <View
-            testID={`example-${currentTest.testId}`}
-            key={currentTest.title}
-            style={styles.exampleContainer}>
-            <Text style={styles.exampleTitle}>{currentTest.title}</Text>
-            <Text style={styles.exampleDescription}>
-              {currentTest.description}
-            </Text>
-            <View style={styles.exampleInnerContainer}>
-              {currentTest.render()}
-            </View>
-          </View>
-        )}
-      </SafeAreaView>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F5FCFF',
-    padding: 8,
-  },
-  exampleContainer: {
-    padding: 16,
-    backgroundColor: '#FFF',
-    borderColor: '#EEE',
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    flex: 1,
-  },
-  exampleTitle: {
-    fontSize: 18,
-  },
-  exampleDescription: {
-    color: '#333333',
-    marginBottom: 16,
-  },
-  exampleInnerContainer: {
-    borderColor: '#EEE',
-    borderTopWidth: 1,
-    paddingTop: 10,
-    flex: 1,
-  },
-  restartButton: {
-    padding: 6,
-    fontSize: 16,
-    borderRadius: 5,
-    backgroundColor: '#F3F3F3',
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-end',
-  },
-  closeKeyboardView: {
-    width: 5,
-    height: 5,
-  },
-  testPickerContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-});

example/App.tsx

@@ -1,17 +1,169 @@
-import React from 'react';
-import {SafeAreaView, StyleSheet} from 'react-native';
-import {WebView} from 'react-native-webview';
+/**
+ * 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
+ */
 
-const styles = StyleSheet.create({
-  container: {flex: 1, backgroundColor: '#20232a'},
-});
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  SafeAreaView,
+  Text,
+  TouchableOpacity,
+  View,
+  Keyboard,
+  Button,
+} from 'react-native';
 
-const App = () => {
-  return (
-    <SafeAreaView style={styles.container}>
-      <WebView source={{uri: 'https://facebook.github.io/react-native/'}} />
-    </SafeAreaView>
-  );
+import Alerts from './examples/Alerts';
+import Scrolling from './examples/Scrolling';
+import Background from './examples/Background';
+
+const TESTS = {
+  Alerts: {
+    title: 'Alerts',
+    testId: 'alerts',
+    description: 'Alerts tests',
+    render() {
+      return <Alerts />;
+    },
+  },
+  Scrolling: {
+    title: 'Scrolling',
+    testId: 'scrolling',
+    description: 'Scrolling event test',
+    render() {
+      return <Scrolling />;
+    },
+  },
+  Background: {
+    title: 'Background',
+    testId: 'background',
+    description: 'Background color test',
+    render() {
+      return <Background />;
+    },
+  },
 };
 
-export default App;
+type Props = {};
+type State = {restarting: boolean, currentTest: Object};
+
+export default class App extends Component<Props, State> {
+  state = {
+    restarting: false,
+    currentTest: TESTS.Alerts,
+  };
+
+  _simulateRestart = () => {
+    this.setState({restarting: true}, () => this.setState({restarting: false}));
+  };
+
+  _changeTest = testName => {
+    this.setState({currentTest: TESTS[testName]});
+  };
+
+  render() {
+    const {restarting, currentTest} = this.state;
+    return (
+      <SafeAreaView style={styles.container}>
+        <TouchableOpacity
+          style={styles.closeKeyboardView}
+          onPress={() => Keyboard.dismiss()}
+          testID="closeKeyboard"
+        />
+
+        <TouchableOpacity
+          testID="restart_button"
+          onPress={this._simulateRestart}
+          style={styles.restartButton}
+          activeOpacity={0.6}>
+          <Text>Simulate Restart</Text>
+        </TouchableOpacity>
+
+        <View style={styles.testPickerContainer}>
+          <Button
+            testID="testType_alerts"
+            title="Alerts"
+            onPress={() => this._changeTest('Alerts')}
+          />
+          <Button
+            testID="testType_scrolling"
+            title="Scrolling"
+            onPress={() => this._changeTest('Scrolling')}
+          />
+          <Button
+            testID="testType_background"
+            title="Background"
+            onPress={() => this._changeTest('Background')}
+          />
+        </View>
+
+        {restarting ? null : (
+          <View
+            testID={`example-${currentTest.testId}`}
+            key={currentTest.title}
+            style={styles.exampleContainer}>
+            <Text style={styles.exampleTitle}>{currentTest.title}</Text>
+            <Text style={styles.exampleDescription}>
+              {currentTest.description}
+            </Text>
+            <View style={styles.exampleInnerContainer}>
+              {currentTest.render()}
+            </View>
+          </View>
+        )}
+      </SafeAreaView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+    padding: 8,
+  },
+  exampleContainer: {
+    padding: 16,
+    backgroundColor: '#FFF',
+    borderColor: '#EEE',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    flex: 1,
+  },
+  exampleTitle: {
+    fontSize: 18,
+  },
+  exampleDescription: {
+    color: '#333333',
+    marginBottom: 16,
+  },
+  exampleInnerContainer: {
+    borderColor: '#EEE',
+    borderTopWidth: 1,
+    paddingTop: 10,
+    flex: 1,
+  },
+  restartButton: {
+    padding: 6,
+    fontSize: 16,
+    borderRadius: 5,
+    backgroundColor: '#F3F3F3',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-end',
+  },
+  closeKeyboardView: {
+    width: 5,
+    height: 5,
+  },
+  testPickerContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+});