Updates from Fri 20 Mar

- declare timeoutID | Basil Hosmer
- [react-packager] Allow entry point extensions like .ios.js | Amjad Masad
- [react-native] Use SpreadProperty to make react-docgen happy | Felix Kling
- clean Examples/2048 | Basil Hosmer
- [ReactNative] Adjust packager default root when running from within node_modules | Alex Kotliarskyi
- [ReactNative] Add missing websocket dependency | Alex Kotliarskyi
- [react-packager] change all but one `ix` to `require` | Amjad Masad

Examples/2048/GameBoard.js

@@ -2,11 +2,12 @@
  * Copyright 2004-present Facebook. All Rights Reserved.
  *
  * @providesModule GameBoard
+ * @flow
  */
 'use strict';
 
 // NB: Taken straight from: https://github.com/IvanVergiliev/2048-react/blob/master/src/board.js
-//     with no modificiation except to format it for CommonJS and fix lint errors
+//     with no modificiation except to format it for CommonJS and fix lint/flow errors
 
 var rotateLeft = function (matrix) {
   var rows = matrix.length;
@@ -21,9 +22,10 @@ var rotateLeft = function (matrix) {
   return res;
 };
 
-var Tile = function (value, row, column) {
+var Tile = function (value?: number, row?: number, column?: number) {
   this.value = value || 0;
   this.row = row || -1;
+
   this.column = column || -1;
   this.oldRow = -1;
   this.oldColumn = -1;
@@ -102,8 +104,8 @@ Board.prototype.moveLeft = function () {
         targetTile.value += tile2.value;
       }
       resultRow[target] = targetTile;
-      this.won |= (targetTile.value === 2048);
-      hasChanged |= (targetTile.value !== this.cells[row][target].value);
+      this.won = this.won || (targetTile.value === 2048);
+      hasChanged = hasChanged || (targetTile.value !== this.cells[row][target].value);
     }
     this.cells[row] = resultRow;
   }
@@ -172,14 +174,14 @@ Board.prototype.hasLost = function () {
   var canMove = false;
   for (var row = 0; row < Board.size; ++row) {
     for (var column = 0; column < Board.size; ++column) {
-      canMove |= (this.cells[row][column].value === 0);
+      canMove = canMove || (this.cells[row][column].value === 0);
       for (var dir = 0; dir < 4; ++dir) {
         var newRow = row + Board.deltaX[dir];
         var newColumn = column + Board.deltaY[dir];
         if (newRow < 0 || newRow >= Board.size || newColumn < 0 || newColumn >= Board.size) {
           continue;
         }
-        canMove |= (this.cells[row][column].value === this.cells[newRow][newColumn].value);
+        canMove = canMove || (this.cells[row][column].value === this.cells[newRow][newColumn].value);
       }
     }
   }

Examples/Movies/SearchScreen.js

@@ -39,6 +39,8 @@ var LOADING = {};
 var SearchScreen = React.createClass({
   mixins: [TimerMixin],
 
+  timeoutID: (null: any),
+
   getInitialState: function() {
     return {
       isLoading: false,

Examples/UIExplorer/ImageCapInsetsExample.js

@@ -11,7 +11,6 @@ var {
   StyleSheet,
   Text,
   View,
-  ix,
 } = React;
 
 var ImageCapInsetsExample = React.createClass({
@@ -23,7 +22,7 @@ var ImageCapInsetsExample = React.createClass({
             capInsets: none
           </Text>
           <Image
-            source={ix('story-background')}
+            source={require('image!story-background')}
             style={styles.storyBackground}
             capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
           />
@@ -33,7 +32,7 @@ var ImageCapInsetsExample = React.createClass({
             capInsets: 15
           </Text>
           <Image
-            source={ix('story-background')}
+            source={require('image!story-background')}
             style={styles.storyBackground}
             capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
           />

Examples/UIExplorer/ImageExample.js

@@ -9,7 +9,6 @@ var {
   StyleSheet,
   Text,
   View,
-  ix,
 } = React;
 
 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
@@ -34,15 +33,15 @@ exports.examples = [
   },
   {
     title: 'Plain Static Image',
-    description: 'Static assets must be referenced with the `ix` wrapper and ' +
-      'located in the app bundle.',
+    description: 'Static assets should be required by prefixing with `image!` ' +
+      'and are located in the app bundle.',
     render: function() {
       return (
         <View style={styles.horizontal}>
-          <Image source={ix('uie_thumb_normal')} style={styles.icon} />
-          <Image source={ix('uie_thumb_selected')} style={styles.icon} />
-          <Image source={ix('uie_comment_normal')} style={styles.icon} />
-          <Image source={ix('uie_comment_highlighted')} style={styles.icon} />
+          <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
+          <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
+          <Image source={require('image!uie_comment_normal')} style={styles.icon} />
+          <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
         </View>
       );
     },
@@ -184,19 +183,19 @@ exports.examples = [
       return (
         <View style={styles.horizontal}>
           <Image
-            source={ix('uie_thumb_normal')}
+            source={require('image!uie_thumb_normal')}
             style={[styles.icon, {tintColor: 'blue' }]}
           />
           <Image
-            source={ix('uie_thumb_normal')}
+            source={require('image!uie_thumb_normal')}
             style={[styles.icon, styles.leftMargin, {tintColor: 'green' }]}
           />
           <Image
-            source={ix('uie_thumb_normal')}
+            source={require('image!uie_thumb_normal')}
             style={[styles.icon, styles.leftMargin, {tintColor: 'red' }]}
           />
           <Image
-            source={ix('uie_thumb_normal')}
+            source={require('image!uie_thumb_normal')}
             style={[styles.icon, styles.leftMargin, {tintColor: 'black' }]}
           />
         </View>

Examples/UIExplorer/TabBarExample.js

@@ -10,7 +10,6 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 
-var ix = require('ix');
 
 var TabBarExample = React.createClass({
 
@@ -42,7 +41,7 @@ var TabBarExample = React.createClass({
         selectedTab={this.state.selectedTab}>
         <TabBarItemIOS
           name="blueTab"
-          icon={ix('favorites')}
+          icon={require('image!favorites')}
           accessibilityLabel="Blue Tab"
           selected={this.state.selectedTab === 'blueTab'}
           onPress={() => {
@@ -55,7 +54,7 @@ var TabBarExample = React.createClass({
         <TabBarItemIOS
           accessibilityLabel="Red Tab"
           name="redTab"
-          icon={ix('history')}
+          icon={require('image!history')}
           badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
           selected={this.state.selectedTab === 'redTab'}
           onPress={() => {
@@ -68,7 +67,7 @@ var TabBarExample = React.createClass({
         </TabBarItemIOS>
         <TabBarItemIOS
           name="greenTab"
-          icon={ix('more')}
+          icon={require('image!more')}
           accessibilityLabel="Green Tab"
           selected={this.state.selectedTab === 'greenTab'}
           onPress={() => {