Remove var in RNTester (#22018)

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/22018

Differential Revision: D12843078

Pulled By: TheSavior

fbshipit-source-id: a3928436b2c73ead931e7c957fab8ad74975ef73

RNTester/js/BorderExample.js

@@ -9,11 +9,11 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var ReactNative = require('react-native');
+const ReactNative = require('react-native');
-var {StyleSheet, View} = ReactNative;
+const {StyleSheet, View} = ReactNative;
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   box: {
     width: 100,
     height: 100,

RNTester/js/BoxShadowExample.js

@@ -9,11 +9,11 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var ReactNative = require('react-native');
+const ReactNative = require('react-native');
-var {Image, StyleSheet, View} = ReactNative;
+const {Image, StyleSheet, View} = ReactNative;
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   box: {
     width: 100,
     height: 100,

RNTester/js/CameraRollView.js

@@ -39,7 +39,7 @@ function rowHasChanged<T>(r1: Array<T>, r2: Array<T>): boolean {
     return true;
   }
 
-  for (var i = 0; i < r1.length; i++) {
+  for (let i = 0; i < r1.length; i++) {
     if (r1[i] !== r2[i]) {
       return true;
     }

RNTester/js/ClipboardExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var ReactNative = require('react-native');
+const ReactNative = require('react-native');
-var {Clipboard, View, Text} = ReactNative;
+const {Clipboard, View, Text} = ReactNative;
 
 class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
   state = {
@@ -22,7 +22,7 @@ class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
   _setClipboardContent = async () => {
     Clipboard.setString('Hello World');
     try {
-      var content = await Clipboard.getString();
+      const content = await Clipboard.getString();
       this.setState({content});
     } catch (e) {
       this.setState({content: e.message});

RNTester/js/DatePickerAndroidExample.js

@@ -9,17 +9,17 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var ReactNative = require('react-native');
+const ReactNative = require('react-native');
-var {
+const {
   DatePickerAndroid,
   StyleSheet,
   Text,
   TouchableWithoutFeedback,
 } = ReactNative;
 
-var RNTesterBlock = require('./RNTesterBlock');
+const RNTesterBlock = require('./RNTesterBlock');
-var RNTesterPage = require('./RNTesterPage');
+const RNTesterPage = require('./RNTesterPage');
 
 class DatePickerAndroidExample extends React.Component {
   static title = 'DatePickerAndroid';
@@ -44,12 +44,12 @@ class DatePickerAndroidExample extends React.Component {
 
   showPicker = async (stateKey, options) => {
     try {
-      var newState = {};
+      const newState = {};
       const {action, year, month, day} = await DatePickerAndroid.open(options);
       if (action === DatePickerAndroid.dismissedAction) {
         newState[stateKey + 'Text'] = 'dismissed';
       } else {
-        var date = new Date(year, month, day);
+        const date = new Date(year, month, day);
         newState[stateKey + 'Text'] = date.toLocaleDateString();
         newState[stateKey + 'Date'] = date;
       }
@@ -138,7 +138,7 @@ class DatePickerAndroidExample extends React.Component {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   text: {
     color: 'black',
   },

RNTester/js/DatePickerIOSExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var ReactNative = require('react-native');
+const ReactNative = require('react-native');
-var {DatePickerIOS, StyleSheet, Text, TextInput, View} = ReactNative;
+const {DatePickerIOS, StyleSheet, Text, TextInput, View} = ReactNative;
 
 class DatePickerExample extends React.Component<
   $FlowFixMeProps,
@@ -33,7 +33,7 @@ class DatePickerExample extends React.Component<
   };
 
   onTimezoneChange = event => {
-    var offset = parseInt(event.nativeEvent.text, 10);
+    const offset = parseInt(event.nativeEvent.text, 10);
     if (isNaN(offset)) {
       return;
     }
@@ -122,7 +122,7 @@ exports.examples = [
   },
 ];
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   textinput: {
     height: 26,
     width: 50,

RNTester/js/GeolocationExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var ReactNative = require('react-native');
+const ReactNative = require('react-native');
-var {StyleSheet, Text, View} = ReactNative;
+const {StyleSheet, Text, View} = ReactNative;
 
 exports.framework = 'React';
 exports.title = 'Geolocation';
@@ -38,14 +38,14 @@ class GeolocationExample extends React.Component<{}, $FlowFixMeState> {
   componentDidMount() {
     navigator.geolocation.getCurrentPosition(
       position => {
-        var initialPosition = JSON.stringify(position);
+        const initialPosition = JSON.stringify(position);
         this.setState({initialPosition});
       },
       error => alert(JSON.stringify(error)),
       {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000},
     );
     this.watchID = navigator.geolocation.watchPosition(position => {
-      var lastPosition = JSON.stringify(position);
+      const lastPosition = JSON.stringify(position);
       this.setState({lastPosition});
     });
   }
@@ -70,7 +70,7 @@ class GeolocationExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   title: {
     fontWeight: '500',
   },

RNTester/js/ImageCapInsetsExample.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var ReactNative = require('react-native');
+const ReactNative = require('react-native');
 
-var nativeImageSource = require('nativeImageSource');
+const nativeImageSource = require('nativeImageSource');
-var {Image, StyleSheet, Text, View} = ReactNative;
+const {Image, StyleSheet, Text, View} = ReactNative;
 
 class ImageCapInsetsExample extends React.Component<{}> {
   render() {
@@ -51,7 +51,7 @@ class ImageCapInsetsExample extends React.Component<{}> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   background: {
     backgroundColor: '#F6F6F6',
     justifyContent: 'center',

RNTester/js/ImageEditingExample.js

@@ -9,9 +9,9 @@
  */
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var ReactNative = require('react-native');
+const ReactNative = require('react-native');
-var {
+const {
   CameraRoll,
   Image,
   ImageEditor,
@@ -23,7 +23,7 @@ var {
   View,
 } = ReactNative;
 
-var PAGE_SIZE = 20;
+const PAGE_SIZE = 20;
 
 type ImageOffset = {|
   x: number,
@@ -68,9 +68,9 @@ class SquareImageCropper extends React.Component<
       if (!this._isMounted) {
         return;
       }
-      var edges = data.edges;
+      const edges = data.edges;
-      var edge = edges[Math.floor(Math.random() * edges.length)];
+      const edge = edges[Math.floor(Math.random() * edges.length)];
-      var randomPhoto = edge && edge.node && edge.node.image;
+      const randomPhoto = edge && edge.node && edge.node.image;
       if (randomPhoto) {
         this.setState({randomPhoto});
       }
@@ -89,7 +89,7 @@ class SquareImageCropper extends React.Component<
         <View
           style={styles.container}
           onLayout={event => {
-            var measuredWidth = event.nativeEvent.layout.width;
+            const measuredWidth = event.nativeEvent.layout.width;
             if (!measuredWidth) {
               return;
             }
@@ -111,7 +111,7 @@ class SquareImageCropper extends React.Component<
     if (!this.state.randomPhoto) {
       return <View style={styles.container} />;
     }
-    var error = null;
+    let error = null;
     if (this.state.cropError) {
       error = <Text>{this.state.cropError.message}</Text>;
     }
@@ -184,8 +184,8 @@ class ImageCropper extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
   componentWillMount() {
     // Scale an image to the minimum size that is large enough to completely
     // fill the crop box.
-    var widthRatio = this.props.image.width / this.props.size.width;
+    const widthRatio = this.props.image.width / this.props.size.width;
-    var heightRatio = this.props.image.height / this.props.size.height;
+    const heightRatio = this.props.image.height / this.props.size.height;
     this._horizontal = widthRatio > heightRatio;
     if (this._horizontal) {
       this._scaledImageSize = {
@@ -234,12 +234,12 @@ class ImageCropper extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
   }
 
   _updateTransformData(offset, scaledImageSize, croppedImageSize) {
-    var offsetRatioX = offset.x / scaledImageSize.width;
+    const offsetRatioX = offset.x / scaledImageSize.width;
-    var offsetRatioY = offset.y / scaledImageSize.height;
+    const offsetRatioY = offset.y / scaledImageSize.height;
-    var sizeRatioX = croppedImageSize.width / scaledImageSize.width;
+    const sizeRatioX = croppedImageSize.width / scaledImageSize.width;
-    var sizeRatioY = croppedImageSize.height / scaledImageSize.height;
+    const sizeRatioY = croppedImageSize.height / scaledImageSize.height;
 
-    var cropData: ImageCropData = {
+    const cropData: ImageCropData = {
       offset: {
         x: this.props.image.width * offsetRatioX,
         y: this.props.image.height * offsetRatioY,
@@ -287,7 +287,7 @@ exports.examples = [
   },
 ];
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignSelf: 'stretch',

RNTester/js/ImageExample.js

@@ -93,7 +93,7 @@ class NetworkImageCallbackExample extends React.Component<
                     `✔ Prefetch OK (+${new Date() - mountTime}ms)`,
                   );
                   Image.queryCache([IMAGE_PREFETCH_URL]).then(map => {
-                    var result = map.get(IMAGE_PREFETCH_URL);
+                    const result = map.get(IMAGE_PREFETCH_URL);
                     if (result) {
                       this._loadEventFired(
                         `✔ queryCache "${result}" (+${new Date() -
@@ -172,7 +172,7 @@ class NetworkImageExample extends React.Component<
   };
 
   render() {
-    var loader = this.state.loading ? (
+    const loader = this.state.loading ? (
       <View style={styles.progress}>
         <Text>{this.state.progress}%</Text>
         <ActivityIndicator style={{marginLeft: 5}} />
@@ -891,14 +891,14 @@ exports.examples = [
   },
 ];
 
-var fullImage = {
+const fullImage = {
   uri: 'https://facebook.github.io/react-native/img/opengraph.png',
 };
-var smallImage = {
+const smallImage = {
   uri: 'https://facebook.github.io/react-native/img/favicon.png',
 };
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   base: {
     width: 38,
     height: 38,