Updates from Wed 18 Mar

- [ReactNative] Add AsyncStorageTest | Spencer Ahrens
- [ReactNative] Add timers integration test | Spencer Ahrens
- [ReactNative] Remove ExpandingText | Tadeu Zagallo
- [TouchableHighlight] Preserve underlay style when restoring inactive props | Christopher Chedeau
- clean flow errors in react-native-github | Basil Hosmer
- [ReactNative] Sort React Native exports into two groups, Components and APIs | Christopher Chedeau
- [ReactNative] Rename Slider to SliderIOS | Tadeu Zagallo
- [react_native] JS files from D1919491: Improve JS logging | Martin Kosiba
- [ReactNative] Add TimerExample | Spencer Ahrens
- [RFC][ReactNative] increase timer resolution | Spencer Ahrens
- [ReactNative] Strip prefixes from NativeModules keys | Spencer Ahrens
- [ReactNative] Small docs cleanup in ActivityIndicatorIOS and DatePickerIOS | Christopher Chedeau
- [ReactNative] Improvements on perf measurement output | Jing Chen
- [ReactNative] Clean up Touchable PropTypes | Christopher Chedeau
- [ReactKit] Fail tests when redbox shows up | Alex Kotliarskyi

Author: vjeux

.flowconfig

@@ -9,17 +9,14 @@
 
 # Ignore react-tools where there are overlaps, but don't ignore anything that
 # react-native relies on
-.*/node_modules/react-tools/src/vendor/.*
+.*/node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js
 .*/node_modules/react-tools/src/browser/.*
 .*/node_modules/react-tools/src/core/ReactInstanceHandles.js
 .*/node_modules/react-tools/src/event/.*
 
 # Ignore jest
 .*/react-native/node_modules/jest-cli/.*
 
-# Ignore Libraries
-.*/Libraries/.*
-
 [include]
 
 [libs]

Examples/2048/Game2048.js

@@ -129,11 +129,16 @@ class GameEndOverlay extends React.Component {
 }
 
 class Game2048 extends React.Component {
+  startX: number;
+  startY: number;
+
   constructor(props) {
     super(props);
     this.state = {
       board: new GameBoard(),
     };
+    this.startX = 0;
+    this.startY = 0;
   }
 
   restartGame() {

Examples/Movies/MovieScreen.js

@@ -6,7 +6,6 @@
 
 var React = require('react-native');
 var {
-  ExpandingText,
   Image,
   PixelRatio,
   ScrollView,
@@ -40,10 +39,9 @@ var MovieScreen = React.createClass({
           </View>
         </View>
         <View style={styles.separator} />
-        <ExpandingText
-          truncLength={200}
-          text={this.props.movie.synopsis}
-        />
+        <Text>
+          {this.props.movie.synopsis}
+        </Text>
         <View style={styles.separator} />
         <Cast actors={this.props.movie.abridged_cast} />
       </ScrollView>

Examples/UIExplorer/CameraRollExample.ios.js

@@ -7,7 +7,7 @@ var React = require('react-native');
 var {
   CameraRoll,
   Image,
-  Slider,
+  SliderIOS,
   StyleSheet,
   SwitchIOS,
   Text,
@@ -35,7 +35,7 @@ var CameraRollExample = React.createClass({
           onValueChange={this._onSwitchChange}
           value={this.state.bigImages} />
         <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
-        <Slider
+        <SliderIOS
           value={this.state.sliderValue}
           onValueChange={this._onSliderChange}
         />

Examples/UIExplorer/ExpandingTextExample.js

@@ -99,11 +99,11 @@ var ListViewPagingExample = React.createClass({
     };
   },
 
-  renderRow: function(rowData, sectionID, rowID) {
+  renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement {
     return (<Thumb text={rowData}/>);
   },
 
-  renderSectionHeader: function(sectionData, sectionID) {
+  renderSectionHeader: function(sectionData: string, sectionID: string) {
     return (
       <View style={styles.section}>
         <Text style={styles.text}>

Examples/UIExplorer/ListViewPagingExample.js

@@ -5,7 +5,7 @@
 
 var React = require('react-native');
 var {
-  Slider,
+  SliderIOS,
   Text,
   StyleSheet,
   View,
@@ -24,7 +24,7 @@ var SliderExample = React.createClass({
         <Text style={styles.text} >
           {this.state.value}
         </Text>
-        <Slider
+        <SliderIOS
           style={styles.slider}
           onValueChange={(value) => this.setState({value: value})} />
       </View>
@@ -45,11 +45,11 @@ var styles = StyleSheet.create({
   },
 });
 
-exports.title = '<Slider>';
+exports.title = '<SliderIOS>';
 exports.description = 'Slider input for numeric values';
 exports.examples = [
   {
-    title: 'Slider',
+    title: 'SliderIOS',
     render() { return <SliderExample />; }
   }
 ];

Examples/UIExplorer/SliderExample.js Examples/UIExplorer/SliderIOSExample.jsExamples/UIExplorer/SliderExample.js renamed to Examples/UIExplorer/SliderIOSExample.js

@@ -0,0 +1,193 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  AlertIOS,
+  StyleSheet,
+  Text,
+  TimerMixin,
+  TouchableHighlight,
+  View,
+} = React;
+
+var Button = React.createClass({
+  render: function() {
+    return (
+      <TouchableHighlight
+        onPress={this.props.onPress}
+        style={styles.button}
+        underlayColor="#eeeeee">
+        <Text>
+          {this.props.children}
+        </Text>
+      </TouchableHighlight>
+    );
+  },
+});
+
+var TimerTester = React.createClass({
+  mixins: [TimerMixin],
+
+  render: function() {
+    var args = 'fn' + (this.props.dt !== undefined ? ', ' + this.props.dt : '');
+    return (
+      <Button onPress={this._run}>
+        Measure: {this.props.type}({args}) - {this._ii || 0}
+      </Button>
+    );
+  },
+
+  _run: function() {
+    if (!this._start) {
+      var d = new Date();
+      this._start = d.getTime();
+      this._iters = 100;
+      this._ii = 0;
+      if (this.props.type === 'setTimeout') {
+        if (this.props.dt < 1) {
+          this._iters = 5000;
+        } else if (this.props.dt > 20) {
+          this._iters = 10;
+        }
+        this._timerFn = () => this.setTimeout(this._run, this.props.dt);
+      } else if (this.props.type === 'requestAnimationFrame') {
+        this._timerFn = () => this.requestAnimationFrame(this._run);
+      } else if (this.props.type === 'setImmediate') {
+        this._iters = 5000;
+        this._timerFn = () => this.setImmediate(this._run);
+      } else if (this.props.type === 'setInterval') {
+        this._iters = 30; // Only used for forceUpdate periodicidy
+        this._timerFn = null;
+        this._handle = this.setInterval(this._run, this.props.dt);
+      }
+    }
+    if (this._ii >= this._iters && !this._handle) {
+      var d = new Date();
+      var e = (d.getTime() - this._start);
+      var msg = 'Finished ' + this._ii + ' ' + this.props.type + ' calls.\n' +
+        'Elapsed time: ' + e + ' ms\n' + (e / this._ii) + ' ms / iter';
+      console.log(msg);
+      AlertIOS.alert(msg);
+      this._start = null;
+      this.forceUpdate(() => { this._ii = 0; });
+      return;
+    }
+    this._ii++;
+    // Only re-render occasionally so we don't slow down timers.
+    if (this._ii % (this._iters / 5) === 0) {
+      this.forceUpdate();
+    }
+    this._timerFn && this._timerFn();
+  },
+
+  clear: function() {
+    this.clearInterval(this._handle); // invalid handles are ignored
+    if (this._handle) {
+      // Configure things so we can do a final run to update UI and reset state.
+      this._handle = null;
+      this._iters = this._ii;
+      this._run();
+    }
+  },
+});
+
+var styles = StyleSheet.create({
+  button: {
+    borderColor: 'gray',
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 10,
+    margin: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+exports.framework = 'React';
+exports.title = 'Timers, TimerMixin';
+exports.description = 'The TimerMixin provides timer functions for executing ' +
+  'code in the future that are safely cleaned up when the component unmounts.';
+
+exports.examples = [
+  {
+    title: 'this.setTimeout(fn, t)',
+    description: 'Execute function fn t milliseconds in the future.  If ' +
+      't === 0, it will be enqueued immediately in the next event loop.  ' +
+      'Larger values will fire on the closest frame.',
+    render: function() {
+      return (
+        <View>
+          <TimerTester type="setTimeout" dt={0} />
+          <TimerTester type="setTimeout" dt={1} />
+          <TimerTester type="setTimeout" dt={100} />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'this.requestAnimationFrame(fn)',
+    description: 'Execute function fn on the next frame.',
+    render: function() {
+      return (
+        <View>
+          <TimerTester type="requestAnimationFrame" />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'this.setImmediate(fn)',
+    description: 'Execute function fn at the end of the current JS event loop.',
+    render: function() {
+      return (
+        <View>
+          <TimerTester type="setImmediate" />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'this.setInterval(fn, t)',
+    description: 'Execute function fn every t milliseconds until cancelled ' +
+      'or component is unmounted.',
+    render: function() {
+      var IntervalExample = React.createClass({
+        getInitialState: function() {
+          return {
+            showTimer: true,
+          };
+        },
+
+        render: function() {
+          if (this.state.showTimer) {
+            var timer =
+              <TimerTester ref="interval" dt={25} type="setInterval" />;
+            var toggleText = 'Unmount timer';
+          } else {
+            var timer = null;
+            var toggleText = 'Mount new timer';
+          }
+          return (
+            <View>
+              {timer}
+              <Button onPress={() => this.refs.interval.clear() }>
+                Clear interval
+              </Button>
+              <Button onPress={this._toggleTimer}>
+                {toggleText}
+              </Button>
+            </View>
+          );
+        },
+
+        _toggleTimer: function() {
+          this.setState({showTimer: !this.state.showTimer});
+        },
+      });
+      return <IntervalExample />;
+    },
+  },
+];