Remove var in RNTester (#22016)

Summary:
I removed `var` in RNTester.

- [x] npm run prettier
- [x] npm run flow-check-ios
- [x] npm run flow-check-android

[GENERAL] [ENHANCEMENT] [RNTester] - remove `var`
Pull Request resolved: https://github.com/facebook/react-native/pull/22016

Differential Revision: D12843122

Pulled By: TheSavior

fbshipit-source-id: 7e207366c457f0bda707773e9de02fe5afdbb144

RNTester/js/RNTesterExampleContainer.js

@@ -17,7 +17,8 @@ const RNTesterPage = require('./RNTesterPage');
 class RNTesterExampleContainer extends React.Component {
   renderExample(example, i) {
     // Filter platform-specific examples
-    var {title, description, platform} = example;
+    const {description, platform} = example;
+    let {title} = example;
     if (platform) {
       if (Platform.OS !== platform) {
         return null;

RNTester/js/RNTesterTitle.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, Text, View} = ReactNative;
 
 class RNTesterTitle extends React.Component<$FlowFixMeProps> {
   render() {
@@ -24,7 +24,7 @@ class RNTesterTitle extends React.Component<$FlowFixMeProps> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     borderRadius: 4,
     borderWidth: 0.5,

RNTester/js/SafeAreaViewExample.js

@@ -118,7 +118,7 @@ exports.examples = [
   },
 ];
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   modal: {
     flex: 1,
   },

RNTester/js/ScrollViewSimpleExample.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {ScrollView, StyleSheet, Text, TouchableOpacity} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {ScrollView, StyleSheet, Text, TouchableOpacity} = ReactNative;
 
-var NUM_ITEMS = 20;
+const NUM_ITEMS = 20;
 
 class ScrollViewSimpleExample extends React.Component<{}> {
   static title = '<ScrollView>';
@@ -22,8 +22,8 @@ class ScrollViewSimpleExample extends React.Component<{}> {
     'Component that enables scrolling through child components.';
 
   makeItems = (nItems: number, styles): Array<any> => {
-    var items = [];
-    for (var i = 0; i < nItems; i++) {
+    const items = [];
+    for (let i = 0; i < nItems; i++) {
       items[i] = (
         <TouchableOpacity key={i} style={styles}>
           <Text>{'Item ' + i}</Text>
@@ -35,7 +35,7 @@ class ScrollViewSimpleExample extends React.Component<{}> {
 
   render() {
     // One of the items is a horizontal scroll view
-    var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
+    const items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
     items[4] = (
       <ScrollView key={'scrollView'} horizontal={true}>
         {this.makeItems(NUM_ITEMS, [
@@ -58,7 +58,7 @@ class ScrollViewSimpleExample extends React.Component<{}> {
       </ScrollView>,
     );
 
-    var verticalScrollView = (
+    const verticalScrollView = (
       <ScrollView style={styles.verticalScrollView}>{items}</ScrollView>
     );
 
@@ -66,7 +66,7 @@ class ScrollViewSimpleExample extends React.Component<{}> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   verticalScrollView: {
     margin: 10,
   },

RNTester/js/SegmentedControlIOSExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {SegmentedControlIOS, Text, View, StyleSheet} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {SegmentedControlIOS, Text, View, StyleSheet} = ReactNative;
 
 class BasicSegmentedControlExample extends React.Component<{}> {
   render() {
@@ -132,7 +132,7 @@ class EventSegmentedControlExample extends React.Component<
   };
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   text: {
     fontSize: 14,
     textAlign: 'center',

RNTester/js/ShareExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, View, Text, TouchableHighlight, Share} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, View, Text, TouchableHighlight, Share} = ReactNative;
 
 exports.framework = 'React';
 exports.title = 'Share';
@@ -103,7 +103,7 @@ class ShareMessageExample extends React.Component<$FlowFixMeProps, any> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   wrapper: {
     borderRadius: 5,
     marginBottom: 5,

RNTester/js/SliderExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Slider, Text, StyleSheet, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Slider, Text, StyleSheet, View} = ReactNative;
 
 class SliderExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
   static defaultProps = {
@@ -68,7 +68,7 @@ class SlidingCompleteExample extends React.Component<
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   slider: {
     height: 10,
     margin: 10,

RNTester/js/StatusBarExample.js

@@ -498,7 +498,7 @@ const examples = [
 
 exports.examples = examples;
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',

RNTester/js/SwipeableFlatListExample.js

@@ -103,7 +103,7 @@ class SwipeableFlatListExample extends React.Component<RNTesterProps> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     justifyContent: 'center',

RNTester/js/SwitchExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Platform, Switch, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Switch, Text, View} = ReactNative;
 
 class BasicSwitchExample extends React.Component<{}, $FlowFixMeState> {
   state = {
@@ -125,7 +125,7 @@ class EventSwitchExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-var examples = [
+const examples = [
   {
     title: 'Switches can be set to true or false',
     render(): React.Element<any> {

RNTester/js/TVEventHandlerExample.js

@@ -10,17 +10,10 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 
-var {
-  Platform,
-  StyleSheet,
-  View,
-  Text,
-  TouchableOpacity,
-  TVEventHandler,
-} = ReactNative;
+const {Platform, View, Text, TouchableOpacity, TVEventHandler} = ReactNative;
 
 exports.framework = 'React';
 exports.title = 'TVEventHandler example';

RNTester/js/TabBarIOSBarStyleExample.js

@@ -22,11 +22,11 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, TabBarIOS, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, TabBarIOS, Text, View} = ReactNative;
 
-var base64Icon =
+const base64Icon =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
 
 class TabBarIOSBarStyleExample extends React.Component<{}> {
@@ -47,7 +47,7 @@ class TabBarIOSBarStyleExample extends React.Component<{}> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   tabContent: {
     flex: 1,
     alignItems: 'center',

RNTester/js/TabBarIOSExample.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, TabBarIOS, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, TabBarIOS, Text, View} = ReactNative;
 
-var base64Icon =
+const base64Icon =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
 
 class TabBarExample extends React.Component<{}, $FlowFixMeState> {
@@ -89,7 +89,7 @@ class TabBarExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   tabContent: {
     flex: 1,
     alignItems: 'center',

RNTester/js/TextExample.android.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {Image, StyleSheet, Text, View} = ReactNative;
-var RNTesterBlock = require('./RNTesterBlock');
-var RNTesterPage = require('./RNTesterPage');
+const React = require('react');
+const ReactNative = require('react-native');
+const {Image, StyleSheet, Text, View} = ReactNative;
+const RNTesterBlock = require('./RNTesterBlock');
+const RNTesterPage = require('./RNTesterPage');
 const TextLegend = require('./Shared/TextLegend');
 
 class Entity extends React.Component<$FlowFixMeProps> {
@@ -43,7 +43,7 @@ class AttributeToggler extends React.Component<{}, $FlowFixMeState> {
   };
 
   render() {
-    var curStyle = {
+    const curStyle = {
       fontWeight: this.state.fontWeight,
       fontSize: this.state.fontSize,
     };
@@ -590,7 +590,7 @@ class TextExample extends React.Component<{}> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   backgroundColorText: {
     left: 5,
     backgroundColor: 'rgba(100, 100, 100, 0.3)',

RNTester/js/TextExample.ios.js

@@ -91,7 +91,7 @@ class AttributeToggler extends React.Component<{}, $FlowFixMeState> {
   };
 
   render() {
-    var curStyle = {
+    const curStyle = {
       fontWeight: this.state.fontWeight,
       fontSize: this.state.fontSize,
     };
@@ -239,8 +239,8 @@ class AdjustingFontSize extends React.Component<
 
 class TextBaseLineLayoutExample extends React.Component<*, *> {
   render() {
-    var texts = [];
-    for (var i = 9; i >= 0; i--) {
+    const texts = [];
+    for (let i = 9; i >= 0; i--) {
       texts.push(
         <Text key={i} style={{fontSize: 8 + i * 5, backgroundColor: '#eee'}}>
           {i}