Set up index.js for progress bar tests

Author: wagnermaciel

example/index.js

@@ -1,9 +1,144 @@
 /**
+ * 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 {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
+import React from 'react';
+import {
+  AppRegistry,
+  Button,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
 
-AppRegistry.registerComponent(appName, () => App);
+import ProgressBarTestModule from './ProgressBarTestModule.js';
+import ProgressBarAndroidExample from './ProgressBarAndroidExample.android.js';
+import RNTesterBlock from './RNTesterBlock.js';
+import RNTesterPage from './RNTesterPage.js';
+import RNTesterTitle from './RNTesterTitle.js';
+
+// Examples which show the user how to correctly use the library
+const EXAMPLES = [
+  {
+    id: 'ProgressBarTestModule',
+    title: 'Progress Bar Test Module',
+    description: 'Multiple progress bars with different style attributes.',
+    render() {
+      return <ProgressBarTestModule />;
+    },
+  },
+  {
+    id: 'ProgressBarAndroidExample',
+    title: 'Simple progress bar',
+    description: 'Horizontal bar to show the progress of some operation.',
+    render() {
+      return <ProgressBarAndroidExample />;
+    },
+	},
+];
+
+// Test cases for the e2e tests. THESE ARE NOT EXAMPLES OF BEST PRACTICE
+import TEST_CASES from './testCases';
+
+type State = {
+  showExamples: boolean,
+};
+
+class ExampleApp extends React.Component<{}, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showExamples: true,
+    };
+  }
+
+  _toggleMode = () => {
+    this.setState(state => ({showExamples: !state.showExamples}));
+  };
+
+  render() {
+    const {showExamples} = this.state;
+    return (
+      <ScrollView testID="scrollView" style={styles.container}>
+        <SafeAreaView>
+          <Button
+            testID="modeToggle"
+            onPress={this._toggleMode}
+            title={showExamples ? 'Switch to Test Cases' : 'Switch to Examples'}
+          />
+          {showExamples ? (
+            <>
+              <Text testID="examplesTitle" style={styles.sectionTitle}>
+                Examples
+              </Text>
+              {EXAMPLES.map(this._renderExample)}
+            </>
+          ) : (
+            <>
+              <Text testID="testCasesTitle" style={styles.sectionTitle}>
+                Test Cases
+              </Text>
+              {TEST_CASES.map(this._renderExample)}
+            </>
+          )}
+        </SafeAreaView>
+      </ScrollView>
+    );
+  }
+
+  _renderExample = example => {
+    return (
+      <View
+        testID={`example-${example.id}`}
+        key={example.title}
+        style={styles.exampleContainer}>
+        <Text style={styles.exampleTitle}>{example.title}</Text>
+        <Text style={styles.exampleDescription}>{example.description}</Text>
+        <View style={styles.exampleInnerContainer}>{example.render()}</View>
+      </View>
+    );
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+  },
+  sectionTitle: {
+    fontSize: 24,
+    marginHorizontal: 8,
+    marginTop: 24,
+  },
+  exampleContainer: {
+    padding: 16,
+    marginVertical: 4,
+    backgroundColor: '#FFF',
+    borderColor: '#EEE',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+  },
+  exampleTitle: {
+    fontSize: 18,
+  },
+  exampleDescription: {
+    color: '#333333',
+    marginBottom: 16,
+  },
+  exampleInnerContainer: {
+    borderColor: '#EEE',
+    borderTopWidth: 1,
+    paddingTop: 16,
+  },
+});
+
+AppRegistry.registerComponent(appName, () => ExampleApp);