[0.26.3] Bump version numbers

Summary:
Reuses the original property descriptor when overwriting / polyfilling globals to ensure enumerability and writability are the same
Closes https://github.com/facebook/react-native/pull/7704

Differential Revision: D3338119

Pulled By: davidaurelio

fbshipit-source-id: ab456324a3346cd3ec8b2c3e3a2378408c92087c

.flowconfig

@@ -15,8 +15,6 @@
 # Ignore react and fbjs where there are overlaps, but don't ignore
 # anything that react-native relies on
 .*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/fetch.js
-.*/node_modules/fbjs/lib/ExecutionEnvironment.js
 .*/node_modules/fbjs/lib/ErrorUtils.js
 
 # Flow has a built-in definition for the 'react' module which we prefer to use
@@ -81,15 +79,15 @@ esproposal.class_instance_fields=enable
 munge_underscores=true
 
 module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.23.0
+0.24.0

.travis.yml

@@ -3,13 +3,12 @@ language: objective-c
 osx_image: xcode7.3
 
 install:
-  - brew update
-  - brew reinstall nvm xctool
   - mkdir -p /Users/travis/build/facebook/.nvm
   - export NVM_DIR="/Users/travis/build/facebook/.nvm"
+  - brew install nvm
   - source $(brew --prefix nvm)/nvm.sh
   # testing with npm@2 for diversity, Circle tests with npm@3
-  - nvm install 4.4.0
+  - nvm install 4.4.3
   - rm -Rf "${TMPDIR}/jest_preprocess_cache"
   - npm config set spin=false
   - npm config set progress=false
@@ -17,7 +16,7 @@ install:
 
 script:
   - if [[ "$TEST_TYPE" = objc ]]; then travis_retry ./scripts/objc-test.sh; fi
-  - if [[ "$TEST_TYPE" = e2e-objc ]]; then travis_retry node ./scripts/run-ci-e2e-tests.js --ios --js; fi
+  - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
   - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
   - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
 

Examples/2048/2048.xcodeproj/project.pbxproj

@@ -267,7 +267,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
 			};
@@ -285,7 +288,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
 			};

Examples/Movies/MovieCell.js

@@ -45,9 +45,6 @@ var MovieCell = React.createClass({
           onShowUnderlay={this.props.onHighlight}
           onHideUnderlay={this.props.onUnhighlight}>
           <View style={styles.row}>
-            {/* $FlowIssue #7363964 - There's a bug in Flow where you cannot
-              * omit a property or set it to undefined if it's inside a shape,
-              * even if it isn't required */}
             <Image
               source={getImageSource(this.props.movie, 'det')}
               style={styles.cellImage}

Examples/Movies/MovieScreen.js

@@ -34,9 +34,6 @@ var MovieScreen = React.createClass({
     return (
       <ScrollView contentContainerStyle={styles.contentContainer}>
         <View style={styles.mainSection}>
-          {/* $FlowIssue #7363964 - There's a bug in Flow where you cannot
-            * omit a property or set it to undefined if it's inside a shape,
-            * even if it isn't required */}
           <Image
             source={getImageSource(this.props.movie, 'det')}
             style={styles.detailsImage}

Examples/Movies/Movies.xcodeproj/project.pbxproj

@@ -357,7 +357,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/Movies/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = Movies;
 				USER_HEADER_SEARCH_PATHS = "$(SRCROOT)/../../Libraries/**";
@@ -376,7 +379,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/Movies/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = Movies;
 				USER_HEADER_SEARCH_PATHS = "$(SRCROOT)/../../Libraries/**";

Examples/Movies/__tests__/getImageSource-test.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-jest.dontMock('../getImageSource');
+jest.unmock('../getImageSource');
 
 var getImageSource = require('../getImageSource');
 

Examples/TicTacToe/TicTacToe.xcodeproj/project.pbxproj

@@ -327,7 +327,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/TicTacToe/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TicTacToe;
 			};
@@ -345,7 +348,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/TicTacToe/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TicTacToe;
 			};

Examples/UIExplorer/BorderExample.js

@@ -13,6 +13,7 @@
  */
 'use strict';
 
+var React = require('react');
 var ReactNative = require('react-native');
 var {
   StyleSheet,

Examples/UIExplorer/BoxShadowExample.js

@@ -13,6 +13,7 @@
  */
 'use strict';
 
+var React = require('react');
 var ReactNative = require('react-native');
 var {
   Image,

Examples/UIExplorer/LayoutAnimationExample.js

@@ -0,0 +1,171 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  LayoutAnimation,
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+} = ReactNative;
+
+const AddRemoveExample = React.createClass({
+
+  getInitialState() {
+    return {
+      views: [],
+    };
+  },
+
+  componentWillUpdate() {
+    LayoutAnimation.easeInEaseOut();
+  },
+
+  _onPressAddView() {
+    this.setState((state) => ({views: [...state.views, {}]}));
+  },
+
+  _onPressRemoveView() {
+    this.setState((state) => ({views: state.views.slice(0, -1)}));
+  },
+
+  render() {
+    const views = this.state.views.map((view, i) =>
+      <View key={i} style={styles.view}>
+        <Text>{i}</Text>
+      </View>
+    );
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity onPress={this._onPressAddView}>
+          <View style={styles.button}>
+            <Text>Add view</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={this._onPressRemoveView}>
+          <View style={styles.button}>
+            <Text>Remove view</Text>
+          </View>
+        </TouchableOpacity>
+        <View style={styles.viewContainer}>
+          {views}
+        </View>
+      </View>
+    );
+  },
+});
+
+const GreenSquare = () =>
+  <View style={styles.greenSquare}>
+    <Text>Green square</Text>
+  </View>;
+
+const BlueSquare = () =>
+  <View style={styles.blueSquare}>
+    <Text>Blue square</Text>
+  </View>;
+
+const CrossFadeExample = React.createClass({
+
+  getInitialState() {
+    return {
+      toggled: false,
+    };
+  },
+
+  _onPressToggle() {
+    LayoutAnimation.easeInEaseOut();
+    this.setState((state) => ({toggled: !state.toggled}));
+  },
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity onPress={this._onPressToggle}>
+          <View style={styles.button}>
+            <Text>Toggle</Text>
+          </View>
+        </TouchableOpacity>
+        <View style={styles.viewContainer}>
+          {
+            this.state.toggled ?
+            <GreenSquare /> :
+            <BlueSquare />
+          }
+        </View>
+      </View>
+    );
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  button: {
+    borderRadius: 5,
+    backgroundColor: '#eeeeee',
+    padding: 10,
+    marginBottom: 10,
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+  viewContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  view: {
+    height: 54,
+    width: 54,
+    backgroundColor: 'red',
+    margin: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  greenSquare: {
+    width: 150,
+    height: 150,
+    backgroundColor: 'green',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  blueSquare: {
+    width: 150,
+    height: 150,
+    backgroundColor: 'blue',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+exports.title = 'Layout Animation';
+exports.description = 'Layout animation';
+exports.examples = [{
+  title: 'Add and remove views',
+  render(): ReactElement {
+    return <AddRemoveExample />;
+  },
+}, {
+  title: 'Cross fade views',
+  render(): ReactElement {
+    return <CrossFadeExample />;
+  },
+}];

Examples/UIExplorer/ModalExample.js

@@ -66,7 +66,7 @@ var Button = React.createClass({
 var ModalExample = React.createClass({
   getInitialState() {
     return {
-      animated: true,
+      animationType: 'none',
       modalVisible: false,
       transparent: false,
     };
@@ -76,8 +76,8 @@ var ModalExample = React.createClass({
     this.setState({modalVisible: visible});
   },
 
-  _toggleAnimated() {
-    this.setState({animated: !this.state.animated});
+  _setAnimationType(type) {
+    this.setState({animationType: type});
   },
 
   _toggleTransparent() {
@@ -91,18 +91,21 @@ var ModalExample = React.createClass({
     var innerContainerTransparentStyle = this.state.transparent
       ? {backgroundColor: '#fff', padding: 20}
       : null;
+    var activeButtonStyle = {
+      backgroundColor: '#ddd'
+    };
 
     return (
       <View>
         <Modal
-          animated={this.state.animated}
+          animationType={this.state.animationType}
           transparent={this.state.transparent}
           visible={this.state.modalVisible}
           onRequestClose={() => {this._setModalVisible(false)}}
           >
           <View style={[styles.container, modalBackgroundStyle]}>
             <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
-              <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
+              <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
               <Button
                 onPress={this._setModalVisible.bind(this, false)}
                 style={styles.modalButton}>
@@ -111,10 +114,17 @@ var ModalExample = React.createClass({
             </View>
           </View>
         </Modal>
-
         <View style={styles.row}>
-          <Text style={styles.rowTitle}>Animated</Text>
-          <Switch value={this.state.animated} onValueChange={this._toggleAnimated} />
+          <Text style={styles.rowTitle}>Animation Type</Text>
+          <Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}>
+            none
+          </Button>
+          <Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}>
+            slide
+          </Button>
+          <Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}>
+            fade
+          </Button>
         </View>
 
         <View style={styles.row}>

Examples/UIExplorer/PushNotificationIOSExample.js

@@ -43,11 +43,17 @@ var Button = React.createClass({
 
 class NotificationExample extends React.Component {
   componentWillMount() {
+    // Add listener for push notifications
     PushNotificationIOS.addEventListener('notification', this._onNotification);
+    // Add listener for local notifications
+    PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification);
   }
 
   componentWillUnmount() {
+    // Remove listener for push notifications
     PushNotificationIOS.removeEventListener('notification', this._onNotification);
+    // Remove listener for local notifications
+    PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification);
   }
 
   render() {
@@ -57,6 +63,11 @@ class NotificationExample extends React.Component {
           onPress={this._sendNotification}
           label="Send fake notification"
         />
+
+        <Button
+          onPress={this._sendLocalNotification}
+          label="Send fake local notification"
+        />
       </View>
     );
   }
@@ -72,9 +83,31 @@ class NotificationExample extends React.Component {
     });
   }
 
+  _sendLocalNotification() {
+    require('RCTDeviceEventEmitter').emit('localNotificationReceived', {
+      aps: {
+        alert: 'Sample local notification',
+        badge: '+1',
+        sound: 'default',
+        category: 'REACT_NATIVE'
+      },
+    });
+  }
+
   _onNotification(notification) {
     AlertIOS.alert(
-      'Notification Received',
+      'Push Notification Received',
+      'Alert message: ' + notification.getMessage(),
+      [{
+        text: 'Dismiss',
+        onPress: null,
+      }]
+    );
+  }
+
+  _onLocalNotification(notification){
+    AlertIOS.alert(
+      'Local Notification Received',
       'Alert message: ' + notification.getMessage(),
       [{
         text: 'Dismiss',

Examples/UIExplorer/TabBarIOSExample.js

@@ -54,6 +54,7 @@ var TabBarExample = React.createClass({
   render: function() {
     return (
       <TabBarIOS
+        unselectedTintColor="yellow"
         tintColor="white"
         barTintColor="darkslateblue">
         <TabBarIOS.Item
@@ -81,6 +82,7 @@ var TabBarExample = React.createClass({
         </TabBarIOS.Item>
         <TabBarIOS.Item
           icon={require('./flux.png')}
+          renderAsOriginal
           title="More"
           selected={this.state.selectedTab === 'greenTab'}
           onPress={() => {

Examples/UIExplorer/TextExample.ios.js

@@ -155,19 +155,19 @@ exports.examples = [
   render: function() {
     return (
       <View>
-        <Text style={{fontWeight: '100'}}>
+        <Text style={{fontSize: 20, fontWeight: '100'}}>
           Move fast and be ultralight
         </Text>
-        <Text style={{fontWeight: '200'}}>
+        <Text style={{fontSize: 20, fontWeight: '200'}}>
           Move fast and be light
         </Text>
-        <Text style={{fontWeight: 'normal'}}>
+        <Text style={{fontSize: 20, fontWeight: 'normal'}}>
           Move fast and be normal
         </Text>
-        <Text style={{fontWeight: 'bold'}}>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>
           Move fast and be bold
         </Text>
-        <Text style={{fontWeight: '900'}}>
+        <Text style={{fontSize: 20, fontWeight: '900'}}>
           Move fast and be ultrabold
         </Text>
       </View>

Examples/UIExplorer/TextInputExample.android.js

@@ -407,6 +407,31 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'fontFamily, fontWeight and fontStyle',
+    render: function() {
+      return (
+        <View>
+          <TextInput 
+            style={[styles.singleLine, {fontFamily: 'sans-serif'}]}
+            placeholder="Custom fonts like Sans-Serif are supported"
+          />
+          <TextInput 
+            style={[styles.singleLine, {fontFamily: 'sans-serif', fontWeight: 'bold'}]}
+            placeholder="Sans-Serif bold"
+          />
+          <TextInput 
+            style={[styles.singleLine, {fontFamily: 'sans-serif', fontStyle: 'italic'}]}
+            placeholder="Sans-Serif italic"
+          />
+          <TextInput 
+            style={[styles.singleLine, {fontFamily: 'serif'}]}
+            placeholder="Serif"
+          />
+        </View>
+      );
+    }
+  },
   {
     title: 'Passwords',
     render: function() {

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -955,10 +955,6 @@
 		004D28A61AAF61C70097A701 /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
-				FRAMEWORK_SEARCH_PATHS = (
-					"$(SDKROOT)/Developer/Library/Frameworks",
-					"$(inherited)",
-				);
 				GCC_PREPROCESSOR_DEFINITIONS = "$(inherited)";
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
@@ -972,12 +968,6 @@
 					"$(inherited)",
 					"$(PROJECT_DIR)/UIExplorerUnitTests",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-framework",
-					XCTest,
-					"-ObjC",
-				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 			};
@@ -986,10 +976,6 @@
 		004D28A71AAF61C70097A701 /* Release */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
-				FRAMEWORK_SEARCH_PATHS = (
-					"$(SDKROOT)/Developer/Library/Frameworks",
-					"$(inherited)",
-				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../../React/**",
@@ -1002,12 +988,6 @@
 					"$(inherited)",
 					"$(PROJECT_DIR)/UIExplorerUnitTests",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-framework",
-					XCTest,
-					"-ObjC",
-				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 			};
@@ -1027,7 +1007,6 @@
 				INFOPLIST_FILE = "$(SRCROOT)/UIExplorer/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited)";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.react.uiapp;
 				PRODUCT_NAME = UIExplorer;
 				TARGETED_DEVICE_FAMILY = "1,2";
@@ -1053,7 +1032,6 @@
 				INFOPLIST_FILE = "$(SRCROOT)/UIExplorer/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited)";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.react.uiapp;
 				PRODUCT_NAME = UIExplorer;
 				TARGETED_DEVICE_FAMILY = "1,2";
@@ -1071,10 +1049,6 @@
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				FRAMEWORK_SEARCH_PATHS = (
-					"$(SDKROOT)/Developer/Library/Frameworks",
-					"$(inherited)",
-				);
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"$(inherited)",
@@ -1083,12 +1057,6 @@
 				INFOPLIST_FILE = UIExplorerIntegrationTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.3;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-framework",
-					XCTest,
-					"-ObjC",
-				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.React.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/UIExplorer.app/UIExplorer";
@@ -1101,20 +1069,10 @@
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				FRAMEWORK_SEARCH_PATHS = (
-					"$(SDKROOT)/Developer/Library/Frameworks",
-					"$(inherited)",
-				);
 				GCC_NO_COMMON_BLOCKS = YES;
 				INFOPLIST_FILE = UIExplorerIntegrationTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.3;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-framework",
-					XCTest,
-					"-ObjC",
-				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.React.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/UIExplorer.app/UIExplorer";
@@ -1178,6 +1136,10 @@
 				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				SDKROOT = iphoneos;
 				WARNING_CFLAGS = (
 					"-Wextra",
@@ -1236,6 +1198,10 @@
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
 				WARNING_CFLAGS = (

Examples/UIExplorer/UIExplorerExampleList.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -15,26 +22,21 @@
  */
 'use strict';
 
+const ListView = require('ListView');
 const React = require('react');
-const ReactNative = require('react-native');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TextInput = require('TextInput');
+const NavigationContainer = require('NavigationContainer');
+const TouchableHighlight = require('TouchableHighlight');
+const View = require('View');
 const UIExplorerActions = require('./UIExplorerActions');
-const {
-  ListView,
-  NavigationExperimental,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableHighlight,
-  View,
-} = ReactNative;
+
 const createExamplePage = require('./createExamplePage');
-const {
-  Container: NavigationContainer,
-} = NavigationExperimental;
 
 import type {
   UIExplorerExample,
-} from './UIExplorerList.ios'
+} from './UIExplorerList.ios';
 
 const ds = new ListView.DataSource({
   rowHasChanged: (r1, r2) => r1 !== r2,
@@ -154,7 +156,7 @@ class UIExplorerExampleList extends React.Component {
   }
 
   _handleRowPress(exampleKey: string): void {
-    this.props.onNavigate(UIExplorerActions.ExampleAction(exampleKey))
+    this.props.onNavigate(UIExplorerActions.ExampleAction(exampleKey));
   }
 }
 
@@ -167,7 +169,7 @@ function makeRenderable(example: any): ReactClass<any> {
 UIExplorerExampleList = NavigationContainer.create(UIExplorerExampleList);
 UIExplorerExampleList.makeRenderable = makeRenderable;
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   listContainer: {
     flex: 1,
   },

Examples/UIExplorer/UIExplorerList.android.js

@@ -40,8 +40,8 @@ var ComponentExamples: Array<UIExplorerExample> = [
     module: require('./ModalExample'),
   },
   {
-    key: 'PickerAndroidExample',
-    module: require('./PickerAndroidExample'),
+    key: 'PickerExample',
+    module: require('./PickerExample'),
   },
   {
     key: 'ProgressBarAndroidExample',
@@ -138,6 +138,10 @@ const APIExamples = [
     key: 'LinkingExample',
     module: require('./LinkingExample'),
   },
+  {
+    key: 'LayoutAnimationExample',
+    module: require('./LayoutAnimationExample'),
+  },
   {
     key: 'LayoutExample',
     module: require('./LayoutExample'),
@@ -174,6 +178,10 @@ const APIExamples = [
     key: 'VibrationExample',
     module: require('./VibrationExample'),
   },
+  {
+    key: 'WebSocketExample',
+    module: require('./WebSocketExample'),
+  },
   {
     key: 'XHRExample',
     module: require('./XHRExample'),

Examples/UIExplorer/UIExplorerList.ios.js

@@ -69,6 +69,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'NavigatorIOSExample',
     module: require('./NavigatorIOSExample'),
   },
+  {
+    key: 'PickerExample',
+    module: require('./PickerExample'),
+  },
   {
     key: 'PickerIOSExample',
     module: require('./PickerIOSExample'),
@@ -144,6 +148,10 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'AdSupportIOSExample',
     module: require('./AdSupportIOSExample'),
   },
+  {
+    key: 'AlertExample',
+    module: require('./AlertExample').AlertExample,
+  },
   {
     key: 'AlertIOSExample',
     module: require('./AlertIOSExample'),
@@ -192,6 +200,10 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'ImageEditingExample',
     module: require('./ImageEditingExample'),
   },
+  {
+    key: 'LayoutAnimationExample',
+    module: require('./LayoutAnimationExample'),
+  },
   {
     key: 'LayoutExample',
     module: require('./LayoutExample'),
@@ -248,6 +260,10 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'VibrationExample',
     module: require('./VibrationExample'),
   },
+  {
+    key: 'WebSocketExample',
+    module: require('./WebSocketExample'),
+  },
   {
     key: 'XHRExample',
     module: require('./XHRExample.ios'),

Examples/UIExplorer/UIExplorerUnitTests/RCTImageUtilTests.m

@@ -133,52 +133,4 @@ RCTAssertEqualSizes(a.size, b.size); \
   RCTAssertEqualRects(expected, result);
 }
 
-- (void)testPlaceholderImage
-{
-  CGSize size = {45, 22};
-  CGFloat expectedScale = 1.0;
-  UIImage *image = RCTGetPlaceholderImage(size, nil);
-  RCTAssertEqualSizes(size, image.size);
-  XCTAssertEqual(expectedScale, image.scale);
-}
-
-- (void)testPlaceholderNonintegralSize
-{
-  CGSize size = {3.0/2, 7.0/3};
-  CGFloat expectedScale = 6;
-  CGSize pixelSize = {
-    round(size.width * expectedScale),
-    round(size.height * expectedScale)
-  };
-  UIImage *image = RCTGetPlaceholderImage(size, nil);
-  RCTAssertEqualSizes(size, image.size);
-  XCTAssertEqual(pixelSize.width, CGImageGetWidth(image.CGImage));
-  XCTAssertEqual(pixelSize.height, CGImageGetHeight(image.CGImage));
-  XCTAssertEqual(expectedScale, image.scale);
-}
-
-- (void)testPlaceholderSquareImage
-{
-  CGSize size = {333, 333};
-  CGFloat expectedScale = 1.0/333;
-  CGSize pixelSize = {1, 1};
-  UIImage *image = RCTGetPlaceholderImage(size, nil);
-  RCTAssertEqualSizes(size, image.size);
-  XCTAssertEqual(pixelSize.width, CGImageGetWidth(image.CGImage));
-  XCTAssertEqual(pixelSize.height, CGImageGetHeight(image.CGImage));
-  XCTAssertEqual(expectedScale, image.scale);
-}
-
-- (void)testPlaceholderNonsquareImage
-{
-  CGSize size = {640, 480};
-  CGFloat expectedScale = 1.0/160;
-  CGSize pixelSize = {4, 3};
-  UIImage *image = RCTGetPlaceholderImage(size, nil);
-  RCTAssertEqualSizes(size, image.size);
-  XCTAssertEqual(pixelSize.width, CGImageGetWidth(image.CGImage));
-  XCTAssertEqual(pixelSize.height, CGImageGetHeight(image.CGImage));
-  XCTAssertEqual(expectedScale, image.scale);
-}
-
 @end

Examples/UIExplorer/UIExplorerUnitTests/RCTJSCExecutorTests.m

@@ -19,8 +19,6 @@
 #import "RCTJSCExecutor.h"
 #import "RCTUtils.h"
 
-#define RUN_PERF_TESTS 0
-
 @interface RCTJSCExecutorTests : XCTestCase
 
 @end
@@ -49,164 +47,4 @@
   [_executor invalidate];
 }
 
-#if RUN_PERF_TESTS
-
-static uint64_t _get_time_nanoseconds(void)
-{
-  static struct mach_timebase_info tb_info = {0, 0};
-  static dispatch_once_t onceToken;
-  dispatch_once(&onceToken, ^{
-    int ret = mach_timebase_info(&tb_info);
-    assert(0 == ret);
-  });
-
-  return (mach_absolute_time() * tb_info.numer) / tb_info.denom;
-}
-
-- (void)testDeserializationPerf
-{
-  // This test case checks the assumption that deserializing objects from JavaScript
-  // values one-by-one via ObjC JSC API is slower than using JSON string
-  // You might want to switch your tests schema to "Release" build configuration
-
-  JSContextGroupRef group = JSContextGroupCreate();
-  JSGlobalContextRef context = JSGlobalContextCreateInGroup(group, NULL);
-  id message = @[@[@1, @2, @3, @4], @[@{@"a": @1}, @{@"b": @2}], (id)kCFNull];
-  NSString *code = RCTJSONStringify(message, NULL);
-  JSStringRef script = JSStringCreateWithCFString((__bridge CFStringRef)code);
-  JSValueRef error = NULL;
-  JSValueRef value = JSEvaluateScript(context, script, NULL, NULL, 0, &error);
-  XCTAssertTrue(error == NULL);
-
-  id obj;
-  uint64_t start = _get_time_nanoseconds();
-  for (int i = 0; i < 10000; i++) {
-    JSStringRef jsonJSString = JSValueCreateJSONString(context, value, 0, nil);
-    NSString *jsonString = (__bridge NSString *)JSStringCopyCFString(kCFAllocatorDefault, jsonJSString);
-    JSStringRelease(jsonJSString);
-
-    obj = RCTJSONParse(jsonString, NULL);
-  }
-  NSLog(@"JSON Parse time: %.2fms", (_get_time_nanoseconds() - start) / 1000000.0);
-
-  JSStringRelease(script);
-  JSGlobalContextRelease(context);
-  JSContextGroupRelease(group);
-}
-
-- (void)testJavaScriptCallSpeed
-{
-/**
- * Since we almost don't change the RCTJSCExecutor logic, and this test is
- * very likely to become flaky (specially across different devices) leave it
- * to be run manually
- *
- * Previous Values: If you change the executor code, you should update this values
- */
-
-  int const runs = 4e5;
-  int const frequency = 10;
-  double const threshold = 0.1;
-  static double const expectedTimes[] = {
-    0x1.6199943826cf1p+13,
-    0x1.a3bc0a81551c3p+13,
-    0x1.d49fbb8602fe3p+13,
-    0x1.d1f64085ecb7bp+13,
-  };
-
-  dispatch_semaphore_t semaphore = dispatch_semaphore_create(0);
-  NSString *script = @" \
-    var modules = { \
-      module: { \
-        method: function () { \
-          return true; \
-        } \
-      } \
-    }; \
-    var Bridge = { \
-      callFunctionReturnFlushedQueue: function(module, method, args) { \
-        modules[module].apply(modules[module], args); \
-      } \
-    }; \
-    function require(module) { \
-      return Bridge; \
-    } \
-  ";
-
-  [_executor executeApplicationScript:[script dataUsingEncoding:NSUTF8StringEncoding] sourceURL:[NSURL URLWithString:@"http://localhost:8081/"] onComplete:^(__unused NSError *error) {
-    NSMutableArray *params = [NSMutableArray new];
-    id data = @1;
-    for (int i = 0; i < 4; i++) {
-      double samples[runs / frequency];
-      int size = runs / frequency;
-      double total = 0;
-      for (int j = 0; j < runs; j++) {
-        @autoreleasepool {
-          double start = _get_time_nanoseconds();
-          [_executor callFunctionOnModule:@"module"
-                                   method:@"method"
-                                arguments:params
-                                 callback:^(__unused id json, __unused NSError *unused) {
-                                 }];
-          double run = _get_time_nanoseconds() - start;
-          if ((j % frequency) == frequency - 1) { // Warmup
-            total += run;
-            samples[j/frequency] = run;
-          }
-        }
-      }
-
-      double mean = total / size;
-      double variance = 0;
-
-      for (int j = 0; j < size; j++) {
-        variance += pow(samples[j] - mean, 2);
-      }
-      variance /= size;
-
-      double standardDeviation = sqrt(variance);
-      double marginOfError = standardDeviation * 1.645;
-
-      double lower = mean - marginOfError;
-      double upper = mean + marginOfError;
-
-      int s = 0;
-      total = 0;
-      for (int j = 0; j < size; j++) {
-        double v = samples[j];
-        if (v >= lower && v <= upper) {
-          samples[s++] = v;
-          total += v;
-        }
-      }
-      mean = total / s;
-
-      lower = mean * (1.0 - threshold);
-      upper = mean * (1.0 + threshold);
-
-      double expected = expectedTimes[i];
-
-      NSLog(@"Previous: %lf, New: %f -> %a", expected, mean, mean);
-      if (upper < expected) {
-        NSLog(@"You made JS calls with %d argument(s) %.2lf%% faster :) - Remember to update the tests with the new value: %a",
-                      i, (1 - (double)mean / expected) * 100, mean);
-      }
-
-
-      XCTAssertTrue(lower < expected, @"You made JS calls with %d argument(s) %.2lf%% slower :( - If that's *really* necessary, update the tests with the new value: %a",
-        i, ((double)mean / expected - 1) * 100, mean);
-
-      [params addObject:data];
-    }
-    dispatch_semaphore_signal(semaphore);
-  }];
-
-  while (dispatch_semaphore_wait(semaphore, DISPATCH_TIME_NOW)) {
-    [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode
-                             beforeDate:[NSDate dateWithTimeIntervalSinceNow:10]];
-  }
-}
-
-#endif
-
 @end

Examples/UIExplorer/UIExplorerUnitTests/RCTModuleInitTests.m

@@ -221,10 +221,16 @@ RCT_EXPORT_MODULE()
 
 - (void)testCustomSetBridgeModuleInitializedAtBridgeStartup
 {
-  RUN_RUNLOOP_WHILE(!_customSetBridgeModuleNotificationSent);
+  XCTAssertFalse(_customSetBridgeModuleNotificationSent);
+
+  __block RCTTestCustomSetBridgeModule *module;
+  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
+    module = [_bridge moduleForClass:[RCTTestCustomSetBridgeModule class]];
+  });
+
+  RUN_RUNLOOP_WHILE(!module);
   XCTAssertTrue(_customSetBridgeModuleNotificationSent);
-  RCTTestCustomSetBridgeModule *module = [_bridge moduleForClass:[RCTTestCustomSetBridgeModule class]];
-  XCTAssertTrue(module.setBridgeOnMainThread);
+  XCTAssertFalse(module.setBridgeOnMainThread);
   XCTAssertEqual(module.bridge, _bridge.batchedBridge);
   XCTAssertNotNil(module.methodQueue);
 }

Examples/UIExplorer/WebSocketExample.js

@@ -0,0 +1,286 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+/* eslint-env browser */
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  PixelRatio,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} = ReactNative;
+
+const DEFAULT_WS_URL = 'ws://localhost:5555/';
+const WS_EVENTS = [
+  'close',
+  'error',
+  'message',
+  'open',
+];
+const WS_STATES = [
+  /* 0 */ 'CONNECTING',
+  /* 1 */ 'OPEN',
+  /* 2 */ 'CLOSING',
+  /* 3 */ 'CLOSED',
+];
+
+class Button extends React.Component {
+  render(): ReactElement {
+    const label = <Text style={styles.buttonLabel}>{this.props.label}</Text>;
+    if (this.props.disabled) {
+      return (
+        <View style={[styles.button, styles.disabledButton]}>
+          {label}
+        </View>
+      );
+    }
+    return (
+      <TouchableOpacity
+        onPress={this.props.onPress}
+        style={styles.button}>
+        {label}
+      </TouchableOpacity>
+    );
+  }
+}
+
+class Row extends React.Component {
+  render(): ReactElement {
+    return (
+      <View style={styles.row}>
+        <Text>{this.props.label}</Text>
+        <Text>{this.props.value}</Text>
+      </View>
+    );
+  }
+}
+
+function showValue(value) {
+  if (value === undefined || value === null) {
+    return '(no value)';
+  }
+  console.log('typeof Uint8Array', typeof Uint8Array);
+  if (typeof ArrayBuffer !== 'undefined' &&
+      typeof Uint8Array !== 'undefined' &&
+      value instanceof ArrayBuffer) {
+    return `ArrayBuffer {${Array.from(new Uint8Array(value))}}`;
+  }
+  return value;
+}
+
+type State = {
+  url: string;
+  socket: ?WebSocket;
+  socketState: ?number;
+  lastSocketEvent: ?string;
+  lastMessage: ?string | ?ArrayBuffer;
+  outgoingMessage: string;
+};
+
+class WebSocketExample extends React.Component<any, any, State> {
+
+  static title = 'WebSocket';
+  static description = 'WebSocket API';
+
+  state: State = {
+    url: DEFAULT_WS_URL,
+    socket: null,
+    socketState: null,
+    lastSocketEvent: null,
+    lastMessage: null,
+    outgoingMessage: '',
+  };
+
+  _connect = () => {
+    const socket = new WebSocket(this.state.url);
+    WS_EVENTS.forEach(ev => socket.addEventListener(ev, this._onSocketEvent));
+    this.setState({
+      socket,
+      socketState: socket.readyState,
+    });
+  };
+
+  _disconnect = () => {
+    if (!this.state.socket) {
+      return;
+    }
+    this.state.socket.close();
+  };
+
+  // Ideally this would be a MessageEvent, but Flow's definition
+  // doesn't inherit from Event, so it's 'any' for now.
+  // See https://github.com/facebook/flow/issues/1654.
+  _onSocketEvent = (event: any) => {
+    const state: any = {
+      socketState: event.target.readyState,
+      lastSocketEvent: event.type,
+    };
+    if (event.type === 'message') {
+      state.lastMessage = event.data;
+    }
+    this.setState(state);
+  };
+
+  _sendText = () => {
+    if (!this.state.socket) {
+      return;
+    }
+    this.state.socket.send(this.state.outgoingMessage);
+    this.setState({outgoingMessage: ''});
+  };
+
+  _sendBinary = () => {
+    if (!this.state.socket ||
+        typeof ArrayBuffer === 'undefined' ||
+        typeof Uint8Array === 'undefined') {
+      return;
+    }
+    const {outgoingMessage} = this.state;
+    const buffer = new Uint8Array(outgoingMessage.length);
+    for (let i = 0; i < outgoingMessage.length; i++) {
+      buffer[i] = outgoingMessage.charCodeAt(i);
+    }
+    this.state.socket.send(buffer);
+    this.setState({outgoingMessage: ''});
+  };
+
+  render(): ReactElement {
+    const socketState = WS_STATES[this.state.socketState || -1];
+    const canConnect =
+      !this.state.socket ||
+      this.state.socket.readyState >= WebSocket.CLOSING;
+    const canSend = !!this.state.socket;
+    return (
+      <View style={styles.container}>
+        <View style={styles.note}>
+          <Text>Pro tip:</Text>
+          <Text style={styles.monospace}>
+            node Examples/UIExplorer/websocket_test_server.js
+          </Text>
+          <Text>
+            {' in the '}
+            <Text style={styles.monospace}>react-native</Text>
+            {' directory starts a test server.'}
+          </Text>
+        </View>
+        <Row
+          label="Current WebSocket state"
+          value={showValue(socketState)}
+        />
+        <Row
+          label="Last WebSocket event"
+          value={showValue(this.state.lastSocketEvent)}
+        />
+        <Row
+          label="Last message received"
+          value={showValue(this.state.lastMessage)}
+        />
+        <TextInput
+          style={styles.textInput}
+          autoCorrect={false}
+          placeholder="Server URL..."
+          onChangeText={(url) => this.setState({url})}
+          value={this.state.url}
+        />
+        <Button
+          onPress={this._connect}
+          label="Connect"
+          disabled={!canConnect}
+        />
+        <Button
+          onPress={this._disconnect}
+          label="Disconnect"
+          disabled={canConnect}
+        />
+        <TextInput
+          style={styles.textInput}
+          autoCorrect={false}
+          placeholder="Type message here..."
+          onChangeText={(outgoingMessage) => this.setState({outgoingMessage})}
+          value={this.state.outgoingMessage}
+        />
+        <View style={styles.buttonRow}>
+          <Button
+            onPress={this._sendText}
+            label="Send as text"
+            disabled={!canSend}
+          />
+          <Button
+            onPress={this._sendBinary}
+            label="Send as binary"
+            disabled={!canSend}
+          />
+        </View>
+      </View>
+    );
+  }
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  note: {
+    padding: 8,
+    margin: 4,
+    backgroundColor: 'white',
+  },
+  monospace: {
+    fontFamily: 'courier',
+    fontSize: 11,
+  },
+  row: {
+    height: 40,
+    padding: 4,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderColor: 'grey',
+  },
+  button: {
+    margin: 8,
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: 'blue',
+    alignSelf: 'center',
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+  buttonLabel: {
+    color: 'white',
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  textInput: {
+    height: 40,
+    backgroundColor: 'white',
+    margin: 8,
+    padding: 8,
+  },
+});
+
+module.exports = WebSocketExample;

Examples/UIExplorer/XHRExampleCookies.js

@@ -22,6 +22,7 @@ var {
   Text,
   TouchableHighlight,
   View,
+  WebView,
 } = ReactNative;
 
 var RCTNetworking = require('RCTNetworking');
@@ -45,6 +46,7 @@ class XHRExampleCookies extends React.Component {
     var url = `https://${domain}/cookies/set?a=${a}&b=${b}`;
     fetch(url).then((response) => {
       this.setStatus(`Cookies a=${a}, b=${b} set`);
+      this.refreshWebview();
     });
 
     this.setState({
@@ -59,6 +61,7 @@ class XHRExampleCookies extends React.Component {
       return response.json();
     }).then((data) => {
       this.setStatus(`Got cookies ${JSON.stringify(data.cookies)} from server`);
+      this.refreshWebview();
     });
 
     this.setStatus('Getting cookies...');
@@ -67,9 +70,14 @@ class XHRExampleCookies extends React.Component {
   clearCookies() {
     RCTNetworking.clearCookies((cleared) => {
       this.setStatus('Cookies cleared, had cookies=' + cleared);
+      this.refreshWebview();
     });
   }
 
+  refreshWebview() {
+    this.refs.webview.reload();
+  }
+
   setStatus(status: string) {
     this.setState({status});
   }
@@ -113,6 +121,18 @@ class XHRExampleCookies extends React.Component {
           </View>
         </TouchableHighlight>
         <Text>{this.state.status}</Text>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.refreshWebview.bind(this)}>
+          <View style={styles.button}>
+            <Text>Refresh Webview</Text>
+          </View>
+        </TouchableHighlight>
+        <WebView
+          ref="webview"
+          source={{uri: 'http://httpbin.org/cookies'}}
+          style={{height: 100}}
+        />
       </View>
     );
   }

Examples/UIExplorer/websocket_test_server.js

@@ -0,0 +1,43 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+/* eslint-env node */
+
+const WebSocket = require('ws');
+
+console.log(`\
+Test server for WebSocketExample
+
+This will send each incoming message right back to the other side.a
+Restart with the '--binary' command line flag to have it respond with an
+ArrayBuffer instead of a string.
+`);
+
+const respondWithBinary = process.argv.indexOf('--binary') !== -1;
+const server = new WebSocket.Server({port: 5555});
+server.on('connection', (ws) => {
+  ws.on('message', (message) => {
+    console.log('Received message:', message);
+    if (respondWithBinary) {
+      message = new Buffer(message);
+    }
+    ws.send(message);
+  });
+
+  console.log('Incoming connection!');
+  ws.send('Why hello there!');
+});

IntegrationTests/RCTRootViewIntegrationTestApp.js

@@ -10,7 +10,7 @@
  */
 'use strict';
 
-require('regenerator/runtime');
+require('regenerator-runtime/runtime');
 
 var React = require('react');
 var ReactNative = require('react-native');

Libraries/ART/ReactNativeART.js

@@ -23,7 +23,7 @@ var merge = require('merge');
 // Diff Helpers
 
 function arrayDiffer(a, b) {
-  if (a == null) {
+  if (a == null || b == null) {
     return true;
   }
   if (a.length !== b.length) {

Libraries/Animated/src/AnimatedImplementation.js

@@ -82,7 +82,7 @@ type AnimationConfig = {
 class Animation {
   __active: bool;
   __isInteraction: bool;
-  __nativeTag: number;
+  __nativeId: number;
   __onEnd: ?EndCallback;
   start(
     fromValue: number,
@@ -91,7 +91,11 @@ class Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue
   ): void {}
-  stop(): void {}
+  stop(): void {
+    if (this.__nativeId) {
+      NativeAnimatedAPI.stopAnimation(this.__nativeId);
+    }
+  }
   _getNativeAnimationConfig(): any {
     // Subclasses that have corresponding animation implementation done in native
     // should override this method
@@ -105,9 +109,9 @@ class Animation {
   }
   __startNativeAnimation(animatedValue: AnimatedValue): void {
     animatedValue.__makeNative();
-    this.__nativeTag = NativeAnimatedHelper.generateNewAnimationTag();
+    this.__nativeId = NativeAnimatedHelper.generateNewAnimationId();
     NativeAnimatedAPI.startAnimatingNode(
-      this.__nativeTag,
+      this.__nativeId,
       animatedValue.__getNativeTag(),
       this._getNativeAnimationConfig(),
       this.__debouncedOnEnd.bind(this)
@@ -311,6 +315,7 @@ class TimingAnimation extends Animation {
   }
 
   stop(): void {
+    super.stop();
     this.__active = false;
     clearTimeout(this._timeout);
     window.cancelAnimationFrame(this._animationFrame);
@@ -381,6 +386,7 @@ class DecayAnimation extends Animation {
   }
 
   stop(): void {
+    super.stop();
     this.__active = false;
     window.cancelAnimationFrame(this._animationFrame);
     this.__debouncedOnEnd({finished: false});
@@ -595,6 +601,7 @@ class SpringAnimation extends Animation {
   }
 
   stop(): void {
+    super.stop();
     this.__active = false;
     window.cancelAnimationFrame(this._animationFrame);
     this.__debouncedOnEnd({finished: false});
@@ -645,7 +652,7 @@ class AnimatedValue extends AnimatedWithChildren {
       this._animation.stop();
       this._animation = null;
     }
-    this._updateValue(value);
+    this._updateValue(value, !this.__isNative /* don't perform a flush for natively driven values */);
     if (this.__isNative) {
       NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value);
     }
@@ -705,7 +712,7 @@ class AnimatedValue extends AnimatedWithChildren {
    * 0-10.
    */
   interpolate(config: InterpolationConfigType): AnimatedInterpolation {
-    return new AnimatedInterpolation(this, Interpolation.create(config));
+    return new AnimatedInterpolation(this, config);
   }
 
   /**
@@ -723,7 +730,9 @@ class AnimatedValue extends AnimatedWithChildren {
     animation.start(
       this._value,
       (value) => {
-        this._updateValue(value);
+        // Natively driven animations will never call into that callback, therefore we can always pass `flush = true`
+        // to allow the updated value to propagate to native with `setNativeProps`
+        this._updateValue(value, true /* flush */);
       },
       (result) => {
         this._animation = null;
@@ -753,9 +762,11 @@ class AnimatedValue extends AnimatedWithChildren {
     this._tracking = tracking;
   }
 
-  _updateValue(value: number): void {
+  _updateValue(value: number, flush: bool): void {
     this._value = value;
-    _flush(this);
+    if (flush) {
+      _flush(this);
+    }
     for (var key in this._listeners) {
       this._listeners[key]({value: this.__getValue()});
     }
@@ -912,12 +923,14 @@ class AnimatedValueXY extends AnimatedWithChildren {
 
 class AnimatedInterpolation extends AnimatedWithChildren {
   _parent: Animated;
+  _config: InterpolationConfigType;
   _interpolation: (input: number) => number | string;
 
-  constructor(parent: Animated, interpolation: (input: number) => number | string) {
+  constructor(parent: Animated, config: InterpolationConfigType) {
     super();
     this._parent = parent;
-    this._interpolation = interpolation;
+    this._config = config;
+    this._interpolation = Interpolation.create(config);
   }
 
   __getValue(): number | string {
@@ -930,7 +943,7 @@ class AnimatedInterpolation extends AnimatedWithChildren {
   }
 
   interpolate(config: InterpolationConfigType): AnimatedInterpolation {
-    return new AnimatedInterpolation(this, Interpolation.create(config));
+    return new AnimatedInterpolation(this, config);
   }
 
   __attach(): void {
@@ -939,6 +952,15 @@ class AnimatedInterpolation extends AnimatedWithChildren {
 
   __detach(): void {
     this._parent.__removeChild(this);
+    super.__detach();
+  }
+
+  __getNativeConfig(): any {
+    NativeAnimatedHelper.validateInterpolation(this._config);
+    return {
+      ...this._config,
+      type: 'interpolation',
+    };
   }
 }
 
@@ -952,12 +974,18 @@ class AnimatedAddition extends AnimatedWithChildren {
     this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
   }
 
+  __makeNative() {
+    this._a.__makeNative();
+    this._b.__makeNative();
+    super.__makeNative();
+  }
+
   __getValue(): number {
     return this._a.__getValue() + this._b.__getValue();
   }
 
   interpolate(config: InterpolationConfigType): AnimatedInterpolation {
-    return new AnimatedInterpolation(this, Interpolation.create(config));
+    return new AnimatedInterpolation(this, config);
   }
 
   __attach(): void {
@@ -968,6 +996,14 @@ class AnimatedAddition extends AnimatedWithChildren {
   __detach(): void {
     this._a.__removeChild(this);
     this._b.__removeChild(this);
+    super.__detach();
+  }
+
+  __getNativeConfig(): any {
+    return {
+      type: 'addition',
+      input: [this._a.__getNativeTag(), this._b.__getNativeTag()],
+    };
   }
 }
 
@@ -981,12 +1017,18 @@ class AnimatedMultiplication extends AnimatedWithChildren {
     this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
   }
 
+  __makeNative() {
+    super.__makeNative();
+    this._a.__makeNative();
+    this._b.__makeNative();
+  }
+
   __getValue(): number {
     return this._a.__getValue() * this._b.__getValue();
   }
 
   interpolate(config: InterpolationConfigType): AnimatedInterpolation {
-    return new AnimatedInterpolation(this, Interpolation.create(config));
+    return new AnimatedInterpolation(this, config);
   }
 
   __attach(): void {
@@ -997,6 +1039,14 @@ class AnimatedMultiplication extends AnimatedWithChildren {
   __detach(): void {
     this._a.__removeChild(this);
     this._b.__removeChild(this);
+    super.__detach();
+  }
+
+  __getNativeConfig(): any {
+    return {
+      type: 'multiplication',
+      input: [this._a.__getNativeTag(), this._b.__getNativeTag()],
+    };
   }
 }
 
@@ -1015,7 +1065,7 @@ class AnimatedModulo extends AnimatedWithChildren {
   }
 
   interpolate(config: InterpolationConfigType): AnimatedInterpolation {
-    return new AnimatedInterpolation(this, Interpolation.create(config));
+    return new AnimatedInterpolation(this, config);
   }
 
   __attach(): void {
@@ -1394,7 +1444,7 @@ function createAnimatedComponent(Component: any): any {
 
       for (var key in ViewStylePropTypes) {
         if (!Component.propTypes[key] && props[key] !== undefined) {
-          console.error(
+          console.warn(
             'You are setting the style `{ ' + key + ': ... }` as a prop. You ' +
             'should nest it in a style object. ' +
             'E.g. `{ style: { ' + key + ': ... } }`'

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -16,7 +16,7 @@ var NativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
 var invariant = require('fbjs/lib/invariant');
 
 var __nativeAnimatedNodeTagCount = 1; /* used for animated nodes */
-var __nativeAnimationTagCount = 1; /* used for started animations */
+var __nativeAnimationIdCount = 1; /* used for started animations */
 
 type EndResult = {finished: bool};
 type EndCallback = (result: EndResult) => void;
@@ -38,9 +38,13 @@ var API = {
     assertNativeAnimatedModule();
     NativeAnimatedModule.disconnectAnimatedNodes(parentTag, childTag);
   },
-  startAnimatingNode: function(animationTag: number, nodeTag: number, config: Object, endCallback: EndCallback): void {
+  startAnimatingNode: function(animationId: number, nodeTag: number, config: Object, endCallback: EndCallback): void {
     assertNativeAnimatedModule();
-    NativeAnimatedModule.startAnimatingNode(nodeTag, config, endCallback);
+    NativeAnimatedModule.startAnimatingNode(animationId, nodeTag, config, endCallback);
+  },
+  stopAnimation: function(animationId: number) {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.stopAnimation(animationId);
   },
   setAnimatedNodeValue: function(nodeTag: number, value: number): void {
     assertNativeAnimatedModule();
@@ -97,12 +101,24 @@ function validateStyles(styles: Object): void {
   }
 }
 
+function validateInterpolation(config: Object): void {
+  var SUPPORTED_INTERPOLATION_PARAMS = {
+    inputRange: true,
+    outputRange: true,
+  };
+  for (var key in config) {
+    if (!SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(key)) {
+      throw new Error(`Interpolation property '${key}' is not supported by native animated module`);
+    }
+  }
+}
+
 function generateNewNodeTag(): number {
   return __nativeAnimatedNodeTagCount++;
 }
 
-function generateNewAnimationTag(): number {
-  return __nativeAnimationTagCount++;
+function generateNewAnimationId(): number {
+  return __nativeAnimationIdCount++;
 }
 
 function assertNativeAnimatedModule(): void {
@@ -113,7 +129,8 @@ module.exports = {
   API,
   validateProps,
   validateStyles,
+  validateInterpolation,
   generateNewNodeTag,
-  generateNewAnimationTag,
+  generateNewAnimationId,
   assertNativeAnimatedModule,
 };

Libraries/Animated/src/__tests__/Animated-test.js

@@ -9,7 +9,7 @@
 'use strict';
 
 jest
-  .autoMockOff()
+  .disableAutomock()
   .setMock('Text', {})
   .setMock('View', {})
   .setMock('Image', {})
@@ -22,7 +22,7 @@ describe('Animated', () => {
   it('works end to end', () => {
     var anim = new Animated.Value(0);
 
-    var callback = jest.genMockFunction();
+    var callback = jest.fn();
 
     var node = new Animated.__PropsOnlyForTests({
       style: {
@@ -75,7 +75,7 @@ describe('Animated', () => {
 
   it('does not detach on updates', () => {
     var anim = new Animated.Value(0);
-    anim.__detach = jest.genMockFunction();
+    anim.__detach = jest.fn();
 
     var c = new Animated.View();
     c.props = {
@@ -101,11 +101,11 @@ describe('Animated', () => {
   it('stops animation when detached', () => {
     // jest environment doesn't have cancelAnimationFrame :(
     if (!window.cancelAnimationFrame) {
-      window.cancelAnimationFrame = jest.genMockFunction();
+      window.cancelAnimationFrame = jest.fn();
     }
 
     var anim = new Animated.Value(0);
-    var callback = jest.genMockFunction();
+    var callback = jest.fn();
 
     var c = new Animated.View();
     c.props = {
@@ -125,14 +125,14 @@ describe('Animated', () => {
 
   it('triggers callback when spring is at rest', () => {
     var anim = new Animated.Value(0);
-    var callback = jest.genMockFunction();
+    var callback = jest.fn();
     Animated.spring(anim, {toValue: 0, velocity: 0}).start(callback);
     expect(callback).toBeCalled();
   });
 
   it('send toValue when a spring stops', () => {
     var anim = new Animated.Value(0);
-    var listener = jest.genMockFunction();
+    var listener = jest.fn();
     anim.addListener(listener);
     Animated.spring(anim, {toValue: 15}).start();
     jest.runAllTimers();
@@ -148,15 +148,15 @@ describe('Animated', () => {
 describe('Animated Sequence', () => {
 
   it('works with an empty sequence', () => {
-    var cb = jest.genMockFunction();
+    var cb = jest.fn();
     Animated.sequence([]).start(cb);
     expect(cb).toBeCalledWith({finished: true});
   });
 
   it('sequences well', () => {
-    var anim1 = {start: jest.genMockFunction()};
-    var anim2 = {start: jest.genMockFunction()};
-    var cb = jest.genMockFunction();
+    var anim1 = {start: jest.fn()};
+    var anim2 = {start: jest.fn()};
+    var cb = jest.fn();
 
     var seq = Animated.sequence([anim1, anim2]);
 
@@ -179,9 +179,9 @@ describe('Animated Sequence', () => {
   });
 
   it('supports interrupting sequence', () => {
-    var anim1 = {start: jest.genMockFunction()};
-    var anim2 = {start: jest.genMockFunction()};
-    var cb = jest.genMockFunction();
+    var anim1 = {start: jest.fn()};
+    var anim2 = {start: jest.fn()};
+    var cb = jest.fn();
 
     Animated.sequence([anim1, anim2]).start(cb);
 
@@ -193,9 +193,9 @@ describe('Animated Sequence', () => {
   });
 
   it('supports stopping sequence', () => {
-    var anim1 = {start: jest.genMockFunction(), stop: jest.genMockFunction()};
-    var anim2 = {start: jest.genMockFunction(), stop: jest.genMockFunction()};
-    var cb = jest.genMockFunction();
+    var anim1 = {start: jest.fn(), stop: jest.fn()};
+    var anim2 = {start: jest.fn(), stop: jest.fn()};
+    var cb = jest.fn();
 
     var seq = Animated.sequence([anim1, anim2]);
     seq.start(cb);
@@ -215,14 +215,14 @@ describe('Animated Sequence', () => {
 describe('Animated Parallel', () => {
 
   it('works with an empty parallel', () => {
-    var cb = jest.genMockFunction();
+    var cb = jest.fn();
     Animated.parallel([]).start(cb);
     expect(cb).toBeCalledWith({finished: true});
   });
 
   it('works with an empty element in array', () => {
-    var anim1 = {start: jest.genMockFunction()};
-    var cb = jest.genMockFunction();
+    var anim1 = {start: jest.fn()};
+    var cb = jest.fn();
     Animated.parallel([null, anim1]).start(cb);
 
     expect(anim1.start).toBeCalled();
@@ -232,9 +232,9 @@ describe('Animated Parallel', () => {
   });
 
   it('parellelizes well', () => {
-    var anim1 = {start: jest.genMockFunction()};
-    var anim2 = {start: jest.genMockFunction()};
-    var cb = jest.genMockFunction();
+    var anim1 = {start: jest.fn()};
+    var anim2 = {start: jest.fn()};
+    var cb = jest.fn();
 
     var par = Animated.parallel([anim1, anim2]);
 
@@ -255,9 +255,9 @@ describe('Animated Parallel', () => {
   });
 
   it('supports stopping parallel', () => {
-    var anim1 = {start: jest.genMockFunction(), stop: jest.genMockFunction()};
-    var anim2 = {start: jest.genMockFunction(), stop: jest.genMockFunction()};
-    var cb = jest.genMockFunction();
+    var anim1 = {start: jest.fn(), stop: jest.fn()};
+    var anim2 = {start: jest.fn(), stop: jest.fn()};
+    var cb = jest.fn();
 
     var seq = Animated.parallel([anim1, anim2]);
     seq.start(cb);
@@ -276,10 +276,10 @@ describe('Animated Parallel', () => {
 
 
   it('does not call stop more than once when stopping', () => {
-    var anim1 = {start: jest.genMockFunction(), stop: jest.genMockFunction()};
-    var anim2 = {start: jest.genMockFunction(), stop: jest.genMockFunction()};
-    var anim3 = {start: jest.genMockFunction(), stop: jest.genMockFunction()};
-    var cb = jest.genMockFunction();
+    var anim1 = {start: jest.fn(), stop: jest.fn()};
+    var anim2 = {start: jest.fn(), stop: jest.fn()};
+    var anim3 = {start: jest.fn(), stop: jest.fn()};
+    var cb = jest.fn();
 
     var seq = Animated.parallel([anim1, anim2, anim3]);
     seq.start(cb);
@@ -306,8 +306,8 @@ describe('Animated Parallel', () => {
 
 describe('Animated delays', () => {
   it('should call anim after delay in sequence', () => {
-    var anim = {start: jest.genMockFunction(), stop: jest.genMockFunction()};
-    var cb = jest.genMockFunction();
+    var anim = {start: jest.fn(), stop: jest.fn()};
+    var cb = jest.fn();
     Animated.sequence([
       Animated.delay(1000),
       anim,
@@ -319,7 +319,7 @@ describe('Animated delays', () => {
     expect(cb).toBeCalledWith({finished: true});
   });
   it('should run stagger to end', () => {
-    var cb = jest.genMockFunction();
+    var cb = jest.fn();
     Animated.stagger(1000, [
       Animated.delay(1000),
       Animated.delay(1000),
@@ -341,7 +341,7 @@ describe('Animated Events', () => {
   });
   it('should call listeners', () => {
     var value = new Animated.Value(0);
-    var listener = jest.genMockFunction();
+    var listener = jest.fn();
     var handler = Animated.event(
       [{foo: value}],
       {listener},
@@ -366,14 +366,14 @@ describe('Animated Interactions', () => {
   });
 
   afterEach(()=> {
-    jest.dontMock('InteractionManager');
+    jest.unmock('InteractionManager');
   });
 
   it('registers an interaction by default', () => {
     InteractionManager.createInteractionHandle.mockReturnValue(777);
 
     var value = new Animated.Value(0);
-    var callback = jest.genMockFunction();
+    var callback = jest.fn();
     Animated.timing(value, {
       toValue: 100,
       duration: 100,
@@ -387,7 +387,7 @@ describe('Animated Interactions', () => {
 
   it('does not register an interaction when specified', () => {
     var value = new Animated.Value(0);
-    var callback = jest.genMockFunction();
+    var callback = jest.fn();
     Animated.timing(value, {
       toValue: 100,
       duration: 100,
@@ -451,7 +451,7 @@ describe('Animated Vectors', () => {
   it('should animate vectors', () => {
     var vec = new Animated.ValueXY();
 
-    var callback = jest.genMockFunction();
+    var callback = jest.fn();
 
     var node = new Animated.__PropsOnlyForTests({
       style: {
@@ -536,7 +536,7 @@ describe('Animated Vectors', () => {
 describe('Animated Listeners', () => {
   it('should get updates', () => {
     var value1 = new Animated.Value(0);
-    var listener = jest.genMockFunction();
+    var listener = jest.fn();
     var id = value1.addListener(listener);
     value1.setValue(42);
     expect(listener.mock.calls.length).toBe(1);
@@ -554,7 +554,7 @@ describe('Animated Listeners', () => {
 
   it('should removeAll', () => {
     var value1 = new Animated.Value(0);
-    var listener = jest.genMockFunction();
+    var listener = jest.fn();
     [1,2,3,4].forEach(() => value1.addListener(listener));
     value1.setValue(42);
     expect(listener.mock.calls.length).toBe(4);

Libraries/Animated/src/__tests__/AnimatedNative-test.js

@@ -9,7 +9,7 @@
 'use strict';
 
 jest
-  .autoMockOff()
+  .disableAutomock()
   .setMock('Text', {})
   .setMock('View', {})
   .setMock('Image', {})
@@ -24,18 +24,19 @@ describe('Animated', () => {
 
   beforeEach(() => {
     var nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
-    nativeAnimatedModule.createAnimatedNode = jest.genMockFunction();
-    nativeAnimatedModule.connectAnimatedNodes = jest.genMockFunction();
-    nativeAnimatedModule.disconnectAnimatedNodes = jest.genMockFunction();
-    nativeAnimatedModule.startAnimatingNode = jest.genMockFunction();
-    nativeAnimatedModule.setAnimatedNodeValue = jest.genMockFunction();
-    nativeAnimatedModule.connectAnimatedNodeToView = jest.genMockFunction();
-    nativeAnimatedModule.disconnectAnimatedNodeFromView = jest.genMockFunction();
-    nativeAnimatedModule.dropAnimatedNode = jest.genMockFunction();
+    nativeAnimatedModule.createAnimatedNode = jest.fn();
+    nativeAnimatedModule.connectAnimatedNodes = jest.fn();
+    nativeAnimatedModule.disconnectAnimatedNodes = jest.fn();
+    nativeAnimatedModule.startAnimatingNode = jest.fn();
+    nativeAnimatedModule.stopAnimation = jest.fn();
+    nativeAnimatedModule.setAnimatedNodeValue = jest.fn();
+    nativeAnimatedModule.connectAnimatedNodeToView = jest.fn();
+    nativeAnimatedModule.disconnectAnimatedNodeFromView = jest.fn();
+    nativeAnimatedModule.dropAnimatedNode = jest.fn();
 
     // jest environment doesn't have cancelAnimationFrame :(
     if (!window.cancelAnimationFrame) {
-      window.cancelAnimationFrame = jest.genMockFunction();
+      window.cancelAnimationFrame = jest.fn();
     }
   });
 
@@ -59,6 +60,7 @@ describe('Animated', () => {
     expect(nativeAnimatedModule.connectAnimatedNodes.mock.calls.length).toBe(2);
 
     expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
+      jasmine.any(Number),
       jasmine.any(Number),
       {type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number)},
       jasmine.any(Function)
@@ -90,12 +92,114 @@ describe('Animated', () => {
       .toBeCalledWith(jasmine.any(Number), { type: 'props', props: { style: jasmine.any(Number) }});
   });
 
+  it('sends a valid graph description for Animated.add nodes', () => {
+    var first = new Animated.Value(1);
+    var second = new Animated.Value(2);
+
+    var c = new Animated.View();
+    c.props = {
+      style: {
+        opacity: Animated.add(first, second),
+      },
+    };
+    c.componentWillMount();
+
+    Animated.timing(first, {toValue: 2, duration: 1000, useNativeDriver: true}).start();
+    Animated.timing(second, {toValue: 3, duration: 1000, useNativeDriver: true}).start();
+
+    var nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
+    expect(nativeAnimatedModule.createAnimatedNode)
+      .toBeCalledWith(jasmine.any(Number), { type: 'addition', input: jasmine.any(Array) });
+    var additionCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
+      (call) => call[1].type === 'addition'
+    );
+    expect(additionCalls.length).toBe(1);
+    var additionCall = additionCalls[0];
+    var additionNodeTag = additionCall[0];
+    var additionConnectionCalls = nativeAnimatedModule.connectAnimatedNodes.mock.calls.filter(
+      (call) => call[1] === additionNodeTag
+    );
+    expect(additionConnectionCalls.length).toBe(2);
+    expect(nativeAnimatedModule.createAnimatedNode)
+      .toBeCalledWith(additionCall[1].input[0], { type: 'value', value: 1 });
+    expect(nativeAnimatedModule.createAnimatedNode)
+      .toBeCalledWith(additionCall[1].input[1], { type: 'value', value: 2 });
+  });
+
+  it('sends a valid graph description for Animated.multiply nodes', () => {
+    var first = new Animated.Value(2);
+    var second = new Animated.Value(1);
+
+    var c = new Animated.View();
+    c.props = {
+      style: {
+        opacity: Animated.multiply(first, second),
+      },
+    };
+    c.componentWillMount();
+
+    Animated.timing(first, {toValue: 5, duration: 1000, useNativeDriver: true}).start();
+    Animated.timing(second, {toValue: -1, duration: 1000, useNativeDriver: true}).start();
+
+    var nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
+    expect(nativeAnimatedModule.createAnimatedNode)
+      .toBeCalledWith(jasmine.any(Number), { type: 'multiplication', input: jasmine.any(Array) });
+    var multiplicationCalls = nativeAnimatedModule.createAnimatedNode.mock.calls.filter(
+      (call) => call[1].type === 'multiplication'
+    );
+    expect(multiplicationCalls.length).toBe(1);
+    var multiplicationCall = multiplicationCalls[0];
+    var multiplicationNodeTag = multiplicationCall[0];
+    var multiplicationConnectionCalls = nativeAnimatedModule.connectAnimatedNodes.mock.calls.filter(
+      (call) => call[1] === multiplicationNodeTag
+    );
+    expect(multiplicationConnectionCalls.length).toBe(2);
+    expect(nativeAnimatedModule.createAnimatedNode)
+      .toBeCalledWith(multiplicationCall[1].input[0], { type: 'value', value: 2 });
+    expect(nativeAnimatedModule.createAnimatedNode)
+      .toBeCalledWith(multiplicationCall[1].input[1], { type: 'value', value: 1 });
+  });
+
+  it('sends a valid graph description for interpolate() nodes', () => {
+    var node = new Animated.Value(10);
+
+    var c = new Animated.View();
+    c.props = {
+      style: {
+        opacity: node.interpolate({
+          inputRange: [10, 20],
+          outputRange: [0, 1],
+        }),
+      },
+    };
+    c.componentWillMount();
+
+    Animated.timing(node, {toValue: 20, duration: 1000, useNativeDriver: true}).start();
+
+    var nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
+    expect(nativeAnimatedModule.createAnimatedNode).toBeCalledWith(jasmine.any(Number), { type: 'value', value: 10 });
+    expect(nativeAnimatedModule.createAnimatedNode)
+      .toBeCalledWith(jasmine.any(Number), {
+        type: 'interpolation',
+        inputRange: [10, 20],
+        outputRange: [0, 1],
+      });
+    var interpolationNodeTag = nativeAnimatedModule.createAnimatedNode.mock.calls.find(
+      (call) => call[1].type === 'interpolation'
+    )[0];
+    var valueNodeTag = nativeAnimatedModule.createAnimatedNode.mock.calls.find(
+      (call) => call[1].type === 'value'
+    )[0];
+    expect(nativeAnimatedModule.connectAnimatedNodes).toBeCalledWith(valueNodeTag, interpolationNodeTag);
+  });
+
   it('sends a valid timing animation description', () => {
     var anim = new Animated.Value(0);
     Animated.timing(anim, {toValue: 10, duration: 1000, useNativeDriver: true}).start();
 
     var nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
     expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
+      jasmine.any(Number),
       jasmine.any(Number),
       {type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number)},
       jasmine.any(Function)
@@ -106,10 +210,27 @@ describe('Animated', () => {
     var anim = new Animated.Value(0);
     Animated.timing(anim, {toValue: 10, duration: 1000, useNativeDriver: true}).start();
 
-    anim.setValue(5);
+    var c = new Animated.View();
+    c.props = {
+      style: {
+        opacity: anim,
+      },
+    };
+    c.componentWillMount();
+
+    // We expect `setValue` not to propagate down to `setNativeProps`, otherwise it may try to access `setNativeProps`
+    // via component refs table that we override here.
+    c.refs = {
+      node: {
+        setNativeProps: jest.genMockFunction(),
+      },
+    };
+
+    anim.setValue(0.5);
 
     var nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
-    expect(nativeAnimatedModule.setAnimatedNodeValue).toBeCalledWith(jasmine.any(Number), 5);
+    expect(nativeAnimatedModule.setAnimatedNodeValue).toBeCalledWith(jasmine.any(Number), 0.5);
+    expect(c.refs.node.setNativeProps.mock.calls.length).toBe(0);
   });
 
   it('doesn\'t call into native API if useNativeDriver is set to false', () => {
@@ -179,6 +300,25 @@ describe('Animated', () => {
     expect(animation.start).toThrowError(/left/);
   });
 
+  it('fails for unsupported interpolation parameters', () => {
+    var anim = new Animated.Value(0);
+
+    var c = new Animated.View();
+    c.props = {
+      style: {
+        opacity: anim.interpolate({
+          inputRange: [0, 100],
+          outputRange: [0, 1],
+          extrapolate: 'clamp',
+        }),
+      },
+    };
+    c.componentWillMount();
+
+    var animation = Animated.timing(anim, {toValue: 100, duration: 50, useNativeDriver: true});
+    expect(animation.start).toThrowError(/extrapolate/);
+  });
+
   it('works for any `static` props and styles', () => {
     // Passing "unsupported" props should work just fine as long as they are not animated
     var anim = new Animated.Value(0);
@@ -201,4 +341,22 @@ describe('Animated', () => {
       .toBeCalledWith(jasmine.any(Number), { type: 'props', props: { style: jasmine.any(Number) }});
   });
 
+  it('send stopAnimation command to native', () => {
+    var value = new Animated.Value(0);
+    var animation = Animated.timing(value, {toValue: 10, duration: 50, useNativeDriver: true});
+    var nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
+
+    animation.start();
+    expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
+      jasmine.any(Number),
+      jasmine.any(Number),
+      {type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number)},
+      jasmine.any(Function)
+    );
+    var animationId = nativeAnimatedModule.startAnimatingNode.mock.calls[0][0];
+
+    animation.stop();
+    expect(nativeAnimatedModule.stopAnimation).toBeCalledWith(animationId);
+  });
+
 });

Libraries/Animated/src/__tests__/Easing-test.js

@@ -8,7 +8,7 @@
  */
 'use strict';
 
-jest.dontMock('Easing');
+jest.unmock('Easing');
 
 var Easing = require('Easing');
 describe('Easing', () => {

Libraries/Animated/src/__tests__/Interpolation-test.js

@@ -9,9 +9,9 @@
 'use strict';
 
 jest
-  .dontMock('Interpolation')
-  .dontMock('Easing')
-  .dontMock('normalizeColor');
+  .unmock('Interpolation')
+  .unmock('Easing')
+  .unmock('normalizeColor');
 
 var Interpolation = require('Interpolation');
 var Easing = require('Easing');

Libraries/Animated/src/__tests__/bezier-test.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 
-jest.dontMock('bezier');
+jest.unmock('bezier');
 var bezier = require('bezier');
 
 var identity = function (x) { return x; };

Libraries/AppRegistry/AppRegistry.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var BatchedBridge = require('BatchedBridge');
+var BugReporting = require('BugReporting');
 var ReactNative = require('ReactNative');
 
 var invariant = require('fbjs/lib/invariant');
@@ -24,6 +25,7 @@ if (__DEV__) {
 }
 
 var runnables = {};
+var runCount = 1;
 
 type ComponentProvider = () => ReactClass<any>;
 
@@ -79,13 +81,15 @@ var AppRegistry = {
   },
 
   runApplication: function(appKey: string, appParameters: any): void {
-    console.log(
+    const msg =
       'Running application "' + appKey + '" with appParams: ' +
       JSON.stringify(appParameters) + '. ' +
       '__DEV__ === ' + String(__DEV__) +
       ', development-level warning are ' + (__DEV__ ? 'ON' : 'OFF') +
-      ', performance optimizations are ' + (__DEV__ ? 'OFF' : 'ON')
-    );
+      ', performance optimizations are ' + (__DEV__ ? 'OFF' : 'ON');
+    console.log(msg);
+    BugReporting.init();
+    BugReporting.addSource('AppRegistry.runApplication' + runCount++, () => msg);
     invariant(
       runnables[appKey] && runnables[appKey].run,
       'Application ' + appKey + ' has not been registered. This ' +

Libraries/BatchedBridge/BatchedBridge.js

@@ -24,6 +24,7 @@ const JSTimersExecution = require('JSTimersExecution');
 
 BatchedBridge.registerCallableModule('Systrace', Systrace);
 BatchedBridge.registerCallableModule('JSTimersExecution', JSTimersExecution);
+BatchedBridge.registerCallableModule('HeapCapture', require('HeapCapture'));
 
 if (__DEV__) {
   BatchedBridge.registerCallableModule('HMRClient', require('HMRClient'));

Libraries/BatchedBridge/BatchedBridgedModules/NativeModules.js

@@ -13,6 +13,7 @@
 
 const BatchedBridge = require('BatchedBridge');
 const RemoteModules = BatchedBridge.RemoteModules;
+const Platform = require('Platform');
 
 function normalizePrefix(moduleName: string): string {
   return moduleName.replace(/^(RCT|RK)/, '');
@@ -65,51 +66,53 @@ Object.keys(RemoteModules).forEach((moduleName) => {
  * the call sites accessing NativeModules.UIManager directly have
  * been removed #9344445
  */
-const UIManager = NativeModules.UIManager;
-UIManager && Object.keys(UIManager).forEach(viewName => {
-  const viewConfig = UIManager[viewName];
-  if (viewConfig.Manager) {
-    let constants;
-    /* $FlowFixMe - nice try. Flow doesn't like getters */
-    Object.defineProperty(viewConfig, 'Constants', {
-      configurable: true,
-      enumerable: true,
-      get: () => {
-        if (constants) {
+if (Platform.OS === 'ios') {
+  const UIManager = NativeModules.UIManager;
+  UIManager && Object.keys(UIManager).forEach(viewName => {
+    const viewConfig = UIManager[viewName];
+    if (viewConfig.Manager) {
+      let constants;
+      /* $FlowFixMe - nice try. Flow doesn't like getters */
+      Object.defineProperty(viewConfig, 'Constants', {
+        configurable: true,
+        enumerable: true,
+        get: () => {
+          if (constants) {
+            return constants;
+          }
+          constants = {};
+          const viewManager = NativeModules[normalizePrefix(viewConfig.Manager)];
+          viewManager && Object.keys(viewManager).forEach(key => {
+            const value = viewManager[key];
+            if (typeof value !== 'function') {
+              constants[key] = value;
+            }
+          });
           return constants;
-        }
-        constants = {};
-        const viewManager = NativeModules[normalizePrefix(viewConfig.Manager)];
-        viewManager && Object.keys(viewManager).forEach(key => {
-          const value = viewManager[key];
-          if (typeof value !== 'function') {
-            constants[key] = value;
+        },
+      });
+      let commands;
+      /* $FlowFixMe - nice try. Flow doesn't like getters */
+      Object.defineProperty(viewConfig, 'Commands', {
+        configurable: true,
+        enumerable: true,
+        get: () => {
+          if (commands) {
+            return commands;
           }
-        });
-        return constants;
-      },
-    });
-    let commands;
-    /* $FlowFixMe - nice try. Flow doesn't like getters */
-    Object.defineProperty(viewConfig, 'Commands', {
-      configurable: true,
-      enumerable: true,
-      get: () => {
-        if (commands) {
+          commands = {};
+          const viewManager = NativeModules[normalizePrefix(viewConfig.Manager)];
+          viewManager && Object.keys(viewManager).forEach((key, index) => {
+            const value = viewManager[key];
+            if (typeof value === 'function') {
+              commands[key] = index;
+            }
+          });
           return commands;
-        }
-        commands = {};
-        const viewManager = NativeModules[normalizePrefix(viewConfig.Manager)];
-        viewManager && Object.keys(viewManager).forEach((key, index) => {
-          const value = viewManager[key];
-          if (typeof value === 'function') {
-            commands[key] = index;
-          }
-        });
-        return commands;
-      },
-    });
-  }
-});
+        },
+      });
+    }
+  });
+}
 
 module.exports = NativeModules;

Libraries/BatchedBridge/BatchedBridgedModules/__mocks__/NativeModules.js

@@ -10,21 +10,19 @@ var NativeModules = {
     }),
   },
   Timing: {
-    createTimer: jest.genMockFunction(),
-    deleteTimer: jest.genMockFunction(),
+    createTimer: jest.fn(),
+    deleteTimer: jest.fn(),
   },
   GraphPhotoUpload: {
-    upload: jest.genMockFunction(),
+    upload: jest.fn(),
   },
   FacebookSDK: {
-    login: jest.genMockFunction(),
-    logout: jest.genMockFunction(),
-    queryGraphPath: jest.genMockFunction().mockImpl(
-      (path, method, params, callback) => callback()
-    ),
+    login: jest.fn(),
+    logout: jest.fn(),
+    queryGraphPath: jest.fn((path, method, params, callback) => callback()),
   },
   DataManager: {
-    queryData: jest.genMockFunction(),
+    queryData: jest.fn(),
   },
   UIManager: {
     customBubblingEventTypes: {},
@@ -38,10 +36,10 @@ var NativeModules = {
     },
   },
   AsyncLocalStorage: {
-    getItem: jest.genMockFunction(),
-    setItem: jest.genMockFunction(),
-    removeItem: jest.genMockFunction(),
-    clear: jest.genMockFunction(),
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+    removeItem: jest.fn(),
+    clear: jest.fn(),
   },
   SourceCode: {
     scriptURL: null,
@@ -52,10 +50,10 @@ var NativeModules = {
   },
   ModalFullscreenViewManager: {},
   AlertManager: {
-    alertWithArgs: jest.genMockFunction(),
+    alertWithArgs: jest.fn(),
   },
   Clipboard: {
-    setString: jest.genMockFunction(),
+    setString: jest.fn(),
   },
 };
 

Libraries/BugReporting/BugReporting.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BugReporting
+ * @flow
+ */
+'use strict';
+
+const BugReportingNativeModule = require('NativeModules').BugReporting;
+const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+
+import type {EmitterSubscription} from 'EventEmitter';
+
+type ExtraData = { [key: string]: string };
+type SourceCallback = () => string;
+
+/**
+ * A simple class for collecting bug report data. Components can add sources that will be queried when a bug report
+ * is created via `collectExtraData`. For example, a list component might add a source that provides the list of rows
+ * that are currently visible on screen. Components should also remember to call `remove()` on the object that is
+ * returned by `addSource` when they are unmounted.
+ */
+class BugReporting {
+
+  static _sources: Map<string, SourceCallback> = new Map();
+  static _subscription: EmitterSubscription = null;
+
+  /**
+   * `init` is called in `AppRegistry.runApplication`, so you shouldn't have to worry about it.
+   */
+  static init() {
+    if (!BugReporting._subscription) {
+      BugReporting._subscription = RCTDeviceEventEmitter
+          .addListener('collectBugExtraData', BugReporting.collectExtraData, null);
+    }
+  }
+
+  /**
+   * Maps a string key to a simple callback that should return a string payload to be attached
+   * to a bug report. Source callbacks are called when `collectExtraData` is called.
+   *
+   * Returns an object to remove the source when the component unmounts.
+   *
+   * Conflicts trample with a warning.
+   */
+  static addSource(key: string, callback: SourceCallback): {remove: () => void} {
+    if (BugReporting._sources.has(key)) {
+      console.warn(`BugReporting.addSource called multiple times for same key '${key}'`);
+    }
+    BugReporting._sources.set(key, callback);
+    return {remove: () => { BugReporting._sources.delete(key); }};
+  }
+
+  /**
+   * This can be called from a native bug reporting flow, or from JS code.
+   *
+   * If available, this will call `NativeModules.BugReporting.setExtraData(extraData)`
+   * after collecting `extraData`.
+   */
+  static collectExtraData(): ExtraData {
+    const extraData: ExtraData = {};
+    for (const [key, callback] of BugReporting._sources) {
+      extraData[key] = callback();
+    }
+    console.log('BugReporting extraData:', extraData);
+    BugReportingNativeModule &&
+      BugReportingNativeModule.setExtraData &&
+      BugReportingNativeModule.setExtraData(extraData);
+    return extraData;
+  }
+}
+
+module.exports = BugReporting;

Libraries/CameraRoll/RCTAssetsLibraryRequestHandler.m

@@ -11,6 +11,7 @@
 
 #import <AssetsLibrary/AssetsLibrary.h>
 #import <libkern/OSAtomic.h>
+#import <MobileCoreServices/MobileCoreServices.h>
 
 #import "RCTBridge.h"
 #import "RCTUtils.h"
@@ -53,10 +54,13 @@ RCT_EXPORT_MODULE()
 
       ALAssetRepresentation *representation = [asset defaultRepresentation];
       NSInteger length = (NSInteger)representation.size;
+      
+        
+      CFStringRef MIMEType = UTTypeCopyPreferredTagWithClass((__bridge CFStringRef _Nonnull)(representation.UTI), kUTTagClassMIMEType);
 
       NSURLResponse *response =
       [[NSURLResponse alloc] initWithURL:request.URL
-                                MIMEType:representation.UTI
+                                MIMEType:(__bridge NSString *)(MIMEType)
                    expectedContentLength:length
                         textEncodingName:nil];
 

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -16,7 +16,6 @@
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
-var RCTDatePickerIOSConsts = require('UIManager').RCTDatePicker.Constants;
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 
@@ -142,8 +141,8 @@ var DatePickerIOS = React.createClass({
 
 var styles = StyleSheet.create({
   datePickerIOS: {
-    height: RCTDatePickerIOSConsts.ComponentHeight,
-    width: RCTDatePickerIOSConsts.ComponentWidth,
+    height: 216,
+    width: 320,
   },
 });
 

Libraries/Components/MapView/MapView.js

@@ -351,6 +351,7 @@ const MapView = React.createClass({
         }
         var viewIndex = children.length;
         children.push(React.cloneElement(view, {
+          // $FlowFixMe - An array of styles should be fine
           style: [styles.annotationView, view.props.style || {}]
         }));
       }

Libraries/Components/Picker/PickerAndroid.android.js

@@ -52,7 +52,11 @@ var PickerAndroid = React.createClass({
   },
 
   getInitialState: function() {
-    return this._stateFromProps(this.props);
+    var state = this._stateFromProps(this.props);
+    return {
+      ...state,
+      initialSelectedIndex: state.selectedIndex,
+    };
   },
 
   componentWillReceiveProps: function(nextProps) {
@@ -87,7 +91,7 @@ var PickerAndroid = React.createClass({
       mode: this.props.mode,
       onSelect: this._onChange,
       prompt: this.props.prompt,
-      selected: this.state.selectedIndex,
+      selected: this.state.initialSelectedIndex,
       testID: this.props.testID,
       style: [styles.pickerAndroid, this.props.style],
     };
@@ -105,15 +109,24 @@ var PickerAndroid = React.createClass({
         this.props.onValueChange(null, position);
       }
     }
+    this._lastNativePosition = event.nativeEvent.position;
+    this.forceUpdate();
+  },
 
+  componentDidMount: function() {
+    this._lastNativePosition = this.state.initialSelectedIndex;
+  },
+
+  componentDidUpdate: function() {
     // The picker is a controlled component. This means we expect the
     // on*Change handlers to be in charge of updating our
     // `selectedValue` prop. That way they can also
     // disallow/undo/mutate the selection of certain values. In other
     // words, the embedder of this component should be the source of
     // truth, not the native component.
-    if (this.refs[REF_PICKER] && this.state.selectedIndex !== event.nativeEvent.position) {
+    if (this.refs[REF_PICKER] && this.state.selectedIndex !== this._lastNativePosition) {
       this.refs[REF_PICKER].setNativeProps({selected: this.state.selectedIndex});
+      this._lastNativePosition = this.state.selectedIndex;
     }
   },
 });

Libraries/Components/Picker/PickerIOS.ios.js

@@ -15,7 +15,6 @@
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var ReactChildren = require('ReactChildren');
-var RCTPickerIOSConsts = require('NativeModules').UIManager.RCTPicker.Constants;
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var TextStylePropTypes = require('TextStylePropTypes');
@@ -108,7 +107,7 @@ var styles = StyleSheet.create({
     // The picker will conform to whatever width is given, but we do
     // have to set the component's height explicitly on the
     // surrounding view to ensure it gets rendered.
-    height: RCTPickerIOSConsts.ComponentHeight,
+    height: 216,
   },
 });
 

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -13,7 +13,6 @@
 
 var Image = require('Image');
 var NativeMethodsMixin = require('NativeMethodsMixin');
-var NativeModules = require('NativeModules');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
@@ -72,7 +71,7 @@ var ProgressViewIOS = React.createClass({
 
 var styles = StyleSheet.create({
   progressView: {
-    height: NativeModules.ProgressViewManager.ComponentHeight
+    height: 2,
   },
 });
 

Libraries/Components/ScrollResponder.js

@@ -14,7 +14,6 @@
 var Dimensions = require('Dimensions');
 var Platform = require('Platform');
 var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
-var React = require('React');
 var ReactNative = require('ReactNative');
 var Subscribable = require('Subscribable');
 var TextInputState = require('TextInputState');
@@ -23,9 +22,6 @@ var UIManager = require('UIManager');
 var { ScrollViewManager } = require('NativeModules');
 
 var invariant = require('fbjs/lib/invariant');
-var warning = require('fbjs/lib/warning');
-
-import type ReactComponent from 'ReactComponent';
 
 /**
  * Mixin that can be integrated in order to handle scrolling that plays well

Libraries/Components/ScrollView/RecyclerViewBackedScrollView.android.js

@@ -5,7 +5,6 @@
  */
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var ScrollResponder = require('ScrollResponder');
 var ScrollView = require('ScrollView');

Libraries/Components/ScrollView/ScrollView.js

@@ -63,7 +63,7 @@ var ScrollView = React.createClass({
     automaticallyAdjustContentInsets: PropTypes.bool,
     /**
      * The amount by which the scroll view content is inset from the edges
-     * of the scroll view. Defaults to `{0, 0, 0, 0}`.
+     * of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`.
      * @platform ios
      */
     contentInset: EdgeInsetsPropType,
@@ -210,8 +210,11 @@ var ScrollView = React.createClass({
      */
     onScrollAnimationEnd: PropTypes.func,
     /**
-     * Called when scrollable content view of the ScrollView changes. It's
-     * implemented using onLayout handler attached to the content container
+     * Called when scrollable content view of the ScrollView changes.
+     *
+     * Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)`
+     *
+     * It's implemented using onLayout handler attached to the content container
      * which this ScrollView renders.
      */
     onContentSizeChange: PropTypes.func,
@@ -563,7 +566,11 @@ var styles = StyleSheet.create({
 });
 
 if (Platform.OS === 'android') {
-  var nativeOnlyProps = { nativeOnly : { 'sendMomentumEvents' : true } };
+  var nativeOnlyProps = {
+    nativeOnly: {
+      sendMomentumEvents: true,
+    }
+  };
   var AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
   var AndroidHorizontalScrollView = requireNativeComponent(
     'AndroidHorizontalScrollView',
@@ -571,7 +578,15 @@ if (Platform.OS === 'android') {
     nativeOnlyProps
   );
 } else if (Platform.OS === 'ios') {
-  var RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView);
+  var nativeOnlyProps = {
+    nativeOnly: {
+      onMomentumScrollBegin: true,
+      onMomentumScrollEnd : true,
+      onScrollBeginDrag: true,
+      onScrollEndDrag: true,
+    }
+  };
+  var RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
 }
 
 module.exports = ScrollView;

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -12,7 +12,6 @@
 'use strict';
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
-var NativeModules = require('NativeModules');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
@@ -120,7 +119,7 @@ var SegmentedControlIOS = React.createClass({
 
 var styles = StyleSheet.create({
   segmentedControl: {
-    height: NativeModules.SegmentedControlManager.ComponentHeight
+    height: 28,
   },
 });
 

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -27,6 +27,10 @@ var TabBarIOS = React.createClass({
   propTypes: {
     ...View.propTypes,
     style: View.propTypes.style,
+    /**
+     * Color of text on unselected tabs
+     */
+    unselectedTintColor: ColorPropType,
     /**
      * Color of the currently selected tab icon
      */
@@ -45,6 +49,7 @@ var TabBarIOS = React.createClass({
     return (
       <RCTTabBar
         style={[styles.tabGroup, this.props.style]}
+        unselectedTintColor={this.props.unselectedTintColor}
         tintColor={this.props.tintColor}
         barTintColor={this.props.barTintColor}
         translucent={this.props.translucent !== false}>

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -62,6 +62,11 @@ var TabBarItemIOS = React.createClass({
      * component to set selected={true}.
      */
     onPress: React.PropTypes.func,
+    /**
+     * If set to true it renders the image as original,
+     * it defaults to being displayed as a template
+     */
+    renderAsOriginal: React.PropTypes.bool,
     /**
      * It specifies whether the children are visible or not. If you see a
      * blank content, you probably forgot to add a selected one.

Libraries/Components/TextInput/TextInput.js

@@ -443,8 +443,8 @@ var TextInput = React.createClass({
         !(props.value && childCount),
         'Cannot specify both value and children.'
       );
-      if (childCount > 1) {
-        children = <Text>{children}</Text>;
+      if (childCount >= 1) {
+        children = <Text style={props.style}>{children}</Text>;
       }
       if (props.inputView) {
         children = [children, props.inputView];

Libraries/Components/Touchable/Touchable.js

@@ -360,10 +360,10 @@ var TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderGrant` event.
    * @param {SyntheticEvent} e Synthetic event from event system.
-   * @param {string} dispatchID ID of node that e was dispatched to.
    *
    */
-  touchableHandleResponderGrant: function(e, dispatchID) {
+  touchableHandleResponderGrant: function(e) {
+    var dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
     // (as in setTimeout etc), we need to call e.persist() on the
     // event to make sure it doesn't get reused in the event object pool.
@@ -756,8 +756,5 @@ var Touchable = {
     );
   }
 };
-if (Touchable.TOUCH_TARGET_DEBUG) {
-  console.warn('Touchable.TOUCH_TARGET_DEBUG is enabled');
-}
 
 module.exports = Touchable;

Libraries/Components/Touchable/TouchableOpacity.js

@@ -55,7 +55,7 @@ var TouchableOpacity = React.createClass({
     ...TouchableWithoutFeedback.propTypes,
     /**
      * Determines what the opacity of the wrapped view should be when touch is
-     * active.
+     * active. Defaults to 0.2.
      */
     activeOpacity: React.PropTypes.number,
   },

Libraries/Components/ViewPager/ViewPagerAndroid.android.js

@@ -123,6 +123,12 @@ var ViewPagerAndroid = React.createClass({
       'none', // default
       'on-drag',
     ]),
+
+    /**
+    * When false, the content does not scroll.
+    * The default value is true.
+    */
+    scrollEnabled: React.PropTypes.bool,
   },
 
   componentDidMount: function() {

Libraries/Components/WebView/WebView.android.js

@@ -264,6 +264,14 @@ var WebView = React.createClass({
     );
   },
 
+  stopLoading: function() {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RCTWebView.Commands.stopLoading,
+      null
+    );
+  },
+
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward

Libraries/Components/WebView/WebView.ios.js

@@ -362,6 +362,14 @@ var WebView = React.createClass({
     );
   },
 
+  stopLoading: function() {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RCTWebView.Commands.stopLoading,
+      null
+    );
+  },
+
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward

Libraries/CustomComponents/ListView/ListView.js

@@ -56,10 +56,10 @@ var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
 /**
  * ListView - A core component designed for efficient display of vertically
  * scrolling lists of changing data.  The minimal API is to create a
- * `ListView.DataSource`, populate it with a simple array of data blobs, and
- * instantiate a `ListView` component with that data source and a `renderRow`
- * callback which takes a blob from the data array and returns a renderable
- * component.
+ * [`ListView.DataSource`](docs/listviewdatasource.html), populate it with a simple
+ * array of data blobs, and instantiate a `ListView` component with that data
+ * source and a `renderRow` callback which takes a blob from the data array and
+ * returns a renderable component.
  *
  * Minimal example:
  *
@@ -117,7 +117,9 @@ var ListView = React.createClass({
    */
   propTypes: {
     ...ScrollView.propTypes,
-
+    /**
+     * An instance of [ListView.DataSource](docs/listviewdatasource.html) to use
+     */
     dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired,
     /**
      * (sectionID, rowID, adjacentRowHighlighted) => renderable

Libraries/CustomComponents/NavigationExperimental/NavigationCard.js

@@ -38,6 +38,7 @@ const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleIn
 const NavigationContainer = require('NavigationContainer');
 const NavigationPagerPanResponder = require('NavigationPagerPanResponder');
 const NavigationPagerStyleInterpolator = require('NavigationPagerStyleInterpolator');
+const NavigationPointerEventsContainer = require('NavigationPointerEventsContainer');
 const NavigationPropTypes = require('NavigationPropTypes');
 const React = require('React');
 const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
@@ -50,20 +51,39 @@ import type  {
   NavigationSceneRendererProps,
 } from 'NavigationTypeDefinition';
 
+type SceneViewProps =  {
+  sceneRenderer: NavigationSceneRenderer,
+  sceneRendererProps: NavigationSceneRendererProps,
+};
+
 type Props = NavigationSceneRendererProps & {
-  style: any,
+  onComponentRef: (ref: any) => void,
   panHandlers: ?NavigationPanPanHandlers,
+  pointerEvents: string,
   renderScene: NavigationSceneRenderer,
+  style: any,
 };
 
 const {PropTypes} = React;
 
-const propTypes = {
-  ...NavigationPropTypes.SceneRenderer,
-  style: PropTypes.any,
-  panHandlers: NavigationPropTypes.panHandlers,
-  renderScene: PropTypes.func.isRequired,
-};
+class SceneView extends React.Component<any, SceneViewProps, any> {
+
+  static propTypes = {
+    sceneRenderer: PropTypes.func.isRequired,
+    sceneRendererProps: NavigationPropTypes.SceneRenderer,
+  };
+
+  shouldComponentUpdate(nextProps: SceneViewProps, nextState: any): boolean {
+    return (
+      nextProps.sceneRendererProps.scene.navigationState !==
+        this.props.sceneRendererProps.scene.navigationState
+    );
+  }
+
+  render(): ?ReactElement {
+    return this.props.sceneRenderer(this.props.sceneRendererProps);
+  }
+}
 
 /**
  * Component that renders the scene as card for the <NavigationCardStack />.
@@ -71,6 +91,15 @@ const propTypes = {
 class NavigationCard extends React.Component<any, Props, any> {
   props: Props;
 
+  static propTypes = {
+    ...NavigationPropTypes.SceneRendererProps,
+    onComponentRef: PropTypes.func.isRequired,
+    panHandlers: NavigationPropTypes.panHandlers,
+    pointerEvents: PropTypes.string.isRequired,
+    renderScene: PropTypes.func.isRequired,
+    style: PropTypes.any,
+  };
+
   shouldComponentUpdate(nextProps: Props, nextState: any): boolean {
     return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
       this,
@@ -82,50 +111,35 @@ class NavigationCard extends React.Component<any, Props, any> {
   render(): ReactElement {
     const {
       panHandlers,
+      pointerEvents,
       renderScene,
       style,
       ...props, /* NavigationSceneRendererProps */
     } = this.props;
 
-    let viewStyle = null;
-    if (style === undefined) {
-      // fall back to default style.
-      viewStyle = NavigationCardStackStyleInterpolator.forHorizontal(props);
-    } else {
-      viewStyle = style;
-    }
+    const viewStyle = style === undefined ?
+      NavigationCardStackStyleInterpolator.forHorizontal(props) :
+      style;
 
-    const  {
-      navigationState,
-      scene,
-    } = props;
-
-    const interactive = navigationState.index === scene.index && !scene.isStale;
-    const pointerEvents = interactive ? 'auto' : 'none';
-
-    let viewPanHandlers = null;
-    if (interactive) {
-      if (panHandlers === undefined) {
-        // fall back to default pan handlers.
-        viewPanHandlers = NavigationCardStackPanResponder.forHorizontal(props);
-      } else {
-        viewPanHandlers = panHandlers;
-      }
-    }
+    const viewPanHandlers = panHandlers === undefined ?
+      NavigationCardStackPanResponder.forHorizontal(props) :
+      panHandlers;
 
     return (
       <Animated.View
         {...viewPanHandlers}
         pointerEvents={pointerEvents}
+        ref={this.props.onComponentRef}
         style={[styles.main, viewStyle]}>
-        {renderScene(props)}
+        <SceneView
+          sceneRenderer={renderScene}
+          sceneRendererProps={props}
+        />
       </Animated.View>
     );
   }
 }
 
-NavigationCard.propTypes = propTypes;
-
 const styles = StyleSheet.create({
   main: {
     backgroundColor: '#E9E9EF',
@@ -141,13 +155,13 @@ const styles = StyleSheet.create({
   },
 });
 
-
-const NavigationCardContainer = NavigationContainer.create(NavigationCard);
+NavigationCard = NavigationPointerEventsContainer.create(NavigationCard);
+NavigationCard = NavigationContainer.create(NavigationCard);
 
 // Export these buil-in interaction modules.
-NavigationCardContainer.CardStackPanResponder = NavigationCardStackPanResponder;
-NavigationCardContainer.CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
-NavigationCardContainer.PagerPanResponder = NavigationPagerPanResponder;
-NavigationCardContainer.PagerStyleInterpolator = NavigationPagerStyleInterpolator;
+NavigationCard.CardStackPanResponder = NavigationCardStackPanResponder;
+NavigationCard.CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
+NavigationCard.PagerPanResponder = NavigationPagerPanResponder;
+NavigationCard.PagerStyleInterpolator = NavigationPagerStyleInterpolator;
 
-module.exports = NavigationCardContainer;
+module.exports = NavigationCard;

Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js

@@ -64,6 +64,11 @@ type Props = {
   renderScene: NavigationSceneRenderer,
 };
 
+type DefaultProps = {
+  direction: NavigationGestureDirection,
+  renderOverlay: ?NavigationSceneRenderer,
+};
+
 /**
  * A controlled navigation view that renders a stack of cards.
  *
@@ -78,7 +83,7 @@ type Props = {
  *   +-+            |
  *     +------------+
  */
-class NavigationCardStack extends React.Component {
+class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
   _renderScene : NavigationSceneRenderer;
 
   static propTypes = {
@@ -88,7 +93,7 @@ class NavigationCardStack extends React.Component {
     renderScene: PropTypes.func.isRequired,
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     direction: Directions.HORIZONTAL,
     renderOverlay: emptyFunction.thatReturnsNull,
   };
@@ -101,7 +106,7 @@ class NavigationCardStack extends React.Component {
     this._renderScene = this._renderScene.bind(this);
   }
 
-  shouldComponentUpdate(nextProps: Object, nextState: Object): boolean {
+  shouldComponentUpdate(nextProps: Object, nextState: void): boolean {
     return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
       this,
       nextProps,
@@ -115,6 +120,7 @@ class NavigationCardStack extends React.Component {
         navigationState={this.props.navigationState}
         renderOverlay={this.props.renderOverlay}
         renderScene={this._renderScene}
+        // $FlowFixMe - style should be declared
         style={[styles.animatedView, this.props.style]}
       />
     );

Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js

@@ -51,6 +51,28 @@ import type  {
  *     +------------+
  */
 
+/**
+ * Render the initial style when the initial layout isn't measured yet.
+ */
+function forInitial(props: NavigationSceneRendererProps): Object {
+  const {
+    navigationState,
+    scene,
+  } = props;
+
+  const focused = navigationState.index === scene.index;
+  const opacity = focused ? 1 : 0;
+  // If not focused, move the scene to the far away.
+  const translate = focused ? 0 : 1000000;
+  return {
+    opacity,
+    transform: [
+      { translateX: translate },
+      { translateY: translate },
+    ],
+  };
+}
+
 function forHorizontal(props: NavigationSceneRendererProps): Object {
   const {
     layout,
@@ -58,6 +80,10 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
     scene,
   } = props;
 
+  if (!layout.isMeasured) {
+    return forInitial(props);
+  }
+
   const index = scene.index;
   const inputRange = [index - 1, index, index + 1];
   const width = layout.initWidth;
@@ -95,6 +121,10 @@ function forVertical(props: NavigationSceneRendererProps): Object {
     scene,
   } = props;
 
+  if (!layout.isMeasured) {
+    return forInitial(props);
+  }
+
   const index = scene.index;
   const inputRange = [index - 1, index, index + 1];
   const height = layout.initHeight;

Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

@@ -95,7 +95,7 @@ class NavigationHeader extends React.Component<DefaultProps, Props, any> {
   };
 
   static propTypes = {
-    ...NavigationPropTypes.SceneRenderer,
+    ...NavigationPropTypes.SceneRendererProps,
     renderLeftComponent: PropTypes.func,
     renderRightComponent: PropTypes.func,
     renderTitleComponent: PropTypes.func,
@@ -244,10 +244,10 @@ const styles = StyleSheet.create({
   },
 });
 
-NavigationHeader = NavigationContainer.create(NavigationHeader);
+const NavigationHeaderContainer = NavigationContainer.create(NavigationHeader);
 
-NavigationHeader.HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
-NavigationHeader.Title = NavigationHeaderTitle;
-NavigationHeader.BackButton = NavigationHeaderBackButton;
+NavigationHeaderContainer.HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
+NavigationHeaderContainer.Title = NavigationHeaderTitle;
+NavigationHeaderContainer.BackButton = NavigationHeaderBackButton;
 
-module.exports = NavigationHeader;
+module.exports = NavigationHeaderContainer;

Libraries/CustomComponents/NavigationExperimental/NavigationPagerStyleInterpolator.js

@@ -51,6 +51,29 @@ import type  {
  * +-------------+-------------+-------------+
  */
 
+/**
+ * Render the initial style when the initial layout isn't measured yet.
+ */
+function forInitial(props: NavigationSceneRendererProps): Object {
+  const {
+    navigationState,
+    scene,
+  } = props;
+
+  const focused = navigationState.index === scene.index;
+  const opacity = focused ? 1 : 0;
+  // If not focused, move the scene to the far away.
+  const dir = scene.index > navigationState.index ? 1 : -1;
+  const translate = focused ? 0 : (1000000 * dir);
+  return {
+    opacity,
+    transform: [
+      { translateX: translate },
+      { translateY: translate },
+    ],
+  };
+}
+
 function forHorizontal(props: NavigationSceneRendererProps): Object {
   const {
     layout,
@@ -58,6 +81,10 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
     scene,
   } = props;
 
+  if (!layout.isMeasured) {
+    return forInitial(props);
+  }
+
   const index = scene.index;
   const inputRange = [index - 1, index, index + 1];
 

Libraries/CustomComponents/NavigationExperimental/NavigationPointerEventsContainer.js

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
+ *
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @providesModule NavigationPointerEventsContainer
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+const NavigationAnimatedValueSubscription = require('NavigationAnimatedValueSubscription');
+
+const invariant = require('fbjs/lib/invariant');
+
+import type  {
+  NavigationSceneRendererProps,
+} from 'NavigationTypeDefinition';
+
+type Props = NavigationSceneRendererProps;
+
+const MIN_POSITION_OFFSET = 0.01;
+
+/**
+ * Create a higher-order component that automatically computes the
+ * `pointerEvents` property for a component whenever navigation position
+ * changes.
+ */
+function create(
+  Component: ReactClass<any>,
+): ReactClass {
+
+  class Container extends React.Component<any, Props, any> {
+
+    _component: any;
+    _onComponentRef: (view: any) => void;
+    _onPositionChange: (data: {value: number}) => void;
+    _pointerEvents: string;
+    _positionListener: ?NavigationAnimatedValueSubscription;
+
+    props: Props;
+
+    constructor(props: Props, context: any) {
+      super(props, context);
+      this._pointerEvents = this._computePointerEvents();
+    }
+
+    componentWillMount(): void {
+      this._onPositionChange = this._onPositionChange.bind(this);
+      this._onComponentRef = this._onComponentRef.bind(this);
+    }
+
+    componentDidMount(): void {
+      this._bindPosition(this.props);
+    }
+
+    componentWillUnmount(): void {
+      this._positionListener && this._positionListener.remove();
+    }
+
+    componentWillReceiveProps(nextProps: Props): void {
+      this._bindPosition(nextProps);
+    }
+
+    render(): ReactElement  {
+      this._pointerEvents = this._computePointerEvents();
+      return (
+        <Component
+          {...this.props}
+          pointerEvents={this._pointerEvents}
+          onComponentRef={this._onComponentRef}
+        />
+      );
+    }
+
+    _onComponentRef(component: any): void {
+      this._component = component;
+      if (component) {
+        invariant(
+          typeof component.setNativeProps === 'function',
+          'component must implement method `setNativeProps`',
+        );
+      }
+    }
+
+    _bindPosition(props: NavigationSceneRendererProps): void {
+      this._positionListener && this._positionListener.remove();
+      this._positionListener = new  NavigationAnimatedValueSubscription(
+        props.position,
+        this._onPositionChange,
+      );
+    }
+
+    _onPositionChange(): void {
+      if (this._component) {
+        const pointerEvents = this._computePointerEvents();
+        if (this._pointerEvents !== pointerEvents) {
+          this._pointerEvents = pointerEvents;
+          this._component.setNativeProps({pointerEvents});
+        }
+      }
+    }
+
+    _computePointerEvents(): string {
+      const {
+        navigationState,
+        position,
+        scene,
+      } = this.props;
+
+      if (scene.isStale || navigationState.index !== scene.index) {
+        // The scene isn't focused.
+        return scene.index > navigationState.index ?
+          'box-only' :
+          'none';
+      }
+
+      const offset = position.__getAnimatedValue() - navigationState.index;
+      if (Math.abs(offset) > MIN_POSITION_OFFSET) {
+        // The positon is still away from scene's index.
+        // Scene's children should not receive touches until the position
+        // is close enough to scene's index.
+        return 'box-only';
+      }
+
+      return 'auto';
+    }
+  }
+  return  Container;
+}
+
+module.exports = {
+  create,
+};

Libraries/CustomComponents/NavigationExperimental/__tests__/NavigationLegacyNavigatorRouteStack-test.js

@@ -29,7 +29,7 @@
  */
 'use strict';
 
-jest.dontMock('NavigationLegacyNavigatorRouteStack');
+jest.unmock('NavigationLegacyNavigatorRouteStack');
 
 const NavigationLegacyNavigatorRouteStack = require('NavigationLegacyNavigatorRouteStack');
 

Libraries/CustomComponents/Navigator/Navigation/__tests__/NavigationContext-test.js

@@ -25,7 +25,7 @@
 'use strict';
 
 jest
-  .autoMockOff()
+  .disableAutomock()
   .mock('ErrorUtils');
 
 var NavigationContext = require('NavigationContext');

Libraries/CustomComponents/Navigator/Navigation/__tests__/NavigationEvent-test.js

@@ -26,8 +26,8 @@
 'use strict';
 
 jest
-  .dontMock('NavigationEvent')
-  .dontMock('fbjs/lib/invariant');
+  .unmock('NavigationEvent')
+  .unmock('fbjs/lib/invariant');
 
 var NavigationEvent = require('NavigationEvent');
 

Libraries/CustomComponents/Navigator/Navigation/__tests__/NavigationEventEmitter-test.js

@@ -25,12 +25,12 @@
 'use strict';
 
 jest
-  .dontMock('EmitterSubscription')
-  .dontMock('EventSubscription')
-  .dontMock('EventEmitter')
-  .dontMock('EventSubscriptionVendor')
-  .dontMock('NavigationEvent')
-  .dontMock('NavigationEventEmitter');
+  .unmock('EmitterSubscription')
+  .unmock('EventSubscription')
+  .unmock('EventEmitter')
+  .unmock('EventSubscriptionVendor')
+  .unmock('NavigationEvent')
+  .unmock('NavigationEventEmitter');
 
 var NavigationEventEmitter = require('NavigationEventEmitter');
 

Libraries/CustomComponents/Navigator/Navigation/__tests__/NavigationRouteStack-test.js

@@ -26,7 +26,7 @@
 
 
 jest
- .autoMockOff()
+ .disableAutomock()
  .mock('ErrorUtils');
 
 var NavigationRouteStack = require('NavigationRouteStack');

Libraries/CustomComponents/Navigator/Navigation/__tests__/NavigationTreeNode-test.js

@@ -5,9 +5,9 @@
 'use strict';
 
 jest
-  .dontMock('NavigationTreeNode')
-  .dontMock('fbjs/lib/invariant')
-  .dontMock('immutable');
+  .unmock('NavigationTreeNode')
+  .unmock('fbjs/lib/invariant')
+  .unmock('immutable');
 
 var NavigationTreeNode = require('NavigationTreeNode');
 

Libraries/DebugComponentHierarchy/RCTDebugComponentOwnership.js

@@ -16,28 +16,8 @@
 'use strict';
 
 var BatchedBridge = require('BatchedBridge');
-var DebugComponentOwnershipModule = require('NativeModules').DebugComponentOwnershipModule;
-var InspectorUtils = require('InspectorUtils');
-var ReactNativeTagHandles = require('ReactNativeTagHandles');
-
-function componentToString(component) {
-  return component.getName ? component.getName() : 'Unknown';
-}
-
-function getRootTagForTag(tag: number): ?number {
-  var rootNodeID = ReactNativeTagHandles.tagToRootNodeID[tag];
-  if (!rootNodeID) {
-    return null;
-  }
-  var rootID = ReactNativeTagHandles.getNativeTopRootIDFromNodeID(rootNodeID);
-  if (!rootID) {
-    return null;
-  }
-  return ReactNativeTagHandles.rootNodeIDToTag[rootID];
-}
 
 var RCTDebugComponentOwnership = {
-
   /**
    * Asynchronously returns the owner hierarchy as an array of strings. Request id is
    * passed along to the native module so that the native module can identify the
@@ -46,12 +26,10 @@ var RCTDebugComponentOwnership = {
    * Example returned owner hierarchy: ['RootView', 'Dialog', 'TitleView', 'Text']
    */
   getOwnerHierarchy: function(requestID: number, tag: number) {
-    var rootTag = getRootTagForTag(tag);
-    var instance = InspectorUtils.findInstanceByNativeTag(rootTag, tag);
-    var ownerHierarchy = instance ?
-        InspectorUtils.getOwnerHierarchy(instance).map(componentToString) :
-        null;
-    DebugComponentOwnershipModule.receiveOwnershipHierarchy(requestID, tag, ownerHierarchy);
+    // Consider cleaning up these unused modules in a separate diff.
+    throw new Error(
+      'This seems to be unused. Will disable until it is needed again.'
+    );
   },
 };
 

Libraries/Devtools/setupDevtools.js

@@ -64,12 +64,27 @@ function setupDevtools() {
       console.error('Failed to eval: ' + e.message);
       return;
     }
+    // This is breaking encapsulation of the React package. Move plz.
+    var ReactNativeComponentTree = require('ReactNativeComponentTree');
     window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
-      CurrentOwner: require('ReactCurrentOwner'),
-      InstanceHandles: require('ReactInstanceHandles'),
+      ComponentTree: {
+        getClosestInstanceFromNode: function (node) {
+          return ReactNativeComponentTree.getClosestInstanceFromNode(node);
+        },
+        getNodeFromInstance: function (inst) {
+          // inst is an internal instance (but could be a composite)
+          while (inst._renderedComponent) {
+            inst = inst._renderedComponent;
+          }
+          if (inst) {
+            return ReactNativeComponentTree.getNodeFromInstance(inst);
+          } else {
+            return null;
+          }
+        }
+      },
       Mount: require('ReactNativeMount'),
-      Reconciler: require('ReactReconciler'),
-      TextComponent: require('ReactNativeTextComponent'),
+      Reconciler: require('ReactReconciler')
     });
     ws.onmessage = handleMessage;
   }

Libraries/Experimental/Incremental.js

@@ -87,18 +87,31 @@ export type Props = {
   * Tags instances and associated tasks for easier debugging.
   */
  name: string;
- children: any;
+ children?: any;
 };
-class Incremental extends React.Component {
+type DefaultProps = {
+  name: string,
+};
+type State = {
+  doIncrementalRender: boolean,
+};
+class Incremental extends React.Component<DefaultProps, Props, State> {
   props: Props;
-  state: {
-    doIncrementalRender: boolean;
-  };
+  state: State;
   context: Context;
   _incrementId: number;
   _mounted: boolean;
   _rendered: boolean;
 
+  static defaultProps = {
+    name: '',
+  };
+
+  static contextTypes = {
+    incrementalGroup: React.PropTypes.object,
+    incrementalGroupEnabled: React.PropTypes.bool,
+  };
+
   constructor(props: Props, context: Context) {
     super(props, context);
     this._mounted = false;
@@ -159,13 +172,6 @@ class Incremental extends React.Component {
     this._mounted = false;
   }
 }
-Incremental.defaultProps = {
-  name: '',
-};
-Incremental.contextTypes = {
-  incrementalGroup: React.PropTypes.object,
-  incrementalGroupEnabled: React.PropTypes.bool,
-};
 
 export type Context = {
   incrementalGroupEnabled: boolean;

Libraries/Experimental/IncrementalPresenter.js

@@ -31,16 +31,29 @@ import type {Context} from 'Incremental';
  */
 type Props = {
   name: string;
-  disabled: boolean;
-  onDone: () => void;
-  onLayout: (event: Object) => void;
-  style: mixed;
-  children: any;
+  disabled?: boolean;
+  onDone?: () => void;
+  onLayout?: (event: Object) => void;
+  style?: mixed;
+  children?: any;
 }
 class IncrementalPresenter extends React.Component {
   props: Props;
   context: Context;
   _isDone: boolean;
+
+  static propTypes = {
+    name: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    onDone: React.PropTypes.func,
+    onLayout: React.PropTypes.func,
+    style: View.propTypes.style,
+  };
+  static contextTypes = {
+    incrementalGroup: React.PropTypes.object,
+    incrementalGroupEnabled: React.PropTypes.bool,
+  };
+
   constructor(props: Props, context: Context) {
     super(props, context);
     this._isDone = false;
@@ -80,16 +93,5 @@ class IncrementalPresenter extends React.Component {
     );
   }
 }
-IncrementalPresenter.propTypes = {
-  name: React.PropTypes.string,
-  disabled: React.PropTypes.bool,
-  onDone: React.PropTypes.func,
-  onLayout: React.PropTypes.func,
-  style: View.propTypes.style,
-};
-IncrementalPresenter.contextTypes = {
-  incrementalGroup: React.PropTypes.object,
-  incrementalGroupEnabled: React.PropTypes.bool,
-};
 
 module.exports = IncrementalPresenter;

Libraries/Experimental/WindowedListView.js

@@ -83,13 +83,13 @@ type Props = {
    * A simple array of data blobs that are passed to the renderRow function in
    * order. Note there is no dataSource like in the standard `ListView`.
    */
-  data: Array<mixed>;
+  data: Array<any>;
   /**
    * Takes a data blob from the `data` array prop plus some meta info and should
    * return a row.
    */
   renderRow: (
-    data: mixed, sectionIdx: number, rowIdx: number, key: string
+    data: any, sectionIdx: number, rowIdx: number, key?: string
   ) => ?ReactElement;
   /**
    * Rendered when the list is scrolled faster than rows can be rendered.
@@ -140,7 +140,7 @@ type Props = {
   /**
    * Used to log perf events for async row rendering.
    */
-  asyncRowPerfEventName: ?string;
+  asyncRowPerfEventName?: string;
   /**
    * A function that returns the scrollable component in which the list rows
    * are rendered. Defaults to returning a ScrollView with the given props.
@@ -158,30 +158,28 @@ type Props = {
    * Called when rows will be mounted/unmounted. Mounted rows always form a contiguous block so it is expressed as a
    * range of start plus count.
    */
-  onMountedRowsWillChange: (firstIdx: number, count: number) => void;
+  onMountedRowsWillChange?: (firstIdx: number, count: number) => void;
+  /**
+   * Change this when you want to make sure the WindowedListView will re-render, for example when the result of
+   * `renderScrollComponent` might change. It will be compared in `shouldComponentUpdate`.
+   */
+  shouldUpdateToken?: string;
 };
-const defaultProps = {
-  enableDangerousRecycling: false,
-  initialNumToRender: 10,
-  maxNumToRender: 30,
-  numToRenderAhead: 10,
-  viewablePercentThreshold: 50,
-  renderScrollComponent: (props) => <ScrollView {...props} />,
-  disableIncrementalRendering: false,
-  recomputeRowsBatchingPeriod: 100,
+
+type State = {
+  boundaryIndicatorHeight?: number;
+  firstRow: number;
+  lastRow: number;
 };
 class WindowedListView extends React.Component {
   props: Props;
-  state: {
-    boundaryIndicatorHeight?: number;
-    firstRow: number;
-    lastRow: number;
-    firstVisible: number;
-    lastVisible: number;
-  };
+  state: State;
+  _firstVisible: number = -1;
+  _lastVisible: number = -1;
   _scrollOffsetY: number = 0;
   _frameHeight: number = 0;
   _rowFrames: Array<Object> = [];
+  _rowFramesDirty: boolean = false;
   _hasCalledOnEndReached: bool = false;
   _willComputeRowsToRender: bool = false;
   _timeoutHandle: number = 0;
@@ -189,6 +187,18 @@ class WindowedListView extends React.Component {
   _viewableRows: Array<number> = [];
   _cellsInProgress: Set<number> = new Set();
   _scrollRef: ?Object;
+
+  static defaultProps = {
+    enableDangerousRecycling: false,
+    initialNumToRender: 10,
+    maxNumToRender: 30,
+    numToRenderAhead: 10,
+    viewablePercentThreshold: 50,
+    renderScrollComponent: (props) => <ScrollView {...props} />,
+    disableIncrementalRendering: false,
+    recomputeRowsBatchingPeriod: 100,
+  };
+
   constructor(props: Props) {
     super(props);
     invariant(
@@ -197,10 +207,7 @@ class WindowedListView extends React.Component {
     );
     this.state = {
       firstRow: 0,
-      lastRow:
-        Math.min(this.props.data.length, this.props.initialNumToRender) - 1,
-      firstVisible: -1,
-      lastVisible: -1,
+      lastRow: Math.min(this.props.data.length, this.props.initialNumToRender) - 1,
     };
   }
   getScrollResponder(): ?ReactComponent {
@@ -208,6 +215,27 @@ class WindowedListView extends React.Component {
       this._scrollRef.getScrollResponder &&
       this._scrollRef.getScrollResponder();
   }
+  shouldComponentUpdate(newProps: Props, newState: State): boolean {
+    if (newState !== this.state) {
+      return true;
+    }
+    for (const key in newProps) {
+      if (key !== 'data' && newProps[key] !== this.props[key]) {
+        return true;
+      }
+    }
+    const newDataSubset = newProps.data.slice(newState.firstRow, newState.lastRow + 1);
+    const prevDataSubset = this.props.data.slice(this.state.firstRow, this.state.lastRow + 1);
+    if (newDataSubset.length !== prevDataSubset.length) {
+      return true;
+    }
+    for (let idx = 0; idx < newDataSubset.length; idx++) {
+      if (newDataSubset[idx] !== prevDataSubset[idx]) {
+        return true;
+      }
+    }
+    return false;
+  }
   componentWillReceiveProps(newProps: Object) {
     // This has to happen immediately otherwise we could crash, e.g. if the data
     // array has gotten shorter.
@@ -245,10 +273,11 @@ class WindowedListView extends React.Component {
       const layoutPrev = this._rowFrames[rowIndex] || {};
       console.log(
         'record layout for row: ',
-        {i: rowIndex, h: layout.height, y: layout.y, hp: layoutPrev.height, yp: layoutPrev.y}
+        {i: rowIndex, h: layout.height, y: layout.y, x: layout.x, hp: layoutPrev.height, yp: layoutPrev.y}
       );
     }
     this._rowFrames[rowIndex] = {...layout, offscreenLayoutDone: true};
+    this._rowFramesDirty = true;
     if (this._cellsInProgress.size === 0) {
       this._enqueueComputeRowsToRender();
     }
@@ -293,11 +322,10 @@ class WindowedListView extends React.Component {
   _computeRowsToRender(props: Object): void {
     const totalRows = props.data.length;
     if (totalRows === 0) {
+      this._updateVisibleRows(-1, -1);
       this.setState({
         firstRow: 0,
         lastRow: -1,
-        firstVisible: -1,
-        lastVisible: -1,
       });
       return;
     }
@@ -372,29 +400,28 @@ class WindowedListView extends React.Component {
         this._hasCalledOnEndReached = this.state.lastRow === lastRow;
       }
     }
-    if (this.state.firstRow !== firstRow || this.state.lastRow !== lastRow) {
-      this.props.onMountedRowsWillChange && this.props.onMountedRowsWillChange(firstRow, lastRow - firstRow + 1);
-      console.log('WLV: row render range changed:', {firstRow, lastRow});
+    const rowsShouldChange = firstRow !== this.state.firstRow || lastRow !== this.state.lastRow;
+    if (this._rowFramesDirty || rowsShouldChange) {
+      if (rowsShouldChange) {
+        this.props.onMountedRowsWillChange && this.props.onMountedRowsWillChange(firstRow, lastRow - firstRow + 1);
+        console.log('WLV: row render range will change:', {firstRow, lastRow});
+      }
+      this._rowFramesDirty = false;
+      this.setState({firstRow, lastRow});
     }
-    this.setState({firstRow, lastRow});
   }
   _updateVisibleRows(newFirstVisible: number, newLastVisible: number) {
-    if (this.state.firstVisible !== newFirstVisible ||
-        this.state.lastVisible !== newLastVisible) {
-      if (this.props.onVisibleRowsChanged) {
-        this.props.onVisibleRowsChanged(
-          newFirstVisible,
-          newLastVisible - newFirstVisible + 1);
+    if (this.props.onVisibleRowsChanged) {
+      if (this._firstVisible !== newFirstVisible ||
+          this._lastVisible !== newLastVisible) {
+        this.props.onVisibleRowsChanged(newFirstVisible, newLastVisible - newFirstVisible + 1);
       }
-      this.setState({
-        firstVisible: newFirstVisible,
-        lastVisible: newLastVisible,
-      });
     }
+    this._firstVisible = newFirstVisible;
+    this._lastVisible = newLastVisible;
   }
   render(): ReactElement {
-    const firstRow = this.state.firstRow;
-    const lastRow = this.state.lastRow;
+    const {firstRow, lastRow} = this.state;
     const rowFrames = this._rowFrames;
     const rows = [];
     let spacerHeight = 0;
@@ -496,7 +523,6 @@ class WindowedListView extends React.Component {
     );
   }
 }
-WindowedListView.defaultProps = defaultProps;
 
 // performance testing id, unique for each component mount cycle
 let g_perf_update_id = 0;
@@ -531,7 +557,7 @@ type CellProps = {
    * Updates the parent with the latest layout. Only called when incremental rendering is done and triggers the parent
    * to re-render this row with includeInLayout true.
    */
-  onNewLayout: (params: {rowIndex: number, layout: ?Object}) => void;
+  onNewLayout: (params: {rowIndex: number, layout: Object}) => void;
   /**
    * Used to track when rendering is in progress so the parent can avoid wastedful re-renders that are just going to be
    * invalidated once the cell finishes.
@@ -549,12 +575,16 @@ class CellRenderer extends React.Component {
   _lastLayout: ?Object = null;
   _perfUpdateID: number = 0;
   _asyncCookie: any;
+  _includeInLayoutLatch: boolean = false;
   componentWillMount() {
     if (this.props.asyncRowPerfEventName) {
       this._perfUpdateID = g_perf_update_id++;
       this._asyncCookie = Systrace.beginAsyncEvent(this.props.asyncRowPerfEventName + this._perfUpdateID);
       console.log(`perf_asynctest_${this.props.asyncRowPerfEventName}_start ${this._perfUpdateID} ${Date.now()}`);
     }
+    if (this.props.includeInLayout) {
+      this._includeInLayoutLatch = true;
+    }
     this.props.onProgressChange({rowIndex: this.props.rowIndex, inProgress: true});
   }
   _onLayout = (e) => {
@@ -598,9 +628,8 @@ class CellRenderer extends React.Component {
   componentWillReceiveProps(newProps) {
     if (newProps.includeInLayout && !this.props.includeInLayout) {
       invariant(this._offscreenRenderDone, 'Should never try to add to layout before render done');
+      this._includeInLayoutLatch = true; // Once we render in layout, make sure it sticks.
       this.refs.container.setNativeProps({style: styles.include});
-    } else {
-      invariant(!(this.props.includeInLayout && !newProps.includeInLayout), 'Should never unset includeInLayout');
     }
   }
   shouldComponentUpdate(newProps) {
@@ -615,7 +644,7 @@ class CellRenderer extends React.Component {
         Row: {this.props.rowIndex}
       </Text>;
     }
-    const style = this.props.includeInLayout ? styles.include : styles.remove;
+    const style = (this._includeInLayoutLatch || this.props.includeInLayout) ? styles.include : styles.remove;
     return (
       <IncrementalGroup onDone={this._onOffscreenRenderDone} name={`CellRenderer_${this.props.rowIndex}`}>
         <View

Libraries/Image/RCTImageLoader.m

@@ -371,7 +371,24 @@ static UIImage *RCTResizeImageIfNeeded(UIImage *image,
     // Check for cached response before reloading
     // TODO: move URL cache out of RCTImageLoader into its own module
     NSCachedURLResponse *cachedResponse = [_URLCache cachedResponseForRequest:request];
-    if (cachedResponse) {
+
+    while (cachedResponse) {
+      if ([cachedResponse.response isKindOfClass:[NSHTTPURLResponse class]]) {
+        NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *)cachedResponse.response;
+        if (httpResponse.statusCode == 301 || httpResponse.statusCode == 302) {
+          NSString *location = httpResponse.allHeaderFields[@"Location"];
+          if (location == nil) {
+            completionHandler(RCTErrorWithMessage(@"Image redirect without location"), nil);
+            return;
+          }
+
+          NSURL *redirectURL = [NSURL URLWithString: location];
+          request = [NSURLRequest requestWithURL: redirectURL];
+          cachedResponse = [_URLCache cachedResponseForRequest:request];
+          continue;
+        }
+      }
+
       processResponse(cachedResponse.response, cachedResponse.data, nil);
       return;
     }

Libraries/Image/RCTImageUtils.h

@@ -93,11 +93,4 @@ RCT_EXTERN UIImage *__nullable RCTTransformImage(UIImage *image,
  */
 RCT_EXTERN BOOL RCTImageHasAlpha(CGImageRef image);
 
-/**
- * Create a solid placeholder image of the specified size and color to display
- * while loading an image. If color is not specified, image will be transparent.
- */
-RCT_EXTERN UIImage *__nullable RCTGetPlaceholderImage(CGSize size,
-                                                      UIColor *__nullable color);
-
 NS_ASSUME_NONNULL_END

Libraries/Image/RCTImageUtils.m

@@ -16,8 +16,6 @@
 #import "RCTLog.h"
 #import "RCTUtils.h"
 
-static const CGFloat RCTThresholdValue = 0.0001;
-
 static CGFloat RCTCeilValue(CGFloat value, CGFloat scale)
 {
   return ceil(value * scale) / scale;
@@ -337,46 +335,3 @@ BOOL RCTImageHasAlpha(CGImageRef image)
       return YES;
   }
 }
-
-UIImage *__nullable RCTGetPlaceholderImage(CGSize size,
-                                           UIColor *__nullable color)
-{
-  if (size.width <= 0 || size.height <= 0) {
-    return nil;
-  }
-
-  // If dimensions are nonintegral, increase scale
-  CGFloat scale = 1;
-  if (size.width - floor(size.width) > RCTThresholdValue) {
-    scale *= round(1.0 / (size.width - floor(size.width)));
-  }
-  if (size.height - floor(size.height) > RCTThresholdValue) {
-    scale *= round(1.0 / (size.height - floor(size.height)));
-  }
-
-  // Use Euclid's algorithm to find the greatest common divisor
-  // between the specified placeholder width and height;
-  NSInteger a = size.width * scale;
-  NSInteger b = size.height * scale;
-  while (a != 0) {
-    NSInteger c = a;
-    a = b % a;
-    b = c;
-  }
-
-  // Divide the placeholder image scale by the GCD we found above. This allows
-  // us to save memory by creating the smallest possible placeholder image
-  // with the correct aspect ratio, then scaling it up at display time.
-  scale /= b;
-
-  // Fill image with specified color
-  CGFloat alpha = CGColorGetAlpha(color.CGColor);
-  UIGraphicsBeginImageContextWithOptions(size, ABS(1.0 - alpha) < RCTThresholdValue, scale);
-  if (alpha > 0) {
-    [color setFill];
-    UIRectFill((CGRect){CGPointZero, size});
-  }
-  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
-  UIGraphicsEndImageContext();
-  return image;
-}

Libraries/Image/RCTShadowVirtualImage.m

@@ -52,10 +52,6 @@ RCT_NOT_IMPLEMENTED(-(instancetype)init)
     RCTZeroIfNaN(self.height),
   };
 
-  if (!_image) {
-    _image = RCTGetPlaceholderImage(imageSize, nil);
-  }
-
   __weak RCTShadowVirtualImage *weakSelf = self;
   _cancellationBlock = [_bridge.imageLoader loadImageWithTag:_source.imageURL.absoluteString
                                                         size:imageSize

Libraries/Image/__tests__/resolveAssetSource-test.js

@@ -9,10 +9,10 @@
 'use strict';
 
 jest
-  .dontMock('AssetRegistry')
-  .dontMock('AssetSourceResolver')
-  .dontMock('../resolveAssetSource')
-  .dontMock('../../../local-cli/bundle/assetPathUtils');
+  .unmock('AssetRegistry')
+  .unmock('AssetSourceResolver')
+  .unmock('../resolveAssetSource')
+  .unmock('../../../local-cli/bundle/assetPathUtils');
 
 var AssetRegistry = require('AssetRegistry');
 var Platform = require('Platform');

Libraries/Inspector/Inspector.js

@@ -9,6 +9,9 @@
  * @providesModule Inspector
  * @flow
  */
+
+/* eslint-disable dot-notation, no-dimensions-get-window */
+
 'use strict';
 
 var Dimensions = require('Dimensions');
@@ -16,7 +19,6 @@ var InspectorOverlay = require('InspectorOverlay');
 var InspectorPanel = require('InspectorPanel');
 var InspectorUtils = require('InspectorUtils');
 var React = require('React');
-var ReactNative = require('ReactNative');
 var StyleSheet = require('StyleSheet');
 var Touchable = require('Touchable');
 var UIManager = require('NativeModules').UIManager;
@@ -28,6 +30,23 @@ if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
 }
 
 class Inspector extends React.Component {
+  props: {
+    inspectedViewTag: ?number,
+    rootTag: ?number,
+    onRequestRerenderApp: (callback: (tag: ?number) => void) => void
+  };
+
+  state: {
+    devtoolsAgent: ?Object,
+    hierarchy: any,
+    panelPos: string,
+    inspecting: bool,
+    selection: ?number,
+    perfing: bool,
+    inspected: any,
+    inspectedViewTag: any,
+  };
+
   _subs: ?Array<() => void>;
 
   constructor(props: Object) {
@@ -35,17 +54,19 @@ class Inspector extends React.Component {
 
     this.state = {
       devtoolsAgent: null,
+      hierarchy: null,
       panelPos: 'bottom',
       inspecting: true,
       perfing: false,
       inspected: null,
+      selection: null,
       inspectedViewTag: this.props.inspectedViewTag,
     };
   }
 
   componentDidMount() {
     if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
-      this.attachToDevtools = this.attachToDevtools.bind(this);
+      (this : any).attachToDevtools = this.attachToDevtools.bind(this);
       window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', this.attachToDevtools);
       // if devtools is already started
       if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent) {
@@ -107,8 +128,8 @@ class Inspector extends React.Component {
     var instance = this.state.hierarchy[i];
     // if we inspect a stateless component we can't use the getPublicInstance method
     // therefore we use the internal _instance property directly.
-    var publicInstance = instance._instance || {};
-    UIManager.measure(ReactNative.findNodeHandle(instance), (x, y, width, height, left, top) => {
+    var publicInstance = instance['_instance'] || {};
+    UIManager.measure(instance.getNativeNode(), (x, y, width, height, left, top) => {
       this.setState({
         inspected: {
           frame: {left, top, width, height},

Libraries/Inspector/InspectorUtils.js

@@ -10,10 +10,7 @@
  */
 'use strict';
 
-var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactInstanceMap = require('ReactInstanceMap');
-var ReactNativeMount = require('ReactNativeMount');
-var ReactNativeTagHandles = require('ReactNativeTagHandles');
+var ReactNativeComponentTree = require('ReactNativeComponentTree');
 
 function traverseOwnerTreeUp(hierarchy, instance) {
   if (instance) {
@@ -22,38 +19,8 @@ function traverseOwnerTreeUp(hierarchy, instance) {
   }
 }
 
-function findInstance(component, targetID) {
-  if (targetID === findRootNodeID(component)) {
-    return component;
-  }
-  if (component._renderedComponent) {
-    return findInstance(component._renderedComponent, targetID);
-  } else {
-    for (var key in component._renderedChildren) {
-      var child = component._renderedChildren[key];
-      if (ReactInstanceHandles.isAncestorIDOf(findRootNodeID(child), targetID)) {
-        var instance = findInstance(child, targetID);
-        if (instance) {
-          return instance;
-        }
-      }
-    }
-  }
-}
-
-function findRootNodeID(component) {
-  var internalInstance = ReactInstanceMap.get(component);
-  return internalInstance ? internalInstance._rootNodeID : component._rootNodeID;
-}
-
 function findInstanceByNativeTag(rootTag, nativeTag) {
-  var containerID = ReactNativeTagHandles.tagToRootNodeID[rootTag];
-  var rootInstance = ReactNativeMount._instancesByContainerID[containerID];
-  var targetID = ReactNativeTagHandles.tagToRootNodeID[nativeTag];
-  if (!targetID) {
-    return undefined;
-  }
-  return findInstance(rootInstance, targetID);
+  return ReactNativeComponentTree.getInstanceFromNode(nativeTag);
 }
 
 function getOwnerHierarchy(instance) {

Libraries/Interaction/InteractionManager.js

@@ -26,6 +26,7 @@ import type {Task} from 'TaskQueue';
 const _emitter = new EventEmitter();
 
 const DEBUG_DELAY = 0;
+const DEBUG = false;
 
 /**
  * InteractionManager allows long-running work to be scheduled after any
@@ -100,6 +101,7 @@ var InteractionManager = {
    * Notify manager that an interaction has started.
    */
   createInteractionHandle(): Handle {
+    DEBUG && console.log('create interaction handle');
     _scheduleUpdate();
     var handle = ++_inc;
     _addInteractionSet.add(handle);
@@ -110,6 +112,7 @@ var InteractionManager = {
    * Notify manager that an interaction has completed.
    */
   clearInteractionHandle(handle: Handle) {
+    DEBUG && console.log('clear interaction handle');
     invariant(
       !!handle,
       'Must provide a handle to clear.'

Libraries/Interaction/JSEventLoopWatchdog.js

@@ -39,6 +39,7 @@ const JSEventLoopWatchdog = {
     totalStallTime = 0;
     stallCount = 0;
     longestStall = 0;
+    lastInterval = performanceNow();
   },
   addHandler: function(handler: Handler) {
     handlers.push(handler);
@@ -49,7 +50,7 @@ const JSEventLoopWatchdog = {
       return;
     }
     installed = true;
-    let lastInterval = performanceNow();
+    lastInterval = performanceNow();
     function iteration() {
       const now = performanceNow();
       const busyTime = now - lastInterval;
@@ -80,6 +81,7 @@ let installed = false;
 let totalStallTime = 0;
 let stallCount = 0;
 let longestStall = 0;
+let lastInterval = 0;
 const handlers: Array<Handler> = [];
 
 module.exports = JSEventLoopWatchdog;

Libraries/Interaction/PanResponder.js

@@ -1,27 +1,34 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * @providesModule PanResponder
  */
 
-"use strict";
+'use strict';
 
-var TouchHistoryMath = require('TouchHistoryMath');
+const InteractionManager = require('./InteractionManager');
+const TouchHistoryMath = require('TouchHistoryMath');
 
-var currentCentroidXOfTouchesChangedAfter =
-  TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
-var currentCentroidYOfTouchesChangedAfter =
-  TouchHistoryMath.currentCentroidYOfTouchesChangedAfter;
-var previousCentroidXOfTouchesChangedAfter =
-  TouchHistoryMath.previousCentroidXOfTouchesChangedAfter;
-var previousCentroidYOfTouchesChangedAfter =
-  TouchHistoryMath.previousCentroidYOfTouchesChangedAfter;
-var currentCentroidX = TouchHistoryMath.currentCentroidX;
-var currentCentroidY = TouchHistoryMath.currentCentroidY;
+const currentCentroidXOfTouchesChangedAfter = TouchHistoryMath.currentCentroidXOfTouchesChangedAfter;
+const currentCentroidYOfTouchesChangedAfter = TouchHistoryMath.currentCentroidYOfTouchesChangedAfter;
+const previousCentroidXOfTouchesChangedAfter = TouchHistoryMath.previousCentroidXOfTouchesChangedAfter;
+const previousCentroidYOfTouchesChangedAfter = TouchHistoryMath.previousCentroidYOfTouchesChangedAfter;
+const currentCentroidX = TouchHistoryMath.currentCentroidX;
+const currentCentroidY = TouchHistoryMath.currentCentroidY;
 
 /**
  * `PanResponder` reconciles several touches into a single gesture. It makes
  * single-touch gestures resilient to extra touches, and can be used to
  * recognize simple multi-touch gestures.
  *
+ * By default, `PanResponder` holds an `InteractionManager handle to block
+ * long-running JS events from interrupting active gestures.
+ *
  * It provides a predictable wrapper of the responder handlers provided by the
  * [gesture responder system](docs/gesture-responder-system.html).
  * For each handler, it provides a new `gestureState` object alongside the
@@ -112,7 +119,7 @@ var currentCentroidY = TouchHistoryMath.currentCentroidY;
  * [PanResponder example in UIExplorer](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PanResponderExample.js)
  */
 
-var PanResponder = {
+const PanResponder = {
 
   /**
    *
@@ -177,7 +184,7 @@ var PanResponder = {
    * - vx/vy: Velocity.
    */
 
-  _initializeGestureState: function(gestureState) {
+  _initializeGestureState: function (gestureState) {
     gestureState.moveX = 0;
     gestureState.moveY = 0;
     gestureState.x0 = 0;
@@ -215,27 +222,20 @@ var PanResponder = {
    * typical responder callback pattern (without using `PanResponder`), but
    * avoids more dispatches than necessary.
    */
-  _updateGestureStateOnMove: function(gestureState, touchHistory) {
+  _updateGestureStateOnMove: function (gestureState, touchHistory) {
     gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
-    gestureState.moveX = currentCentroidXOfTouchesChangedAfter(
-      touchHistory,
-      gestureState._accountsForMovesUpTo
-    );
-    gestureState.moveY = currentCentroidYOfTouchesChangedAfter(
-      touchHistory,
-      gestureState._accountsForMovesUpTo
-    );
-    var movedAfter = gestureState._accountsForMovesUpTo;
-    var prevX = previousCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
-    var x = currentCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
-    var prevY = previousCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
-    var y = currentCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
-    var nextDX = gestureState.dx + (x - prevX);
-    var nextDY = gestureState.dy + (y - prevY);
+    gestureState.moveX = currentCentroidXOfTouchesChangedAfter(touchHistory, gestureState._accountsForMovesUpTo);
+    gestureState.moveY = currentCentroidYOfTouchesChangedAfter(touchHistory, gestureState._accountsForMovesUpTo);
+    const movedAfter = gestureState._accountsForMovesUpTo;
+    const prevX = previousCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
+    const x = currentCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
+    const prevY = previousCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
+    const y = currentCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
+    const nextDX = gestureState.dx + (x - prevX);
+    const nextDY = gestureState.dy + (y - prevY);
 
     // TODO: This must be filtered intelligently.
-    var dt =
-      (touchHistory.mostRecentTimeStamp - gestureState._accountsForMovesUpTo);
+    const dt = touchHistory.mostRecentTimeStamp - gestureState._accountsForMovesUpTo;
     gestureState.vx = (nextDX - gestureState.dx) / dt;
     gestureState.vy = (nextDY - gestureState.dy) / dt;
 
@@ -276,22 +276,27 @@ var PanResponder = {
    *  accordingly. (numberActiveTouches) may not be totally accurate unless you
    *  are the responder.
    */
-  create: function(config) {
-    var gestureState = {
+  create: function (config) {
+    const interactionState = {
+      handle: (null: ?number),
+    };
+    const gestureState = {
       // Useful for debugging
       stateID: Math.random(),
     };
     PanResponder._initializeGestureState(gestureState);
-    var panHandlers = {
-      onStartShouldSetResponder: function(e) {
-        return config.onStartShouldSetPanResponder === undefined ? false :
+    const panHandlers = {
+      onStartShouldSetResponder: function (e) {
+        return config.onStartShouldSetPanResponder === undefined ?
+          false :
           config.onStartShouldSetPanResponder(e, gestureState);
       },
-      onMoveShouldSetResponder: function(e) {
-        return config.onMoveShouldSetPanResponder === undefined ? false :
+      onMoveShouldSetResponder: function (e) {
+        return config.onMoveShouldSetPanResponder === undefined ?
+          false :
           config.onMoveShouldSetPanResponder(e, gestureState);
       },
-      onStartShouldSetResponderCapture: function(e) {
+      onStartShouldSetResponderCapture: function (e) {
         // TODO: Actually, we should reinitialize the state any time
         // touches.length increases from 0 active to > 0 active.
         if (e.nativeEvent.touches.length === 1) {
@@ -299,11 +304,12 @@ var PanResponder = {
         }
         gestureState.numberActiveTouches = e.touchHistory.numberActiveTouches;
         return config.onStartShouldSetPanResponderCapture !== undefined ?
-          config.onStartShouldSetPanResponderCapture(e, gestureState) : false;
+          config.onStartShouldSetPanResponderCapture(e, gestureState) :
+          false;
       },
 
-      onMoveShouldSetResponderCapture: function(e) {
-        var touchHistory = e.touchHistory;
+      onMoveShouldSetResponderCapture: function (e) {
+        const touchHistory = e.touchHistory;
         // Responder system incorrectly dispatches should* to current responder
         // Filter out any touch moves past the first one - we would have
         // already processed multi-touch geometry during the first event.
@@ -312,37 +318,46 @@ var PanResponder = {
         }
         PanResponder._updateGestureStateOnMove(gestureState, touchHistory);
         return config.onMoveShouldSetPanResponderCapture ?
-          config.onMoveShouldSetPanResponderCapture(e, gestureState) : false;
+          config.onMoveShouldSetPanResponderCapture(e, gestureState) :
+          false;
       },
 
-      onResponderGrant: function(e) {
+      onResponderGrant: function (e) {
+        if (!interactionState.handle) {
+          interactionState.handle = InteractionManager.createInteractionHandle();
+        }
         gestureState.x0 = currentCentroidX(e.touchHistory);
         gestureState.y0 = currentCentroidY(e.touchHistory);
         gestureState.dx = 0;
         gestureState.dy = 0;
-        config.onPanResponderGrant && config.onPanResponderGrant(e, gestureState);
+        if (config.onPanResponderGrant) {
+          config.onPanResponderGrant(e, gestureState);
+        }
         // TODO: t7467124 investigate if this can be removed
-        return config.onShouldBlockNativeResponder === undefined ? true :
+        return config.onShouldBlockNativeResponder === undefined ?
+          true :
           config.onShouldBlockNativeResponder();
       },
 
-      onResponderReject: function(e) {
-        config.onPanResponderReject && config.onPanResponderReject(e, gestureState);
+      onResponderReject: function (e) {
+        clearInteractionHandle(interactionState, config.onPanResponderReject, e, gestureState);
       },
 
-      onResponderRelease: function(e) {
-        config.onPanResponderRelease && config.onPanResponderRelease(e, gestureState);
+      onResponderRelease: function (e) {
+        clearInteractionHandle(interactionState, config.onPanResponderRelease, e, gestureState);
         PanResponder._initializeGestureState(gestureState);
       },
 
-      onResponderStart: function(e) {
-        var touchHistory = e.touchHistory;
+      onResponderStart: function (e) {
+        const touchHistory = e.touchHistory;
         gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
-        config.onPanResponderStart && config.onPanResponderStart(e, gestureState);
+        if (config.onPanResponderStart) {
+          config.onPanResponderStart(e, gestureState);
+        }
       },
 
-      onResponderMove: function(e) {
-        var touchHistory = e.touchHistory;
+      onResponderMove: function (e) {
+        const touchHistory = e.touchHistory;
         // Guard against the dispatch of two touch moves when there are two
         // simultaneously changed touches.
         if (gestureState._accountsForMovesUpTo === touchHistory.mostRecentTimeStamp) {
@@ -351,28 +366,45 @@ var PanResponder = {
         // Filter out any touch moves past the first one - we would have
         // already processed multi-touch geometry during the first event.
         PanResponder._updateGestureStateOnMove(gestureState, touchHistory);
-        config.onPanResponderMove && config.onPanResponderMove(e, gestureState);
+        if (config.onPanResponderMove) {
+          config.onPanResponderMove(e, gestureState);
+        }
       },
 
-      onResponderEnd: function(e) {
-        var touchHistory = e.touchHistory;
+      onResponderEnd: function (e) {
+        const touchHistory = e.touchHistory;
         gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
-        config.onPanResponderEnd && config.onPanResponderEnd(e, gestureState);
+        clearInteractionHandle(interactionState, config.onPanResponderEnd, e, gestureState);
       },
 
-      onResponderTerminate: function(e) {
-        config.onPanResponderTerminate &&
-          config.onPanResponderTerminate(e, gestureState);
+      onResponderTerminate: function (e) {
+        clearInteractionHandle(interactionState, config.onPanResponderTerminate, e, gestureState);
         PanResponder._initializeGestureState(gestureState);
       },
 
-      onResponderTerminationRequest: function(e) {
-        return config.onPanResponderTerminationRequest === undefined ? true :
+      onResponderTerminationRequest: function (e) {
+        return config.onPanResponderTerminationRequest === undefined ?
+          true :
           config.onPanResponderTerminationRequest(e, gestureState);
-      },
+      }
     };
-    return {panHandlers: panHandlers};
-  },
+    return { panHandlers: panHandlers };
+  }
 };
 
+function clearInteractionHandle(
+  interactionState: {handle: ?number},
+  callback: Function,
+  event: Object,
+  gestureState: Object
+) {
+  if (interactionState.handle) {
+    InteractionManager.clearInteractionHandle(interactionState.handle);
+    interactionState.handle = null;
+  }
+  if (callback) {
+    callback(event, gestureState);
+  }
+}
+
 module.exports = PanResponder;

Libraries/Interaction/__tests__/InteractionManager-test.js

@@ -5,7 +5,7 @@
 'use strict';
 
 jest
-  .autoMockOff()
+  .disableAutomock()
   .mock('ErrorUtils')
   .mock('BatchedBridge');
 
@@ -22,8 +22,8 @@ describe('InteractionManager', () => {
     jest.resetModuleRegistry();
     InteractionManager = require('InteractionManager');
 
-    interactionStart = jest.genMockFunction();
-    interactionComplete = jest.genMockFunction();
+    interactionStart = jest.fn();
+    interactionComplete = jest.fn();
 
     InteractionManager.addListener(
       InteractionManager.Events.interactionStart,
@@ -84,7 +84,7 @@ describe('InteractionManager', () => {
   });
 
   it('runs tasks asynchronously when there are interactions', () => {
-    var task = jest.genMockFunction();
+    var task = jest.fn();
     InteractionManager.runAfterInteractions(task);
     expect(task).not.toBeCalled();
 
@@ -93,7 +93,7 @@ describe('InteractionManager', () => {
   });
 
   it('runs tasks when interactions complete', () => {
-    var task = jest.genMockFunction();
+    var task = jest.fn();
     var handle = InteractionManager.createInteractionHandle();
     InteractionManager.runAfterInteractions(task);
 
@@ -106,8 +106,8 @@ describe('InteractionManager', () => {
   });
 
   it('does not run tasks twice', () => {
-    var task1 = jest.genMockFunction();
-    var task2 = jest.genMockFunction();
+    var task1 = jest.fn();
+    var task2 = jest.fn();
     InteractionManager.runAfterInteractions(task1);
     jest.runAllTimers();
 
@@ -118,10 +118,10 @@ describe('InteractionManager', () => {
   });
 
   it('runs tasks added while processing previous tasks', () => {
-    var task1 = jest.genMockFunction().mockImplementation(() => {
+    var task1 = jest.fn(() => {
       InteractionManager.runAfterInteractions(task2);
     });
-    var task2 = jest.genMockFunction();
+    var task2 = jest.fn();
 
     InteractionManager.runAfterInteractions(task1);
     expect(task2).not.toBeCalled();
@@ -138,7 +138,7 @@ describe('promise tasks', () => {
   let BatchedBridge;
   let sequenceId;
   function createSequenceTask(expectedSequenceId) {
-    return jest.genMockFunction().mockImplementation(() => {
+    return jest.fn(() => {
       expect(++sequenceId).toBe(expectedSequenceId);
     });
   }
@@ -151,7 +151,7 @@ describe('promise tasks', () => {
 
 
   it('should run a basic promise task', () => {
-    const task1 = jest.genMockFunction().mockImplementation(() => {
+    const task1 = jest.fn(() => {
       expect(++sequenceId).toBe(1);
       return new Promise(resolve => resolve());
     });
@@ -161,14 +161,14 @@ describe('promise tasks', () => {
   });
 
   it('should handle nested promises', () => {
-    const task1 = jest.genMockFunction().mockImplementation(() => {
+    const task1 = jest.fn(() => {
       expect(++sequenceId).toBe(1);
       return new Promise(resolve => {
         InteractionManager.runAfterInteractions({gen: task2, name: 'gen2'})
           .then(resolve);
       });
     });
-    const task2 = jest.genMockFunction().mockImplementation(() => {
+    const task2 = jest.fn(() => {
       expect(++sequenceId).toBe(2);
       return new Promise(resolve => resolve());
     });
@@ -180,7 +180,7 @@ describe('promise tasks', () => {
 
   it('should pause promise tasks during interactions then resume', () => {
     const task1 = createSequenceTask(1);
-    const task2 = jest.genMockFunction().mockImplementation(() => {
+    const task2 = jest.fn(() => {
       expect(++sequenceId).toBe(2);
       return new Promise(resolve => {
         setTimeout(() => {
@@ -238,7 +238,7 @@ describe('promise tasks', () => {
 
   const bigAsyncTest = () => {
     const task1 = createSequenceTask(1);
-    const task2 = jest.genMockFunction().mockImplementation(() => {
+    const task2 = jest.fn(() => {
       expect(++sequenceId).toBe(2);
       return new Promise(resolve => {
         InteractionManager.runAfterInteractions(task3);
@@ -249,7 +249,7 @@ describe('promise tasks', () => {
       });
     });
     const task3 = createSequenceTask(3);
-    const task4 = jest.genMockFunction().mockImplementation(() => {
+    const task4 = jest.fn(() => {
       expect(++sequenceId).toBe(4);
       return new Promise(resolve => {
         InteractionManager.runAfterInteractions(task5).then(resolve);

Libraries/Interaction/__tests__/InteractionMixin-test.js

@@ -1,9 +1,15 @@
 /**
- * Copyright 2004-present Facebook. All Rights Reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  */
 'use strict';
 
-jest.dontMock('InteractionMixin');
+jest.unmock('InteractionMixin');
 
 describe('InteractionMixin', () => {
   var InteractionManager;
@@ -19,9 +25,8 @@ describe('InteractionMixin', () => {
   });
 
   it('should start interactions', () => {
-    var timeout = 123;
-    component.createInteractionHandle(timeout);
-    expect(InteractionManager.createInteractionHandle).toBeCalled(timeout);
+    component.createInteractionHandle();
+    expect(InteractionManager.createInteractionHandle).toBeCalled();
   });
 
   it('should end interactions', () => {
@@ -31,7 +36,7 @@ describe('InteractionMixin', () => {
   });
 
   it('should schedule tasks', () => {
-    var task = jest.genMockFunction();
+    var task = jest.fn();
     component.runAfterInteractions(task);
     expect(InteractionManager.runAfterInteractions).toBeCalledWith(task);
   });

Libraries/Interaction/__tests__/TaskQueue-test.js

@@ -4,7 +4,7 @@
 
 'use strict';
 
-jest.dontMock('TaskQueue');
+jest.unmock('TaskQueue');
 
 function expectToBeCalledOnce(fn) {
   expect(fn.mock.calls.length).toBe(1);
@@ -23,13 +23,13 @@ describe('TaskQueue', () => {
   let onMoreTasks;
   let sequenceId;
   function createSequenceTask(expectedSequenceId) {
-    return jest.genMockFunction().mockImplementation(() => {
+    return jest.fn(() => {
       expect(++sequenceId).toBe(expectedSequenceId);
     });
   }
   beforeEach(() => {
     jest.resetModuleRegistry();
-    onMoreTasks = jest.genMockFunction();
+    onMoreTasks = jest.fn();
     const TaskQueue = require('TaskQueue');
     taskQueue = new TaskQueue({onMoreTasks});
     sequenceId = 0;
@@ -45,7 +45,7 @@ describe('TaskQueue', () => {
   });
 
   it('should handle blocking promise task', () => {
-    const task1 = jest.genMockFunction().mockImplementation(() => {
+    const task1 = jest.fn(() => {
       return new Promise(resolve => {
         setTimeout(() => {
           expect(++sequenceId).toBe(1);
@@ -71,7 +71,7 @@ describe('TaskQueue', () => {
   });
 
   it('should handle nested simple tasks', () => {
-    const task1 = jest.genMockFunction().mockImplementation(() => {
+    const task1 = jest.fn(() => {
       expect(++sequenceId).toBe(1);
       taskQueue.enqueue({run: task3, name: 'run3'});
     });
@@ -88,7 +88,7 @@ describe('TaskQueue', () => {
   });
 
   it('should handle nested promises', () => {
-    const task1 = jest.genMockFunction().mockImplementation(() => {
+    const task1 = jest.fn(() => {
       return new Promise(resolve => {
         setTimeout(() => {
           expect(++sequenceId).toBe(1);
@@ -97,7 +97,7 @@ describe('TaskQueue', () => {
         }, 1);
       });
     });
-    const task2 = jest.genMockFunction().mockImplementation(() => {
+    const task2 = jest.fn(() => {
       return new Promise(resolve => {
         setTimeout(() => {
           expect(++sequenceId).toBe(2);

Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js

@@ -22,14 +22,14 @@
 /* eslint strict: 0 */
 /* globals GLOBAL: true, window: true */
 
-require('regenerator/runtime');
+require('regenerator-runtime/runtime');
 
 if (typeof GLOBAL === 'undefined') {
-  global.GLOBAL = this;
+  global.GLOBAL = global;
 }
 
 if (typeof window === 'undefined') {
-  global.window = GLOBAL;
+  global.window = global;
 }
 
 function setUpConsole() {
@@ -53,27 +53,57 @@ function setUpConsole() {
  * For more info on that particular case, see:
  * https://github.com/facebook/react-native/issues/934
  */
-function polyfillGlobal(name, newValue, scope = GLOBAL) {
-  var descriptor = Object.getOwnPropertyDescriptor(scope, name) || {
-    // jest for some bad reasons runs the polyfill code multiple times. In jest
-    // environment, XmlHttpRequest doesn't exist so getOwnPropertyDescriptor
-    // returns undefined and defineProperty default for writable is false.
-    // Therefore, the second time it runs, defineProperty will fatal :(
-    writable: true,
-  };
-
-  if (scope[name] !== undefined) {
-    var backupName = `original${name[0].toUpperCase()}${name.substr(1)}`;
+function polyfillGlobal(name, newValue, scope = global) {
+  const descriptor = Object.getOwnPropertyDescriptor(scope, name);
+  if (descriptor) {
+    const backupName = `original${name[0].toUpperCase()}${name.substr(1)}`;
     Object.defineProperty(scope, backupName, {...descriptor, value: scope[name]});
   }
 
-  Object.defineProperty(scope, name, {...descriptor, value: newValue});
+  const {enumerable, writable} = descriptor || {};
+
+  // jest for some bad reasons runs the polyfill code multiple times. In jest
+  // environment, XmlHttpRequest doesn't exist so getOwnPropertyDescriptor
+  // returns undefined and defineProperty default for writable is false.
+  // Therefore, the second time it runs, defineProperty will fatal :(
+
+  Object.defineProperty(scope, name, {
+    configurable: true,
+    enumerable: enumerable !== false,
+    writable: writable !== false,
+    value: newValue,
+  });
+}
+
+function polyfillLazyGlobal(name, valueFn, scope = global) {
+  const descriptor = getPropertyDescriptor(scope, name);
+  if (descriptor) {
+    const backupName = `original${name[0].toUpperCase()}${name.substr(1)}`;
+    Object.defineProperty(scope, backupName, descriptor);
+  }
+
+  const {enumerable, writable} = descriptor || {};
+  Object.defineProperty(scope, name, {
+    configurable: true,
+    enumerable: enumerable !== false,
+    get() {
+      return (this[name] = valueFn());
+    },
+    set(value) {
+      Object.defineProperty(this, name, {
+        configurable: true,
+        enumerable: enumerable !== false,
+        writable: writable !== false,
+        value,
+      });
+    }
+  });
 }
 
 /**
  * Polyfill a module if it is not already defined in `scope`.
  */
-function polyfillIfNeeded(name, polyfill, scope = GLOBAL, descriptor = {}) {
+function polyfillIfNeeded(name, polyfill, scope = global, descriptor = {}) {
   if (scope[name] === undefined) {
     Object.defineProperty(scope, name, {...descriptor, value: polyfill});
   }
@@ -104,23 +134,22 @@ function setUpErrorHandler() {
  * unexplainably dropped timing signals.
  */
 function setUpTimers() {
-  var JSTimers = require('JSTimers');
-  GLOBAL.setTimeout = JSTimers.setTimeout;
-  GLOBAL.setInterval = JSTimers.setInterval;
-  GLOBAL.setImmediate = JSTimers.setImmediate;
-  GLOBAL.clearTimeout = JSTimers.clearTimeout;
-  GLOBAL.clearInterval = JSTimers.clearInterval;
-  GLOBAL.clearImmediate = JSTimers.clearImmediate;
-  GLOBAL.cancelAnimationFrame = JSTimers.clearInterval;
-  GLOBAL.requestAnimationFrame = function(cb) {
-    /*requestAnimationFrame() { [native code] };*/  // Trick scroller library
-    return JSTimers.requestAnimationFrame(cb);      // into thinking it's native
+  const defineLazyTimer = (name) => {
+    polyfillLazyGlobal(name, () => require('JSTimers')[name]);
   };
+  defineLazyTimer('setTimeout');
+  defineLazyTimer('setInterval');
+  defineLazyTimer('setImmediate');
+  defineLazyTimer('clearTimeout');
+  defineLazyTimer('clearInterval');
+  defineLazyTimer('clearImmediate');
+  defineLazyTimer('requestAnimationFrame');
+  defineLazyTimer('cancelAnimationFrame');
 }
 
 function setUpAlert() {
-  if (!GLOBAL.alert) {
-    GLOBAL.alert = function(text) {
+  if (!global.alert) {
+    global.alert = function(text) {
       // Require Alert on demand. Requiring it too early can lead to issues
       // with things like Platform not being fully initialized.
       require('Alert').alert('Alert', '' + text);
@@ -131,42 +160,43 @@ function setUpAlert() {
 function setUpPromise() {
   // The native Promise implementation throws the following error:
   // ERROR: Event loop not supported.
-  GLOBAL.Promise = require('Promise');
+  polyfillLazyGlobal('Promise', () => require('Promise'));
 }
 
 function setUpXHR() {
   // The native XMLHttpRequest in Chrome dev tools is CORS aware and won't
   // let you fetch anything from the internet
-  polyfillGlobal('XMLHttpRequest', require('XMLHttpRequest'));
-  polyfillGlobal('FormData', require('FormData'));
+  polyfillLazyGlobal('XMLHttpRequest', () => require('XMLHttpRequest'));
+  polyfillLazyGlobal('FormData', () => require('FormData'));
 
-  var fetchPolyfill = require('fetch');
-  polyfillGlobal('fetch', fetchPolyfill.fetch);
-  polyfillGlobal('Headers', fetchPolyfill.Headers);
-  polyfillGlobal('Request', fetchPolyfill.Request);
-  polyfillGlobal('Response', fetchPolyfill.Response);
+  polyfillLazyGlobal('fetch', () => require('fetch').fetch);
+  polyfillLazyGlobal('Headers', () => require('fetch').Headers);
+  polyfillLazyGlobal('Request', () => require('fetch').Request);
+  polyfillLazyGlobal('Response', () => require('fetch').Response);
 }
 
 function setUpGeolocation() {
-  polyfillIfNeeded('navigator', {}, GLOBAL, {
+  polyfillIfNeeded('navigator', {}, global, {
     writable: true,
     enumerable: true,
     configurable: true,
   });
-  polyfillGlobal('geolocation', require('Geolocation'), GLOBAL.navigator);
+  polyfillLazyGlobal('geolocation', () => require('Geolocation'), global.navigator);
 }
 
 function setUpMapAndSet() {
+  // We can't make these lazy as Map checks the global.Map to see if it's
+  // available but in our case it'll be a lazy getter.
   polyfillGlobal('Map', require('Map'));
   polyfillGlobal('Set', require('Set'));
 }
 
 function setUpProduct() {
-  Object.defineProperty(GLOBAL.navigator, 'product', {value: 'ReactNative'});
+  Object.defineProperty(global.navigator, 'product', {value: 'ReactNative'});
 }
 
 function setUpWebSockets() {
-  polyfillGlobal('WebSocket', require('WebSocket'));
+  polyfillLazyGlobal('WebSocket', () => require('WebSocket'));
 }
 
 function setUpProfile() {
@@ -176,20 +206,14 @@ function setUpProfile() {
   }
 }
 
-function setUpProcessEnv() {
-  GLOBAL.process = GLOBAL.process || {};
-  GLOBAL.process.env = GLOBAL.process.env || {};
-  if (!GLOBAL.process.env.NODE_ENV) {
-    GLOBAL.process.env.NODE_ENV = __DEV__ ? 'development' : 'production';
+function setUpProcess() {
+  global.process = global.process || {};
+  global.process.env = global.process.env || {};
+  if (!global.process.env.NODE_ENV) {
+    global.process.env.NODE_ENV = __DEV__ ? 'development' : 'production';
   }
 }
 
-function setUpNumber() {
-  polyfillIfNeeded('EPSILON', Math.pow(2, -52), Number);
-  polyfillIfNeeded('MAX_SAFE_INTEGER', Math.pow(2, 53) - 1, Number);
-  polyfillIfNeeded('MIN_SAFE_INTEGER', -(Math.pow(2, 53) - 1), Number);
-}
-
 function setUpDevTools() {
   // not when debugging in chrome
   if (__DEV__) { // TODO(9123099) Strip `__DEV__ &&`
@@ -200,7 +224,17 @@ function setUpDevTools() {
   }
 }
 
-setUpProcessEnv();
+function getPropertyDescriptor(object, name) {
+  while (object) {
+    const descriptor = Object.getOwnPropertyDescriptor(object, name);
+    if (descriptor) {
+      return descriptor;
+    }
+    object = Object.getPrototypeOf(object);
+  }
+}
+
+setUpProcess();
 setUpConsole();
 setUpTimers();
 setUpAlert();
@@ -212,7 +246,6 @@ setUpMapAndSet();
 setUpProduct();
 setUpWebSockets();
 setUpProfile();
-setUpNumber();
 setUpDevTools();
 
 // Just to make sure the JS gets packaged up. Wait until the JS environment has

Libraries/JavaScriptAppEngine/Initialization/__tests__/parseErrorStack-test.js

@@ -9,7 +9,7 @@
 'use strict';
 
 
-jest.autoMockOff();
+jest.disableAutomock();
 
 var parseErrorStack = require('parseErrorStack');
 

Libraries/LayoutAnimation/LayoutAnimation.js

@@ -86,6 +86,10 @@ function create(duration: number, type, creationProp): Config {
     update: {
       type,
     },
+    delete: {
+      type,
+      property: creationProp,
+    },
   };
 }
 
@@ -106,6 +110,10 @@ var Presets = {
       type: Types.spring,
       springDamping: 0.4,
     },
+    delete: {
+      type: Types.linear,
+      property: Properties.opacity,
+    },
   },
 };
 

Libraries/Linking/Linking.js

@@ -49,7 +49,9 @@ const DEVICE_NOTIF_EVENT = 'openURL';
  * NOTE: For instructions on how to add support for deep linking on Android,
  * refer [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
  *
- * NOTE: For iOS, in case you also want to listen to incoming app links during your app's
+ * NOTE: On iOS you'll need to link `RCTLinking` to your project by following
+ * the steps described [here](docs/linking-libraries-ios.html#manual-linking).
+ * In case you also want to listen to incoming app links during your app's
  * execution you'll need to add the following lines to you `*AppDelegate.m`:
  *
  * ```

Libraries/LinkingIOS/RCTLinkingManager.m

@@ -21,6 +21,13 @@ NSString *const RCTOpenURLNotification = @"RCTOpenURLNotification";
 
 RCT_EXPORT_MODULE()
 
+- (instancetype)init
+{
+  // We're only overriding this to ensure the module gets created at startup
+  // TODO (t11106126): Remove once we have more declarative control over module setup.
+  return [super init];
+}
+
 - (void)setBridge:(RCTBridge *)bridge
 {
   _bridge = bridge;

Libraries/Modal/Modal.js

@@ -11,14 +11,15 @@
  */
 'use strict';
 
-var Platform = require('Platform');
-var PropTypes = require('ReactPropTypes');
-var React = require('React');
-var StyleSheet = require('StyleSheet');
-var View = require('View');
+const Platform = require('Platform');
+const PropTypes = require('ReactPropTypes');
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const View = require('View');
+const deprecatedPropType = require('deprecatedPropType');
 
-var requireNativeComponent = require('requireNativeComponent');
-var RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
+const requireNativeComponent = require('requireNativeComponent');
+const RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
 
 /**
  * A Modal component covers the native view (e.g. UIViewController, Activity)
@@ -34,43 +35,63 @@ var RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
  * configureScene property.
  */
 class Modal extends React.Component {
+  static propTypes = {
+    animated: deprecatedPropType(
+      PropTypes.bool,
+      'Use the `animationType` prop instead.'
+    ),
+    animationType: PropTypes.oneOf(['none', 'slide', 'fade']),
+    transparent: PropTypes.bool,
+    visible: PropTypes.bool,
+    onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func,
+    onShow: PropTypes.func,
+  };
+
+  static defaultProps = {
+    visible: true,
+  };
+
   render(): ?ReactElement {
     if (this.props.visible === false) {
       return null;
     }
 
-    if (this.props.transparent) {
-      var containerBackgroundColor = {backgroundColor: 'transparent'};
+    const containerBackgroundColor = {
+      backgroundColor: this.props.transparent ? 'transparent' : 'white',
+    };
+
+    let animationType = this.props.animationType;
+    if (!animationType) {
+      // manually setting default prop here to keep support for the deprecated 'animated' prop
+      animationType = 'none';
+      if (this.props.animated) {
+        animationType = 'slide';
+      }
     }
 
     return (
       <RCTModalHostView
-        animated={this.props.animated}
+        animationType={animationType}
         transparent={this.props.transparent}
         onRequestClose={this.props.onRequestClose}
         onShow={this.props.onShow}
-        style={styles.modal}>
+        style={styles.modal}
+        onStartShouldSetResponder={this._shouldSetResponder}
+        >
         <View style={[styles.container, containerBackgroundColor]}>
           {this.props.children}
         </View>
       </RCTModalHostView>
     );
   }
+
+  // We don't want any responder events bubbling out of the modal.
+  _shouldSetResponder(): boolean {
+    return true;
+  }
 }
 
-Modal.propTypes = {
-  animated: PropTypes.bool,
-  transparent: PropTypes.bool,
-  visible: PropTypes.bool,
-  onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func,
-  onShow: PropTypes.func,
-};
-
-Modal.defaultProps = {
-  visible: true,
-};
-
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   modal: {
     position: 'absolute',
   },
@@ -81,4 +102,4 @@ var styles = StyleSheet.create({
   }
 });
 
-module.exports = Modal;
+module.exports = Modal;

Libraries/NavigationExperimental/NavigationAnimatedView.js

@@ -39,6 +39,7 @@ type Props = {
 };
 
 type State = {
+  layout: NavigationLayout,
   position: NavigationAnimatedValue,
   scenes: Array<NavigationScene>,
 };
@@ -61,7 +62,6 @@ function applyDefaultAnimation(
 class NavigationAnimatedView
   extends React.Component<any, Props, State> {
 
-  _layout: NavigationLayout;
   _onLayout: (event: any) => void;
   _onProgressChange: (data: {value: number}) => void;
   _positionListener: any;
@@ -84,14 +84,18 @@ class NavigationAnimatedView
   constructor(props: Props, context: any) {
     super(props, context);
 
-    this._layout = {
-      initWidth: 0,
-      initHeight: 0,
-      width: new Animated.Value(0),
+    // The initial layout isn't measured. Measured layout will be only available
+    // when the component is mounted.
+    const layout = {
       height: new Animated.Value(0),
+      initHeight: 0,
+      initWidth: 0,
+      isMeasured: false,
+      width: new Animated.Value(0),
     };
 
     this.state = {
+      layout,
       position: new Animated.Value(this.props.navigationState.index),
       scenes: NavigationScenesReducer([], this.props.navigationState),
     };
@@ -180,7 +184,7 @@ class NavigationAnimatedView
     } = this.state;
 
     return renderScene({
-      layout: this._layout,
+      layout: this.state.layout,
       navigationState,
       onNavigate,
       position,
@@ -203,7 +207,7 @@ class NavigationAnimatedView
       } = this.state;
 
       return renderOverlay({
-        layout: this._layout,
+        layout: this.state.layout,
         navigationState,
         onNavigate,
         position,
@@ -218,15 +222,16 @@ class NavigationAnimatedView
     const {height, width} = event.nativeEvent.layout;
 
     const layout = {
-      ...this._layout,
+      ...this.state.layout,
       initHeight: height,
       initWidth: width,
+      isMeasured: true,
     };
 
-    this._layout = layout;
-
     layout.height.setValue(height);
     layout.width.setValue(width);
+
+    this.setState({ layout });
   }
 }
 

Libraries/NavigationExperimental/NavigationContainer.js

@@ -16,7 +16,7 @@ var NavigationRootContainer = require('NavigationRootContainer');
 
 function createNavigationContainer(
   Component: ReactClass<any>,
-): ReactClass {
+): ReactClass & Object {
   class NavigationComponent extends React.Component {
     render() {
       return (