Remove var in RNTester (#22014)

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

Differential Revision: D12843150

Pulled By: TheSavior

fbshipit-source-id: 593adf141164cffe0ddc2db756721df26e38b4f5

RNTester/js/VibrationExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+const {
   StyleSheet,
   View,
   Text,
@@ -25,7 +25,7 @@ exports.framework = 'React';
 exports.title = 'Vibration';
 exports.description = 'Vibration API';
 
-var pattern, patternLiteral, patternDescription;
+let pattern, patternLiteral, patternDescription;
 if (Platform.OS === 'android') {
   pattern = [0, 500, 200, 500];
   patternLiteral = '[0, 500, 200, 500]';
@@ -115,7 +115,7 @@ exports.examples = [
   },
 ];
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   wrapper: {
     borderRadius: 5,
     marginBottom: 5,

RNTester/js/ViewPagerAndroidExample.android.js

@@ -9,9 +9,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+const {
   Image,
   StyleSheet,
   Text,
@@ -23,9 +23,9 @@ var {
 
 import type {ViewPagerScrollState} from 'ViewPagerAndroid';
 
-var PAGES = 5;
-var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273'];
-var IMAGE_URIS = [
+const PAGES = 5;
+const BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273'];
+const IMAGE_URIS = [
   'https://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg',
   'https://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg',
   'https://apod.nasa.gov/apod/image/1409/m27_snyder_960.jpg',
@@ -43,7 +43,7 @@ class LikeCount extends React.Component {
   };
 
   render() {
-    var thumbsUp = '\uD83D\uDC4D';
+    const thumbsUp = '\uD83D\uDC4D';
     return (
       <View style={styles.likeContainer}>
         <TouchableOpacity onPress={this.onClick} style={styles.likeButton}>
@@ -79,9 +79,10 @@ class Button extends React.Component {
 
 class ProgressBar extends React.Component {
   render() {
-    var fractionalPosition =
+    const fractionalPosition =
       this.props.progress.position + this.props.progress.offset;
-    var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size;
+    const progressBarSize =
+      (fractionalPosition / (PAGES - 1)) * this.props.size;
     return (
       <View style={[styles.progressBarContainer, {width: this.props.size}]}>
         <View style={[styles.progressBar, {width: progressBarSize}]} />
@@ -118,7 +119,7 @@ class ViewPagerAndroidExample extends React.Component {
   };
 
   move = delta => {
-    var page = this.state.page + delta;
+    const page = this.state.page + delta;
     this.go(page);
   };
 
@@ -133,9 +134,9 @@ class ViewPagerAndroidExample extends React.Component {
   };
 
   render() {
-    var pages = [];
-    for (var i = 0; i < PAGES; i++) {
-      var pageStyle = {
+    const pages = [];
+    for (let i = 0; i < PAGES; i++) {
+      const pageStyle = {
         backgroundColor: BGCOLOR[i % BGCOLOR.length],
         alignItems: 'center',
         padding: 20,
@@ -150,7 +151,7 @@ class ViewPagerAndroidExample extends React.Component {
         </View>,
       );
     }
-    var {page, animationsAreEnabled} = this.state;
+    const {page, animationsAreEnabled} = this.state;
     return (
       <View style={styles.container}>
         <ViewPagerAndroid
@@ -222,7 +223,7 @@ class ViewPagerAndroidExample extends React.Component {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   buttons: {
     flexDirection: 'row',
     height: 30,

RNTester/js/WebViewExample.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+const {
   StyleSheet,
   Text,
   TextInput,
@@ -22,13 +22,13 @@ var {
   WebView,
 } = ReactNative;
 
-var HEADER = '#3b5998';
-var BGWASH = 'rgba(255,255,255,0.8)';
-var DISABLED_WASH = 'rgba(255,255,255,0.25)';
+const HEADER = '#3b5998';
+const BGWASH = 'rgba(255,255,255,0.8)';
+const DISABLED_WASH = 'rgba(255,255,255,0.25)';
 
-var TEXT_INPUT_REF = 'urlInput';
-var WEBVIEW_REF = 'webview';
-var DEFAULT_URL = 'https://m.facebook.com';
+const TEXT_INPUT_REF = 'urlInput';
+const WEBVIEW_REF = 'webview';
+const DEFAULT_URL = 'https://m.facebook.com';
 const FILE_SYSTEM_ORIGIN_WHITE_LIST = ['file://*', 'http://*', 'https://*'];
 
 class WebViewExample extends React.Component<{}, $FlowFixMeState> {
@@ -44,7 +44,7 @@ class WebViewExample extends React.Component<{}, $FlowFixMeState> {
   inputText = '';
 
   handleTextInputChange = event => {
-    var url = event.nativeEvent.text;
+    let url = event.nativeEvent.text;
     if (!/^[a-zA-Z-_]+:/.test(url)) {
       url = 'http://' + url;
     }
@@ -143,7 +143,7 @@ class WebViewExample extends React.Component<{}, $FlowFixMeState> {
   };
 
   pressGoButton = () => {
-    var url = this.inputText.toLowerCase();
+    const url = this.inputText.toLowerCase();
     if (url === this.state.url) {
       this.reload();
     } else {
@@ -297,7 +297,7 @@ class InjectJS extends React.Component<{}> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: HEADER,

RNTester/js/XHRExample.js

@@ -10,15 +10,15 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
 
-var XHRExampleDownload = require('./XHRExampleDownload');
-var XHRExampleBinaryUpload = require('./XHRExampleBinaryUpload');
-var XHRExampleFormData = require('./XHRExampleFormData');
-var XHRExampleHeaders = require('./XHRExampleHeaders');
-var XHRExampleFetch = require('./XHRExampleFetch');
-var XHRExampleOnTimeOut = require('./XHRExampleOnTimeOut');
-var XHRExampleCookies = require('./XHRExampleCookies');
+const XHRExampleDownload = require('./XHRExampleDownload');
+const XHRExampleBinaryUpload = require('./XHRExampleBinaryUpload');
+const XHRExampleFormData = require('./XHRExampleFormData');
+const XHRExampleHeaders = require('./XHRExampleHeaders');
+const XHRExampleFetch = require('./XHRExampleFetch');
+const XHRExampleOnTimeOut = require('./XHRExampleOnTimeOut');
+const XHRExampleCookies = require('./XHRExampleCookies');
 
 exports.framework = 'React';
 exports.title = 'XMLHttpRequest';

RNTester/js/XHRExampleBinaryUpload.js

@@ -62,12 +62,12 @@ class XHRExampleBinaryUpload extends React.Component<{}, $FlowFixMeState> {
       Alert.alert('Upload failed', 'No response payload.');
       return;
     }
-    var index = xhr.responseText.indexOf('http://www.posttestserver.com/');
+    const index = xhr.responseText.indexOf('http://www.posttestserver.com/');
     if (index === -1) {
       Alert.alert('Upload failed', 'Invalid response payload.');
       return;
     }
-    var url = xhr.responseText.slice(index).split('\n')[0];
+    const url = xhr.responseText.slice(index).split('\n')[0];
     console.log('Upload successful: ' + url);
     Linking.openURL(url);
   }
@@ -77,7 +77,7 @@ class XHRExampleBinaryUpload extends React.Component<{}, $FlowFixMeState> {
   };
 
   _upload = () => {
-    var xhr = new XMLHttpRequest();
+    const xhr = new XMLHttpRequest();
     xhr.open('POST', 'http://posttestserver.com/post.php');
     xhr.onload = () => XHRExampleBinaryUpload.handlePostTestServerUpload(xhr);
     xhr.setRequestHeader('Content-Type', 'text/plain');

RNTester/js/XHRExampleCookies.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, TouchableHighlight, View, WebView} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, Text, TouchableHighlight, View, WebView} = ReactNative;
 
-var RCTNetworking = require('RCTNetworking');
+const RCTNetworking = require('RCTNetworking');
 
 class XHRExampleCookies extends React.Component<any, any> {
   cancelled: boolean;
@@ -30,8 +30,8 @@ class XHRExampleCookies extends React.Component<any, any> {
   }
 
   setCookie(domain: string) {
-    var {a, b} = this.state;
-    var url = `https://${domain}/cookies/set?a=${a}&b=${b}`;
+    const {a, b} = this.state;
+    const url = `https://${domain}/cookies/set?a=${a}&b=${b}`;
     fetch(url).then(response => {
       this.setStatus(`Cookies a=${a}, b=${b} set`);
       this.refreshWebview();
@@ -130,7 +130,7 @@ class XHRExampleCookies extends React.Component<any, any> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   wrapper: {
     borderRadius: 5,
     marginBottom: 5,

RNTester/js/XHRExampleFetch.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, TextInput, View, Platform} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, Text, TextInput, View, Platform} = ReactNative;
 
 class XHRExampleFetch extends React.Component<any, any> {
   responseURL: ?string;
@@ -44,11 +44,11 @@ class XHRExampleFetch extends React.Component<any, any> {
       return null;
     }
 
-    var responseHeaders = [];
-    var keys = Object.keys(this.responseHeaders.map);
-    for (var i = 0; i < keys.length; i++) {
-      var key = keys[i];
-      var value = this.responseHeaders.get(key);
+    const responseHeaders = [];
+    const keys = Object.keys(this.responseHeaders.map);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const value = this.responseHeaders.get(key);
       responseHeaders.push(
         <Text>
           {key}: {value}
@@ -59,21 +59,21 @@ class XHRExampleFetch extends React.Component<any, any> {
   }
 
   render() {
-    var responseURL = this.responseURL ? (
+    const responseURL = this.responseURL ? (
       <View style={{marginTop: 10}}>
         <Text style={styles.label}>Server response URL:</Text>
         <Text>{this.responseURL}</Text>
       </View>
     ) : null;
 
-    var responseHeaders = this.responseHeaders ? (
+    const responseHeaders = this.responseHeaders ? (
       <View style={{marginTop: 10}}>
         <Text style={styles.label}>Server response headers:</Text>
         {this._renderHeaders()}
       </View>
     ) : null;
 
-    var response = this.state.responseText ? (
+    const response = this.state.responseText ? (
       <View style={{marginTop: 10}}>
         <Text style={styles.label}>Server response:</Text>
         <TextInput
@@ -104,7 +104,7 @@ class XHRExampleFetch extends React.Component<any, any> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   textInput: {
     flex: 1,
     borderRadius: 3,

RNTester/js/XHRExampleFormData.js

@@ -54,9 +54,9 @@ class XHRExampleFormData extends React.Component<Object, Object> {
       if (!this._isMounted) {
         return;
       }
-      var edges = data.edges;
-      var edge = edges[Math.floor(Math.random() * edges.length)];
-      var randomPhoto = edge && edge.node && edge.node.image;
+      const edges = data.edges;
+      const edge = edges[Math.floor(Math.random() * edges.length)];
+      const randomPhoto = edge && edge.node && edge.node.image;
       if (randomPhoto) {
         let {width, height} = randomPhoto;
         width *= 0.25;
@@ -72,31 +72,31 @@ class XHRExampleFormData extends React.Component<Object, Object> {
   };
 
   _addTextParam = () => {
-    var textParams = this.state.textParams;
+    const textParams = this.state.textParams;
     textParams.push({name: '', value: ''});
     this.setState({textParams});
   };
 
   _onTextParamNameChange(index, text) {
-    var textParams = this.state.textParams;
+    const textParams = this.state.textParams;
     textParams[index].name = text;
     this.setState({textParams});
   }
 
   _onTextParamValueChange(index, text) {
-    var textParams = this.state.textParams;
+    const textParams = this.state.textParams;
     textParams[index].value = text;
     this.setState({textParams});
   }
 
   _upload = () => {
-    var xhr = new XMLHttpRequest();
+    const xhr = new XMLHttpRequest();
     xhr.open('POST', 'http://posttestserver.com/post.php');
     xhr.onload = () => {
       this.setState({isUploading: false});
       XHRExampleBinaryUpload.handlePostTestServerUpload(xhr);
     };
-    var formdata = new FormData();
+    const formdata = new FormData();
     if (this.state.randomPhoto) {
       formdata.append('image', {
         ...this.state.randomPhoto,
@@ -118,13 +118,13 @@ class XHRExampleFormData extends React.Component<Object, Object> {
   };
 
   render() {
-    var image = null;
+    let image = null;
     if (this.state.randomPhoto) {
       image = (
         <Image source={this.state.randomPhoto} style={styles.randomPhoto} />
       );
     }
-    var textItems = this.state.textParams.map((item, index) => (
+    const textItems = this.state.textParams.map((item, index) => (
       <View style={styles.paramRow}>
         <TextInput
           autoCapitalize="none"
@@ -143,12 +143,12 @@ class XHRExampleFormData extends React.Component<Object, Object> {
         />
       </View>
     ));
-    var uploadButtonLabel = this.state.isUploading ? 'Uploading...' : 'Upload';
-    var uploadProgress = this.state.uploadProgress;
+    let uploadButtonLabel = this.state.isUploading ? 'Uploading...' : 'Upload';
+    const uploadProgress = this.state.uploadProgress;
     if (uploadProgress !== null) {
       uploadButtonLabel += ' ' + Math.round(uploadProgress * 100) + '%';
     }
-    var uploadButton = (
+    let uploadButton = (
       <View style={styles.uploadButtonBox}>
         <Text style={styles.uploadButtonLabel}>{uploadButtonLabel}</Text>
       </View>

RNTester/js/XHRExampleHeaders.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, TouchableHighlight, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, Text, TouchableHighlight, View} = ReactNative;
 
 class XHRExampleHeaders extends React.Component {
   xhr: XMLHttpRequest;
@@ -32,7 +32,7 @@ class XHRExampleHeaders extends React.Component {
   download() {
     this.xhr && this.xhr.abort();
 
-    var xhr = this.xhr || new XMLHttpRequest();
+    const xhr = this.xhr || new XMLHttpRequest();
     xhr.onreadystatechange = () => {
       if (xhr.readyState === xhr.DONE) {
         if (this.cancelled) {
@@ -75,7 +75,7 @@ class XHRExampleHeaders extends React.Component {
   }
 
   render() {
-    var button =
+    const button =
       this.state.status === 'Downloading...' ? (
         <View style={styles.wrapper}>
           <View style={styles.button}>
@@ -101,7 +101,7 @@ class XHRExampleHeaders extends React.Component {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   wrapper: {
     borderRadius: 5,
     marginBottom: 5,

RNTester/js/XHRExampleOnTimeOut.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, TouchableHighlight, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {StyleSheet, Text, TouchableHighlight, View} = ReactNative;
 
 class XHRExampleOnTimeOut extends React.Component<any, any> {
   xhr: XMLHttpRequest;
@@ -28,7 +28,7 @@ class XHRExampleOnTimeOut extends React.Component<any, any> {
   loadTimeOutRequest() {
     this.xhr && this.xhr.abort();
 
-    var xhr = this.xhr || new XMLHttpRequest();
+    const xhr = this.xhr || new XMLHttpRequest();
 
     xhr.onerror = () => {
       console.log('Status ', xhr.status);
@@ -60,7 +60,7 @@ class XHRExampleOnTimeOut extends React.Component<any, any> {
   }
 
   render() {
-    var button = this.state.loading ? (
+    const button = this.state.loading ? (
       <View style={styles.wrapper}>
         <View style={styles.button}>
           <Text>Loading...</Text>
@@ -85,7 +85,7 @@ class XHRExampleOnTimeOut extends React.Component<any, any> {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   wrapper: {
     borderRadius: 5,
     marginBottom: 5,