Migrating RNTester to Packages Directory (#29567)

Summary:
## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
This PR aims to migrate the RNTester App to `packages` directory. But is currently, open to inspect the CI issues and resolve the merge conflicts.

Currently done
 - Working on iOS
 - Working on Android
 - Detox Tests working on iOS

Need to work on
 - Errors generated by the CI builds

[General] [Changed] - Migrated the RNTester App to the packages directory.

Pull Request resolved: https://github.com/facebook/react-native/pull/29567

Test Plan: It runs on both ios and android for now and the detox iOS builds are working.

Reviewed By: cpojer

Differential Revision: D23034761

Pulled By: rickhanlonii

fbshipit-source-id: e04bb06e1c7ef15d340206090d1575a871b9e6f5

packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js

@@ -0,0 +1,127 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+const React = require('react');
+const {
+  ScrollView,
+  StyleSheet,
+  RefreshControl,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} = require('react-native');
+
+const styles = StyleSheet.create({
+  row: {
+    borderColor: 'grey',
+    borderWidth: 1,
+    padding: 20,
+    backgroundColor: '#3a5795',
+    margin: 5,
+  },
+  text: {
+    alignSelf: 'center',
+    color: '#fff',
+  },
+  scrollview: {
+    flex: 1,
+  },
+});
+
+class Row extends React.Component {
+  _onClick = () => {
+    this.props.onClick(this.props.data);
+  };
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._onClick}>
+        <View style={styles.row}>
+          <Text style={styles.text}>
+            {this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}
+
+class RefreshControlExample extends React.Component {
+  state = {
+    isRefreshing: false,
+    loaded: 0,
+    rowData: Array.from(new Array(20)).map((val, i) => ({
+      text: 'Initial row ' + i,
+      clicks: 0,
+    })),
+  };
+
+  _onClick = row => {
+    row.clicks++;
+    this.setState({
+      rowData: this.state.rowData,
+    });
+  };
+
+  render() {
+    const rows = this.state.rowData.map((row, ii) => {
+      return <Row key={ii} data={row} onClick={this._onClick} />;
+    });
+    return (
+      <ScrollView
+        style={styles.scrollview}
+        refreshControl={
+          <RefreshControl
+            refreshing={this.state.isRefreshing}
+            onRefresh={this._onRefresh}
+            tintColor="#ff0000"
+            title="Loading..."
+            titleColor="#00ff00"
+            colors={['#ff0000', '#00ff00', '#0000ff']}
+            progressBackgroundColor="#ffff00"
+          />
+        }>
+        {rows}
+      </ScrollView>
+    );
+  }
+
+  _onRefresh = () => {
+    this.setState({isRefreshing: true});
+    setTimeout(() => {
+      // prepend 10 items
+      const rowData = Array.from(new Array(10))
+        .map((val, i) => ({
+          text: 'Loaded row ' + (+this.state.loaded + i),
+          clicks: 0,
+        }))
+        .concat(this.state.rowData);
+
+      this.setState({
+        loaded: this.state.loaded + 10,
+        isRefreshing: false,
+        rowData: rowData,
+      });
+    }, 5000);
+  };
+}
+
+exports.title = '<RefreshControl>';
+exports.description = 'Adds pull-to-refresh support to a scrollview.';
+exports.simpleExampleContainer = true;
+exports.examples = [
+  {
+    title: 'Simple refresh',
+    render: function(): React.Element<typeof RefreshControlExample> {
+      return <RefreshControlExample />;
+    },
+  },
+];