RN: Flowify packages/rn-tester (#51788)

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

Adds `flow` to the remaining files that are lacking it in the `packages/rn-tester` directory.

This also adds any necessary type annotations and fixes lint warnings.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D75899307

fbshipit-source-id: 27a74ed0007b3b754446a45931c2c148312d5e3a

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

@@ -4,11 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
 import RNTesterText from '../../components/RNTesterText';
 import React from 'react';
 import {
@@ -19,6 +18,11 @@ import {
   View,
 } from 'react-native';
 
+type Data = $ReadOnly<{
+  clicks: number,
+  text: string,
+}>;
+
 const styles = StyleSheet.create({
   row: {
     borderColor: 'grey',
@@ -36,12 +40,17 @@ const styles = StyleSheet.create({
   },
 });
 
-class Row extends React.Component {
+class Row extends React.Component<
+  $ReadOnly<{
+    data: Data,
+    onClick: Data => void,
+  }>,
+> {
   _onClick = () => {
     this.props.onClick(this.props.data);
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this._onClick}>
         <View style={styles.row}>
@@ -54,11 +63,20 @@ class Row extends React.Component {
   }
 }
 
-class RefreshControlExample extends React.Component {
-  state = {
+type RefreshControlExampleState = $ReadOnly<{
+  isRefreshing: boolean,
+  loaded: number,
+  rowData: $ReadOnlyArray<Data>,
+}>;
+
+class RefreshControlExample extends React.Component<
+  $ReadOnly<{}>,
+  RefreshControlExampleState,
+> {
+  state: RefreshControlExampleState = {
     isRefreshing: false,
     loaded: 0,
-    rowData: Array.from(new Array(20)).map((val, i) => ({
+    rowData: Array.from(new Array<void>(20)).map((val, i) => ({
       text: 'Initial row ' + i,
       clicks: 0,
     })),
@@ -68,14 +86,21 @@ class RefreshControlExample extends React.Component {
     this._onRefresh();
   }
 
-  _onClick = row => {
-    row.clicks++;
-    this.setState({
-      rowData: this.state.rowData,
+  _onClick = (row: Data) => {
+    this.setState(prevState => {
+      const index = prevState.rowData.indexOf(row);
+      return index < 0
+        ? null
+        : {
+            rowData: [...prevState.rowData].splice(index, 1, {
+              ...row,
+              clicks: row.clicks + 1,
+            }),
+          };
     });
   };
 
-  render() {
+  render(): React.Node {
     const rows = this.state.rowData.map((row, ii) => {
       return <Row key={ii} data={row} onClick={this._onClick} />;
     });
@@ -102,7 +127,7 @@ class RefreshControlExample extends React.Component {
     this.setState({isRefreshing: true});
     setTimeout(() => {
       // prepend 10 items
-      const rowData = Array.from(new Array(10))
+      const rowData = Array.from(new Array<void>(10))
         .map((val, i) => ({
           text: 'Loaded row ' + (+this.state.loaded + i),
           clicks: 0,