diff --git a/RNTester/js/AnimatedGratuitousApp/AnExApp.js b/RNTester/js/AnimatedGratuitousApp/AnExApp.js
index ca24eac844008d..f9aa375a7d9677 100644
--- a/RNTester/js/AnimatedGratuitousApp/AnExApp.js
+++ b/RNTester/js/AnimatedGratuitousApp/AnExApp.js
@@ -10,15 +10,15 @@
'use strict';
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, LayoutAnimation, PanResponder, StyleSheet, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, LayoutAnimation, PanResponder, StyleSheet, View} = ReactNative;
-var AnExSet = require('AnExSet');
+const AnExSet = require('AnExSet');
-var CIRCLE_SIZE = 80;
-var CIRCLE_MARGIN = 18;
-var NUM_CIRCLES = 30;
+const CIRCLE_SIZE = 80;
+const CIRCLE_MARGIN = 18;
+const NUM_CIRCLES = 30;
class Circle extends React.Component<any, any> {
longTimer: number;
@@ -37,7 +37,7 @@ class Circle extends React.Component<any, any> {
}
_onLongPress(): void {
- var config = {tension: 40, friction: 3};
+ const config = {tension: 40, friction: 3};
this.state.pan.addListener(value => {
// Async listener for state changes (step1: uncomment)
this.props.onMove && this.props.onMove(value);
@@ -77,9 +77,11 @@ class Circle extends React.Component<any, any> {
}
render(): React.Node {
+ let handlers;
+ let dragStyle = null;
if (this.state.panResponder) {
- var handlers = this.state.panResponder.panHandlers;
- var dragStyle = {
+ handlers = this.state.panResponder.panHandlers;
+ dragStyle = {
// Used to position while dragging
position: 'absolute', // Hoist out of layout (step1: uncomment)
...this.state.pan.getLayout(), // Convenience converter (step1: uncomment)
@@ -106,7 +108,7 @@ class Circle extends React.Component<any, any> {
},
};
}
- var animatedStyle: Object = {
+ const animatedStyle: Object = {
shadowOpacity: this.state.pop, // no need for interpolation (step2d: uncomment)
transform: [
{
@@ -117,11 +119,12 @@ class Circle extends React.Component<any, any> {
},
],
};
- var openVal = this.props.openVal;
+ const openVal = this.props.openVal;
+ let innerOpenStyle = null;
if (this.props.dummy) {
animatedStyle.opacity = 0;
} else if (this.state.isActive) {
- var innerOpenStyle = [
+ innerOpenStyle = [
styles.open,
{
// (step4: uncomment)
@@ -175,7 +178,7 @@ class Circle extends React.Component<any, any> {
);
}
_toggleIsActive(velocity) {
- var config = {tension: 30, friction: 7};
+ const config = {tension: 30, friction: 7};
if (this.state.isActive) {
Animated.spring(this.props.openVal, {toValue: 0, ...config}).start(() => {
// (step4: uncomment)
@@ -200,8 +203,8 @@ class AnExApp extends React.Component<any, any> {
_onMove: (position: Point) => void;
constructor(props: any): void {
super(props);
- var keys = [];
- for (var idx = 0; idx < NUM_CIRCLES; idx++) {
+ const keys = [];
+ for (let idx = 0; idx < NUM_CIRCLES; idx++) {
keys.push('E' + idx);
}
this.state = {
@@ -213,13 +216,14 @@ class AnExApp extends React.Component<any, any> {
}
render(): React.Node {
- var circles = this.state.keys.map((key, idx) => {
+ const circles = this.state.keys.map((key, idx) => {
if (key === this.state.activeKey) {
return <Circle key={key + 'd'} dummy={true} />;
} else {
+ let onLayout = null;
if (!this.state.restLayouts[idx]) {
- var onLayout = function(index, e) {
- var layout = e.nativeEvent.layout;
+ onLayout = function(index, e) {
+ const layout = e.nativeEvent.layout;
this.setState(state => {
state.restLayouts[index] = layout;
return state;
@@ -274,7 +278,7 @@ class AnExApp extends React.Component<any, any> {
}
_onMove(position: Point): void {
- var newKeys = moveToClosest(this.state, position);
+ const newKeys = moveToClosest(this.state, position);
if (newKeys !== this.state.keys) {
LayoutAnimation.easeInEaseOut(); // animates layout update as one batch (step3: uncomment)
this.setState({keys: newKeys});
@@ -284,18 +288,18 @@ class AnExApp extends React.Component<any, any> {
type Point = {x: number, y: number};
function distance(p1: Point, p2: Point): number {
- var dx = p1.x - p2.x;
- var dy = p1.y - p2.y;
+ const dx = p1.x - p2.x;
+ const dy = p1.y - p2.y;
return dx * dx + dy * dy;
}
function moveToClosest({activeKey, keys, restLayouts}, position) {
- var activeIdx = -1;
- var closestIdx = activeIdx;
- var minDist = Infinity;
- var newKeys = [];
+ const activeIdx = -1;
+ let closestIdx = activeIdx;
+ let minDist = Infinity;
+ const newKeys = [];
keys.forEach((key, idx) => {
- var dist = distance(position, restLayouts[idx]);
+ const dist = distance(position, restLayouts[idx]);
if (key === activeKey) {
idx = activeIdx;
} else {
@@ -314,7 +318,7 @@ function moveToClosest({activeKey, keys, restLayouts}, position) {
}
}
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
container: {
flex: 1,
},
diff --git a/RNTester/js/AnimatedGratuitousApp/AnExBobble.js b/RNTester/js/AnimatedGratuitousApp/AnExBobble.js
index 68b5a136094c33..4be52c650f41b8 100644
--- a/RNTester/js/AnimatedGratuitousApp/AnExBobble.js
+++ b/RNTester/js/AnimatedGratuitousApp/AnExBobble.js
@@ -10,14 +10,14 @@
'use strict';
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, PanResponder, StyleSheet, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, PanResponder, StyleSheet, View} = ReactNative;
-var NUM_BOBBLES = 5;
-var RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
-var RADIUS = 160;
-var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => {
+const NUM_BOBBLES = 5;
+const RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
+const RADIUS = 160;
+const BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => {
// static positions
return i === 0
? {x: 0, y: 0}
@@ -36,12 +36,12 @@ class AnExBobble extends React.Component<Object, any> {
return new Animated.ValueXY();
});
this.state.selectedBobble = null;
- var bobblePanListener = (e, gestureState) => {
+ const bobblePanListener = (e, gestureState) => {
// async events => change selection
- var newSelected = computeNewSelected(gestureState);
+ const newSelected = computeNewSelected(gestureState);
if (this.state.selectedBobble !== newSelected) {
if (this.state.selectedBobble !== null) {
- var restSpot = BOBBLE_SPOTS[this.state.selectedBobble];
+ const restSpot = BOBBLE_SPOTS[this.state.selectedBobble];
Animated.spring(this.state.bobbles[this.state.selectedBobble], {
toValue: restSpot, // return previously selected bobble to rest position
}).start();
@@ -54,7 +54,7 @@ class AnExBobble extends React.Component<Object, any> {
this.state.selectedBobble = newSelected;
}
};
- var releaseBobble = () => {
+ const releaseBobble = () => {
this.state.bobbles.forEach((bobble, i) => {
Animated.spring(bobble, {
toValue: {x: 0, y: 0}, // all bobbles return to zero
@@ -84,8 +84,8 @@ class AnExBobble extends React.Component<Object, any> {
return (
<View style={styles.bobbleContainer}>
{this.state.bobbles.map((_, i) => {
- var j = this.state.bobbles.length - i - 1; // reverse so lead on top
- var handlers = j > 0 ? {} : this.state.bobbleResponder.panHandlers;
+ const j = this.state.bobbles.length - i - 1; // reverse so lead on top
+ const handlers = j > 0 ? {} : this.state.bobbleResponder.panHandlers;
return (
<Animated.Image
{...handlers}
@@ -106,7 +106,7 @@ class AnExBobble extends React.Component<Object, any> {
}
}
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
circle: {
position: 'absolute',
height: 60,
@@ -125,14 +125,14 @@ var styles = StyleSheet.create({
});
function computeNewSelected(gestureState: Object): ?number {
- var {dx, dy} = gestureState;
- var minDist = Infinity;
- var newSelected = null;
- var pointRadius = Math.sqrt(dx * dx + dy * dy);
+ const {dx, dy} = gestureState;
+ let minDist = Infinity;
+ let newSelected = null;
+ const pointRadius = Math.sqrt(dx * dx + dy * dy);
if (Math.abs(RADIUS - pointRadius) < 80) {
BOBBLE_SPOTS.forEach((spot, idx) => {
- var delta = {x: spot.x - dx, y: spot.y - dy};
- var dist = delta.x * delta.x + delta.y * delta.y;
+ const delta = {x: spot.x - dx, y: spot.y - dy};
+ const dist = delta.x * delta.x + delta.y * delta.y;
if (dist < minDist) {
minDist = dist;
newSelected = idx;
@@ -143,11 +143,11 @@ function computeNewSelected(gestureState: Object): ?number {
}
function randColor(): string {
- var colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
+ const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
return 'rgb(' + colors.join(',') + ')';
}
-var BOBBLE_IMGS = [
+const BOBBLE_IMGS = [
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xpf1/t39.1997-6/10173489_272703316237267_1025826781_n.png',
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/l/t39.1997-6/p240x240/851578_631487400212668_2087073502_n.png',
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/p240x240/851583_654446917903722_178118452_n.png',
diff --git a/RNTester/js/AnimatedGratuitousApp/AnExChained.js b/RNTester/js/AnimatedGratuitousApp/AnExChained.js
index 0a74da47d0bbaa..91e85e0b1714d6 100644
--- a/RNTester/js/AnimatedGratuitousApp/AnExChained.js
+++ b/RNTester/js/AnimatedGratuitousApp/AnExChained.js
@@ -10,9 +10,9 @@
'use strict';
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, PanResponder, StyleSheet, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, PanResponder, StyleSheet, View} = ReactNative;
class AnExChained extends React.Component<Object, any> {
constructor(props: Object) {
@@ -20,17 +20,17 @@ class AnExChained extends React.Component<Object, any> {
this.state = {
stickers: [new Animated.ValueXY()], // 1 leader
};
- var stickerConfig = {tension: 2, friction: 3}; // soft spring
- for (var i = 0; i < 4; i++) {
+ const stickerConfig = {tension: 2, friction: 3}; // soft spring
+ for (let i = 0; i < 4; i++) {
// 4 followers
- var sticker = new Animated.ValueXY();
+ const sticker = new Animated.ValueXY();
Animated.spring(sticker, {
...stickerConfig,
toValue: this.state.stickers[i], // Animated toValue's are tracked
}).start();
this.state.stickers.push(sticker); // push on the followers
}
- var releaseChain = (e, gestureState) => {
+ const releaseChain = (e, gestureState) => {
this.state.stickers[0].flattenOffset(); // merges offset into value and resets
Animated.sequence([
// spring to start after decay finishes
@@ -64,8 +64,8 @@ class AnExChained extends React.Component<Object, any> {
return (
<View style={styles.chained}>
{this.state.stickers.map((_, i) => {
- var j = this.state.stickers.length - i - 1; // reverse so leader is on top
- var handlers = j === 0 ? this.state.chainResponder.panHandlers : {};
+ const j = this.state.stickers.length - i - 1; // reverse so leader is on top
+ const handlers = j === 0 ? this.state.chainResponder.panHandlers : {};
return (
<Animated.Image
{...handlers}
@@ -85,7 +85,7 @@ class AnExChained extends React.Component<Object, any> {
}
}
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
chained: {
alignSelf: 'flex-end',
top: -160,
@@ -99,7 +99,7 @@ var styles = StyleSheet.create({
},
});
-var CHAIN_IMGS = [
+const CHAIN_IMGS = [
require('../hawk.png'),
require('../bunny.png'),
require('../relay.png'),
diff --git a/RNTester/js/AnimatedGratuitousApp/AnExScroll.js b/RNTester/js/AnimatedGratuitousApp/AnExScroll.js
index b51d889442aaf7..1920bc245e9fd6 100644
--- a/RNTester/js/AnimatedGratuitousApp/AnExScroll.js
+++ b/RNTester/js/AnimatedGratuitousApp/AnExScroll.js
@@ -10,15 +10,15 @@
'use strict';
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, Image, ScrollView, StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, Image, ScrollView, StyleSheet, Text, View} = ReactNative;
class AnExScroll extends React.Component<$FlowFixMeProps, any> {
state: any = {scrollX: new Animated.Value(0)};
render() {
- var width = this.props.panelWidth;
+ const width = this.props.panelWidth;
return (
<View style={styles.container}>
<ScrollView
@@ -80,7 +80,7 @@ class AnExScroll extends React.Component<$FlowFixMeProps, any> {
}
}
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
container: {
backgroundColor: 'transparent',
flex: 1,
@@ -104,11 +104,11 @@ var styles = StyleSheet.create({
},
});
-var HAWK_PIC = {
+const HAWK_PIC = {
uri:
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xfa1/t39.1997-6/10734304_1562225620659674_837511701_n.png',
};
-var BUNNY_PIC = {
+const BUNNY_PIC = {
uri:
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png',
};
diff --git a/RNTester/js/AnimatedGratuitousApp/AnExSet.js b/RNTester/js/AnimatedGratuitousApp/AnExSet.js
index f42702cc29a9d6..1d13a2d8601a0b 100644
--- a/RNTester/js/AnimatedGratuitousApp/AnExSet.js
+++ b/RNTester/js/AnimatedGratuitousApp/AnExSet.js
@@ -10,20 +10,20 @@
'use strict';
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, PanResponder, StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, PanResponder, StyleSheet, Text, View} = ReactNative;
-var AnExBobble = require('./AnExBobble');
-var AnExChained = require('./AnExChained');
-var AnExScroll = require('./AnExScroll');
-var AnExTilt = require('./AnExTilt');
+const AnExBobble = require('./AnExBobble');
+const AnExChained = require('./AnExChained');
+const AnExScroll = require('./AnExScroll');
+const AnExTilt = require('./AnExTilt');
class AnExSet extends React.Component<Object, any> {
constructor(props: Object) {
super(props);
function randColor() {
- var colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
+ const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
return 'rgb(' + colors.join(',') + ')';
}
this.state = {
@@ -32,7 +32,7 @@ class AnExSet extends React.Component<Object, any> {
};
}
render(): React.Node {
- var backgroundColor = this.props.openVal
+ const backgroundColor = this.props.openVal
? this.props.openVal.interpolate({
inputRange: [0, 1],
outputRange: [
@@ -41,7 +41,7 @@ class AnExSet extends React.Component<Object, any> {
],
})
: this.state.closeColor;
- var panelWidth =
+ const panelWidth =
(this.props.containerLayout && this.props.containerLayout.width) || 320;
return (
<View style={styles.container}>
@@ -98,7 +98,7 @@ class AnExSet extends React.Component<Object, any> {
}
}
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
container: {
flex: 1,
},
diff --git a/RNTester/js/AnimatedGratuitousApp/AnExTilt.js b/RNTester/js/AnimatedGratuitousApp/AnExTilt.js
index 6b518ee75e84b7..bcc389d8747a74 100644
--- a/RNTester/js/AnimatedGratuitousApp/AnExTilt.js
+++ b/RNTester/js/AnimatedGratuitousApp/AnExTilt.js
@@ -10,9 +10,9 @@
'use strict';
-var React = require('react');
-var ReactNative = require('react-native');
-var {Animated, PanResponder, StyleSheet} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {Animated, PanResponder, StyleSheet} = ReactNative;
class AnExTilt extends React.Component<Object, any> {
constructor(props: Object) {
@@ -37,7 +37,7 @@ class AnExTilt extends React.Component<Object, any> {
[null, {dx: this.state.panX}], // panX is linked to the gesture
),
onPanResponderRelease: (e, gestureState) => {
- var toValue = 0;
+ let toValue = 0;
if (gestureState.dx > 100) {
toValue = 500;
} else if (gestureState.dx < -100) {
@@ -50,7 +50,7 @@ class AnExTilt extends React.Component<Object, any> {
friction: 3,
}).start();
this.state.panX.removeAllListeners();
- var id = this.state.panX.addListener(({value}) => {
+ const id = this.state.panX.addListener(({value}) => {
// listen until offscreen
if (Math.abs(value) > 400) {
this.state.panX.removeListener(id); // offscreen, so stop listening
@@ -122,7 +122,7 @@ class AnExTilt extends React.Component<Object, any> {
}
}
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
tilt: {
overflow: 'hidden',
height: 200,
diff --git a/RNTester/js/createExamplePage.js b/RNTester/js/createExamplePage.js
index 781ac727e396c9..271057c3fb66a0 100644
--- a/RNTester/js/createExamplePage.js
+++ b/RNTester/js/createExamplePage.js
@@ -16,7 +16,7 @@ const RNTesterExampleContainer = require('./RNTesterExampleContainer');
import type {ExampleModule} from 'ExampleTypes';
-var createExamplePage = function(
+const createExamplePage = function(
title: ?string,
exampleModule: ExampleModule,
): React.ComponentType<any> {