[0.27.0] Bump version numbers

Summary:
This PR adds the C++ stdlib to the linker flags and sets the C++ standard that’s used to v14.

I have tested this with my app, without it any CP build would fail unless users add those flags to the generated projects themselves.

/cc grabbou
Closes https://github.com/facebook/react-native/pull/7800

Differential Revision: D3360421

fbshipit-source-id: 0a80030dd255f073a201acc6e1c846be114c2c2a

.eslintrc

@@ -221,17 +221,19 @@
 
     "react/display-name": 0,
     "react/jsx-boolean-value": 0,
+    "react/jsx-no-duplicate-props": 2,
     "react/jsx-no-undef": 1,
     "react/jsx-sort-props": 0,
-    "react/jsx-uses-react": 0,
+    "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
     "react/no-did-mount-set-state": [1, "allow-in-func"],
     "react/no-did-update-set-state": [1, "allow-in-func"],
     "react/no-multi-comp": 0,
+    "react/no-string-refs": 1,
     "react/no-unknown-property": 0,
     "react/prop-types": 0,
-    "react/react-in-jsx-scope": 0,
+    "react/react-in-jsx-scope": 1,
     "react/self-closing-comp": 1,
-    "react/wrap-multilines": 0
+    "react/wrap-multilines": 0,
   }
 }

.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
@@ -48,6 +46,9 @@
 # Ignore BUCK generated folders
 .*\.buckd/
 
+# Ignore RNPM
+.*/local-cli/rnpm/.*
+
 .*/node_modules/is-my-json-valid/test/.*\.json
 .*/node_modules/iconv-lite/encodings/tables/.*\.json
 .*/node_modules/y18n/test/.*\.json
@@ -81,15 +82,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-5]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-5]\\|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.25.0

.gitignore

@@ -49,3 +49,6 @@ node_modules
 
 # OS X
 .DS_Store
+
+# Test generated files
+/ReactAndroid/src/androidTest/assets/AndroidTestBundle.js

.npmignore

@@ -0,0 +1,2 @@
+# rnpm
+/local-cli/rnpm

.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/ListViewExample.js

@@ -58,17 +58,20 @@ var ListViewSimpleExample = React.createClass({
           dataSource={this.state.dataSource}
           renderRow={this._renderRow}
           renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
-          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
+          renderSeparator={this._renderSeperator}
         />
       </UIExplorerPage>
     );
   },
 
-  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
+  _renderRow: function(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
     var rowHash = Math.abs(hashCode(rowData));
     var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
     return (
-      <TouchableHighlight onPress={() => this._pressRow(rowID)}>
+      <TouchableHighlight onPress={() => {
+          this._pressRow(rowID);
+          highlightRow(sectionID, rowID);
+        }}>
         <View>
           <View style={styles.row}>
             <Image style={styles.thumb} source={imgSource} />
@@ -96,6 +99,18 @@ var ListViewSimpleExample = React.createClass({
       this._genRows(this._pressData)
     )});
   },
+
+  _renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
+    return (
+      <View
+        key={`${sectionID}-${rowID}`}
+        style={{
+          height: adjacentRowHighlighted ? 4 : 1,
+          backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
+        }}
+      />
+    );
+  }
 });
 
 var THUMB_URLS = [
@@ -130,10 +145,6 @@ var styles = StyleSheet.create({
     padding: 10,
     backgroundColor: '#F6F6F6',
   },
-  separator: {
-    height: 1,
-    backgroundColor: '#CCCCCC',
-  },
   thumb: {
     width: 64,
     height: 64,

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/NavigationExperimental/LegacyNavigator/BreadcrumbNavSample.js

@@ -1,165 +0,0 @@
-/**
- * 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.
-*/
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity
-} = ReactNative;
-
-var _getRandomRoute = function() {
-  return {
-    title: '#' + Math.ceil(Math.random() * 1000),
-  };
-};
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var BreadcrumbNavSample = React.createClass({
-
-  componentWillMount: function() {
-    this._navBarRouteMapper = {
-      rightContentForRoute: function(route, navigator) {
-        return null;
-      },
-      titleContentForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={() => navigator.push(_getRandomRoute())}>
-            <Text style={styles.titleText}>{route.title}</Text>
-          </TouchableOpacity>
-        );
-      },
-      iconForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={() => { navigator.popToRoute(route); }}
-            style={styles.crumbIconPlaceholder}
-          />
-        );
-      },
-      separatorForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={navigator.pop}
-            style={styles.crumbSeparatorPlaceholder}
-          />
-        );
-      }
-    };
-  },
-
-  _renderScene: function(route, navigator) {
-    return (
-      <ScrollView style={styles.scene}>
-        <NavButton
-          onPress={() => { navigator.push(_getRandomRoute()); }}
-          text="Push"
-        />
-        <NavButton
-          onPress={() => { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]); }}
-          text="Reset w/ 2 scenes"
-        />
-        <NavButton
-          onPress={() => { navigator.popToTop(); }}
-          text="Pop to top"
-        />
-        <NavButton
-          onPress={() => { navigator.replace(_getRandomRoute()); }}
-          text="Replace"
-        />
-        <NavButton
-          onPress={() => { this.props.navigator.pop(); }}
-          text="Close breadcrumb example"
-        />
-      </ScrollView>
-    );
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        style={styles.container}
-        initialRoute={_getRandomRoute()}
-        renderScene={this._renderScene}
-        navigationBar={
-          <Navigator.BreadcrumbNavigationBar
-            routeMapper={this._navBarRouteMapper}
-          />
-        }
-      />
-    );
-  },
-
-
-
-});
-
-var styles = StyleSheet.create({
-  scene: {
-    paddingTop: 50,
-    flex: 1,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  container: {
-    overflow: 'hidden',
-    backgroundColor: '#dddddd',
-    flex: 1,
-  },
-  titleText: {
-    fontSize: 18,
-    color: '#666666',
-    textAlign: 'center',
-    fontWeight: 'bold',
-    lineHeight: 32,
-  },
-  crumbIconPlaceholder: {
-    flex: 1,
-    backgroundColor: '#666666',
-  },
-  crumbSeparatorPlaceholder: {
-    flex: 1,
-    backgroundColor: '#aaaaaa',
-  },
-});
-
-module.exports = BreadcrumbNavSample;

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/JumpingNavSample.js

@@ -1,219 +0,0 @@
-/**
- * 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.
-*/
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-  TabBarIOS,
-  Text,
-  TouchableHighlight,
-  View,
-} = ReactNative;
-
-var _getRandomRoute = function() {
-  return {
-    randNumber: Math.ceil(Math.random() * 1000),
-  };
-};
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var ROUTE_STACK = [
-  _getRandomRoute(),
-  _getRandomRoute(),
-  _getRandomRoute(),
-];
-var INIT_ROUTE_INDEX = 1;
-
-class JumpingNavBar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      tabIndex: props.initTabIndex,
-    };
-  }
-  handleWillFocus(route) {
-    var tabIndex = ROUTE_STACK.indexOf(route);
-    this.setState({ tabIndex, });
-  }
-  render() {
-    return (
-      <View style={styles.tabs}>
-        <TabBarIOS>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_notification')}
-            selected={this.state.tabIndex === 0}
-            onPress={() => {
-              this.props.onTabIndex(0);
-              this.setState({ tabIndex: 0, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_list')}
-            selected={this.state.tabIndex === 1}
-            onPress={() => {
-              this.props.onTabIndex(1);
-              this.setState({ tabIndex: 1, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_settings')}
-            selected={this.state.tabIndex === 2}
-            onPress={() => {
-              this.props.onTabIndex(2);
-              this.setState({ tabIndex: 2, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-        </TabBarIOS>
-      </View>
-    );
-  }
-}
-
-var JumpingNavSample = React.createClass({
-  render: function() {
-    return (
-      <Navigator
-        debugOverlay={false}
-        style={styles.appContainer}
-        ref={(navigator) => {
-          this._navigator = navigator;
-        }}
-        initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
-        initialRouteStack={ROUTE_STACK}
-        renderScene={this.renderScene}
-        configureScene={() => ({
-          ...Navigator.SceneConfigs.HorizontalSwipeJump,
-        })}
-        navigationBar={
-          <JumpingNavBar
-            ref={(navBar) => { this.navBar = navBar; }}
-            initTabIndex={INIT_ROUTE_INDEX}
-            routeStack={ROUTE_STACK}
-            onTabIndex={(index) => {
-              this._navigator.jumpTo(ROUTE_STACK[index]);
-            }}
-          />
-        }
-      />
-    );
-  },
-
-  renderScene: function(route, navigator) {
-    var backBtn;
-    var forwardBtn;
-    if (ROUTE_STACK.indexOf(route) !== 0) {
-      backBtn = (
-        <NavButton
-          onPress={() => {
-            navigator.jumpBack();
-          }}
-          text="jumpBack"
-        />
-      );
-    }
-    if (ROUTE_STACK.indexOf(route) !== ROUTE_STACK.length - 1) {
-      forwardBtn = (
-        <NavButton
-          onPress={() => {
-            navigator.jumpForward();
-          }}
-          text="jumpForward"
-        />
-      );
-    }
-    return (
-      <ScrollView style={styles.scene}>
-        <Text style={styles.messageText}>#{route.randNumber}</Text>
-        {backBtn}
-        {forwardBtn}
-        <NavButton
-          onPress={() => {
-            navigator.jumpTo(ROUTE_STACK[1]);
-          }}
-          text="jumpTo middle route"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.pop();
-          }}
-          text="Exit Navigation Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Came from jumping example',
-            });
-          }}
-          text="Nav Menu"
-        />
-      </ScrollView>
-    );
-  },
-});
-
-var styles = StyleSheet.create({
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  appContainer: {
-    overflow: 'hidden',
-    backgroundColor: '#dddddd',
-    flex: 1,
-  },
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#EAEAEA',
-  },
-  tabs: {
-    height: 50,
-  }
-});
-
-module.exports = JumpingNavSample;

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/LegacyNavigatorExample.js

@@ -1,220 +0,0 @@
-/**
- * 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.
- *
- * 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.
- */
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-} = ReactNative;
-
-var BreadcrumbNavSample = require('./BreadcrumbNavSample');
-var NavigationBarSample = require('./NavigationBarSample');
-var JumpingNavSample = require('./JumpingNavSample');
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-class NavMenu extends React.Component {
-  render() {
-    return (
-      <ScrollView style={styles.scene}>
-        <Text style={styles.messageText}>{this.props.message}</Text>
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Swipe right to dismiss',
-              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
-            });
-          }}
-          text="Float in from right"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Swipe down to dismiss',
-              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
-            });
-          }}
-          text="Float in from bottom"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.pop();
-          }}
-          text="Pop"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.popToTop();
-          }}
-          text="Pop to top"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'navbar' });
-          }}
-          text="Navbar Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'jumping' });
-          }}
-          text="Jumping Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'breadcrumbs' });
-          }}
-          text="Breadcrumbs Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.onExampleExit();
-          }}
-          text="Exit <LegacyNavigator> Example"
-        />
-      </ScrollView>
-    );
-  }
-}
-
-var TabBarExample = React.createClass({
-
-  statics: {
-    title: '<LegacyNavigator> (Experimental)',
-    description: 'Experimental navigator that ports the API of the current ' +
-      'Navigator component',
-  },
-
-  renderScene: function(route, nav) {
-    switch (route.id) {
-      case 'navbar':
-        return <NavigationBarSample navigator={nav} />;
-      case 'breadcrumbs':
-        return <BreadcrumbNavSample navigator={nav} />;
-      case 'jumping':
-        return <JumpingNavSample navigator={nav} />;
-      default:
-        return (
-          <NavMenu
-            message={route.message}
-            navigator={nav}
-            onExampleExit={this.props.onExampleExit}
-          />
-        );
-    }
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        ref={this._setNavigatorRef}
-        style={styles.container}
-        initialRoute={{ message: 'First Scene', }}
-        renderScene={this.renderScene}
-        configureScene={(route) => {
-          if (route.sceneConfig) {
-            return route.sceneConfig;
-          }
-          return Navigator.SceneConfigs.FloatFromBottom;
-        }}
-      />
-    );
-  },
-
-
-  componentWillUnmount: function() {
-    this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
-
-  _setNavigatorRef: function(navigator) {
-    if (navigator !== this._navigator) {
-      this._navigator = navigator;
-
-      if (navigator) {
-        var callback = (event) => {
-          console.log(
-            `LegacyNavigator: event ${event.type}`,
-            {
-              route: JSON.stringify(event.data.route),
-              target: event.target,
-              type: event.type,
-            }
-          );
-        };
-        // Observe focus change events from the owner.
-        this._listeners = [
-          navigator.navigationContext.addListener('willfocus', callback),
-          navigator.navigationContext.addListener('didfocus', callback),
-        ];
-      }
-    }
-  },
-});
-
-var styles = StyleSheet.create({
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  container: {
-    flex: 1,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#ccc',
-  }
-});
-
-TabBarExample.external = true;
-
-module.exports = TabBarExample;

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/NavigationBarSample.js

@@ -1,202 +0,0 @@
-/**
- * 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.
-*/
-'use strict';
-
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity,
-} = ReactNative;
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var NavigationBarRouteMapper = {
-
-  LeftButton: function(route, navigator, index, navState) {
-    if (index === 0) {
-      return null;
-    }
-
-    var previousRoute = navState.routeStack[index - 1];
-    return (
-      <TouchableOpacity
-        onPress={() => navigator.pop()}
-        style={styles.navBarLeftButton}>
-        <Text style={[styles.navBarText, styles.navBarButtonText]}>
-          {previousRoute.title}
-        </Text>
-      </TouchableOpacity>
-    );
-  },
-
-  RightButton: function(route, navigator, index, navState) {
-    return (
-      <TouchableOpacity
-        onPress={() => navigator.push(newRandomRoute())}
-        style={styles.navBarRightButton}>
-        <Text style={[styles.navBarText, styles.navBarButtonText]}>
-          Next
-        </Text>
-      </TouchableOpacity>
-    );
-  },
-
-  Title: function(route, navigator, index, navState) {
-    return (
-      <Text style={[styles.navBarText, styles.navBarTitleText]}>
-        {route.title} [{index}]
-      </Text>
-    );
-  },
-
-};
-
-function newRandomRoute() {
-  return {
-    title: '#' + Math.ceil(Math.random() * 1000),
-  };
-}
-
-var NavigationBarSample = React.createClass({
-
-  componentWillMount: function() {
-    var navigator = this.props.navigator;
-
-    var callback = (event) => {
-      console.log(
-        `NavigationBarSample : event ${event.type}`,
-        {
-          route: JSON.stringify(event.data.route),
-          target: event.target,
-          type: event.type,
-        }
-      );
-    };
-
-    // Observe focus change events from this component.
-    this._listeners = [
-      navigator.navigationContext.addListener('willfocus', callback),
-      navigator.navigationContext.addListener('didfocus', callback),
-    ];
-  },
-
-  componentWillUnmount: function() {
-    this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        debugOverlay={false}
-        style={styles.appContainer}
-        initialRoute={newRandomRoute()}
-        renderScene={(route, navigator) => (
-          <ScrollView style={styles.scene}>
-            <Text style={styles.messageText}>{route.content}</Text>
-            <NavButton
-              onPress={() => {
-                navigator.immediatelyResetRouteStack([
-                  newRandomRoute(),
-                  newRandomRoute(),
-                  newRandomRoute(),
-                ]);
-              }}
-              text="Reset w/ 3 scenes"
-            />
-            <NavButton
-              onPress={() => {
-                this.props.navigator.pop();
-              }}
-              text="Exit NavigationBar Example"
-            />
-          </ScrollView>
-        )}
-        navigationBar={
-          <Navigator.NavigationBar
-            routeMapper={NavigationBarRouteMapper}
-            style={styles.navBar}
-          />
-        }
-      />
-    );
-  },
-
-});
-
-var styles = StyleSheet.create({
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  navBar: {
-    backgroundColor: 'white',
-  },
-  navBarText: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-  navBarTitleText: {
-    color: '#373E4D',
-    fontWeight: '500',
-    marginVertical: 9,
-  },
-  navBarLeftButton: {
-    paddingLeft: 10,
-  },
-  navBarRightButton: {
-    paddingRight: 10,
-  },
-  navBarButtonText: {
-    color: '#5890FF',
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#EAEAEA',
-  },
-});
-
-module.exports = NavigationBarSample;

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -37,10 +37,9 @@ const  {
   Card: NavigationCard,
   Header: NavigationHeader,
   Reducer: NavigationReducer,
-  RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
-const NavigationBasicReducer = NavigationReducer.StackReducer({
+const ExampleReducer = NavigationReducer.StackReducer({
   getPushedReducerForAction: (action) => {
     if (action.type === 'push') {
       return (state) => state || {key: action.key};
@@ -58,37 +57,41 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
 });
 
 class NavigationAnimatedExample extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = ExampleReducer();
+  }
+
   componentWillMount() {
     this._renderCard = this._renderCard.bind(this);
     this._renderHeader = this._renderHeader.bind(this);
-    this._renderNavigation = this._renderNavigation.bind(this);
     this._renderScene = this._renderScene.bind(this);
     this._renderTitleComponent = this._renderTitleComponent.bind(this);
+    this._handleAction = this._handleAction.bind(this);
   }
+
+  _handleAction(action): boolean {
+    if (!action) {
+      return false;
+    }
+    const newState = ExampleReducer(this.state, action);
+    if (newState === this.state) {
+      return false;
+    }
+    this.setState(newState);
+    return true;
+  }
+
+  handleBackAction(): boolean {
+    return this._handleAction({ type: 'BackAction', });
+  }
+
   render() {
-    return (
-      <NavigationRootContainer
-        reducer={NavigationBasicReducer}
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        persistenceKey="NavigationAnimExampleState"
-        renderNavigation={this._renderNavigation}
-      />
-    );
-  }
-  handleBackAction() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  }
-  _renderNavigation(navigationState, onNavigate) {
-    if (!navigationState) {
-      return null;
-    }
     return (
       <NavigationAnimatedView
-        navigationState={navigationState}
+        navigationState={this.state}
         style={styles.animatedView}
+        onNavigate={this._handleAction}
         renderOverlay={this._renderHeader}
         applyAnimation={(pos, navState) => {
           Animated.timing(pos, {toValue: navState.index, duration: 500}).start();

Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.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.
  *
@@ -22,12 +29,10 @@ const {
 } = ReactNative;
 const NavigationExampleRow = require('./NavigationExampleRow');
 const {
-  RootContainer: NavigationRootContainer,
   Reducer: NavigationReducer,
 } = NavigationExperimental;
-const StackReducer = NavigationReducer.StackReducer;
 
-const NavigationBasicReducer = NavigationReducer.StackReducer({
+const ExampleReducer = NavigationReducer.StackReducer({
   getPushedReducerForAction: (action) => {
     if (action.type === 'push') {
       return (state) => state || {key: action.key};
@@ -45,47 +50,51 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
 });
 
 const NavigationBasicExample = React.createClass({
+
+  getInitialState: function() {
+    return ExampleReducer();
+  },
+
   render: function() {
     return (
-      <NavigationRootContainer
-        reducer={NavigationBasicReducer}
-        persistenceKey="NavigationBasicExampleState"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={(navState, onNavigate) => {
-          if (!navState) { return null; }
-          return (
-            <ScrollView style={styles.topView}>
-              <NavigationExampleRow
-                text={`Current page: ${navState.children[navState.index].key}`}
-              />
-              <NavigationExampleRow
-                text={`Push page #${navState.children.length}`}
-                onPress={() => {
-                  onNavigate({ type: 'push', key: 'page #' + navState.children.length });
-                }}
-              />
-              <NavigationExampleRow
-                text="pop"
-                onPress={() => {
-                  onNavigate(NavigationRootContainer.getBackAction());
-                }}
-              />
-              <NavigationExampleRow
-                text="Exit Basic Nav Example"
-                onPress={this.props.onExampleExit}
-              />
-            </ScrollView>
-          );
-        }}
-      />
+      <ScrollView style={styles.topView}>
+        <NavigationExampleRow
+          text={`Current page: ${this.state.children[this.state.index].key}`}
+        />
+        <NavigationExampleRow
+          text={`Push page #${this.state.children.length}`}
+          onPress={() => {
+            this._handleAction({ type: 'push', key: 'page #' + this.state.children.length });
+          }}
+        />
+        <NavigationExampleRow
+          text="pop"
+          onPress={() => {
+            this._handleAction({ type: 'BackAction' });
+          }}
+        />
+        <NavigationExampleRow
+          text="Exit Basic Nav Example"
+          onPress={this.props.onExampleExit}
+        />
+      </ScrollView>
     );
   },
 
-  handleBackAction: function() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
+  _handleAction(action) {
+    if (!action) {
+      return false;
+    }
+    const newState = ExampleReducer(this.state, action);
+    if (newState === this.state) {
+      return false;
+    }
+    this.setState(newState);
+    return true;
+  },
+
+  handleBackAction() {
+    return this._handleAction({ type: 'BackAction' });
   },
 
 });

Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.js

@@ -33,18 +33,15 @@ const {
 const {
   CardStack: NavigationCardStack,
   StateUtils: NavigationStateUtils,
-  RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
 function createReducer(initialState) {
-  return (currentState, action) => {
+  return (currentState = initialState, action) => {
     switch (action.type) {
-      case 'RootContainerInitialAction':
-        return initialState;
-
       case 'push':
         return NavigationStateUtils.push(currentState, {key: action.key});
 
+      case 'BackAction':
       case 'back':
       case 'pop':
         return currentState.index > 0 ?
@@ -67,35 +64,46 @@ class NavigationCardStackExample extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    this.state = {isHorizontal: true};
+    this.state = {
+      isHorizontal: true,
+      navState: ExampleReducer(undefined, {}),
+    };
   }
 
   componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
     this._renderScene = this._renderScene.bind(this);
     this._toggleDirection = this._toggleDirection.bind(this);
+    this._handleAction = this._handleAction.bind(this);
   }
 
   render() {
     return (
-      <NavigationRootContainer
-        reducer={ExampleReducer}
-        renderNavigation={this._renderNavigation}
+      <NavigationCardStack
+        direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
+        navigationState={this.state.navState}
+        onNavigate={this._handleAction}
+        renderScene={this._renderScene}
         style={styles.main}
       />
     );
   }
 
-  _renderNavigation(navigationState, onNavigate) {
-    return (
-      <NavigationCardStack
-        direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
-        navigationState={navigationState}
-        onNavigate={onNavigate}
-        renderScene={this._renderScene}
-        style={styles.main}
-      />
-    );
+  _handleAction(action): boolean {
+    if (!action) {
+      return false;
+    }
+    const newState = ExampleReducer(this.state.navState, action);
+    if (newState === this.state.navState) {
+      return false;
+    }
+    this.setState({
+      navState: newState,
+    });
+    return true;
+  }
+
+  handleBackAction(): boolean {
+    return this._handleAction({ type: 'BackAction', });
   }
 
   _renderScene(/*NavigationSceneRendererProps*/ props) {

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -36,11 +36,8 @@ const {
 
 const {
   CardStack: NavigationCardStack,
-  Container: NavigationContainer,
   Header: NavigationHeader,
   Reducer: NavigationReducer,
-  RootContainer: NavigationRootContainer,
-  View: NavigationView,
 } = NavigationExperimental;
 
 
@@ -177,6 +174,7 @@ class ExampleTabScreen extends React.Component {
       <NavigationCardStack
         style={styles.tabContent}
         navigationState={this.props.navigationState}
+        onNavigate={this.props.onNavigate}
         renderOverlay={this._renderHeader}
         renderScene={this._renderScene}
       />
@@ -225,40 +223,42 @@ class ExampleTabScreen extends React.Component {
     );
   }
 }
-ExampleTabScreen = NavigationContainer.create(ExampleTabScreen);
 
 class NavigationCompositionExample extends React.Component {
-  navRootContainer: NavigationRootContainer;
-
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={ExampleAppReducer}
-        persistenceKey="NavigationCompositionState"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={this.renderApp.bind(this)}
-      />
-    );
+  state: NavigationParentState;
+  constructor() {
+    super();
+    this.state = ExampleAppReducer(undefined, {});
+  }
+  handleAction(action: Object): boolean {
+    if (!action) {
+      return false;
+    }
+    const newState = ExampleAppReducer(this.state, action);
+    if (newState === this.state) {
+      return false;
+    }
+    this.setState(newState);
+    return true;
   }
   handleBackAction(): boolean {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
+    return this.handleAction({ type: 'BackAction' });
   }
-  renderApp(navigationState: NavigationParentState, onNavigate: Function) {
-    if (!navigationState) {
+  render() {
+    if (!this.state) {
       return null;
     }
     return (
       <View style={styles.topView}>
         <ExampleMainView
-          navigationState={navigationState}
+          navigationState={this.state}
           onExampleExit={this.props.onExampleExit}
+          onNavigate={this.handleAction.bind(this)}
         />
         <NavigationExampleTabBar
-          tabs={navigationState.children}
-          index={navigationState.index}
+          tabs={this.state.children}
+          index={this.state.index}
+          onNavigate={this.handleAction.bind(this)}
         />
       </View>
     );
@@ -266,34 +266,35 @@ class NavigationCompositionExample extends React.Component {
 }
 
 class ExampleMainView extends React.Component {
-  _renderScene: NavigationSceneRenderer;
+  _renderScene: Function;
+  _handleNavigation: Function;
 
   componentWillMount() {
     this._renderScene = this._renderScene.bind(this);
+    this._handleNavigation = this._handleNavigation.bind(this);
   }
 
   render() {
     return (
-      <NavigationView
-        navigationState={this.props.navigationState}
-        style={styles.tabsContent}
-        renderScene={this._renderScene}
-      />
+      <View style={styles.tabsContent}>
+        {this._renderScene()}
+      </View>
     );
   }
 
-  _renderScene(props: NavigationSceneRendererProps): ReactElement {
-    const {scene} = props;
+  _renderScene(): ReactElement {
+    const {navigationState} = this.props;
+    const childState = navigationState.children[navigationState.index];
     return (
       <ExampleTabScreen
-        key={'tab_screen' + scene.key}
-        navigationState={scene.navigationState}
-        onNavigate={this._handleNavigation.bind(this, scene.key)}
+        key={'tab_screen' + childState.key}
+        navigationState={childState}
+        onNavigate={this._handleNavigation}
       />
     );
   }
 
-  _handleNavigation(tabKey, action) {
+  _handleNavigation(action: Object) {
     if (ExampleExitAction.match(action)) {
       this.props.onExampleExit();
       return;
@@ -302,8 +303,6 @@ class ExampleMainView extends React.Component {
   }
 }
 
-ExampleMainView = NavigationContainer.create(ExampleMainView);
-
 const styles = StyleSheet.create({
   topView: {
     flex: 1,

Examples/UIExplorer/NavigationExperimental/NavigationExampleTabBar.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.
  *
@@ -13,24 +20,20 @@
 */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} = ReactNative;
+const NavigationExperimental = require('NavigationExperimental');
+const React = require('react');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TouchableOpacity = require('TouchableOpacity');
+const View = require('View');
 const {
-  Container: NavigationContainer,
   Reducer: NavigationReducer,
 } = NavigationExperimental;
 const {
   JumpToAction,
 } = NavigationReducer.TabsReducer;
 
-var NavigationExampleTabBar = React.createClass({
+const NavigationExampleTabBar = React.createClass({
   render: function() {
     return (
       <View style={styles.tabBar}>
@@ -39,7 +42,7 @@ var NavigationExampleTabBar = React.createClass({
     );
   },
   _renderTab: function(tab, index) {
-    var textStyle = [styles.tabButtonText];
+    const textStyle = [styles.tabButtonText];
     if (this.props.index === index) {
       textStyle.push(styles.selectedTabButtonText);
     }
@@ -58,8 +61,6 @@ var NavigationExampleTabBar = React.createClass({
   },
 });
 
-NavigationExampleTabBar = NavigationContainer.create(NavigationExampleTabBar);
-
 const styles = StyleSheet.create({
   tabBar: {
     height: 50,

Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.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.
  *
@@ -13,22 +20,19 @@
 */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  AsyncStorage,
-  ScrollView,
-  StyleSheet,
-  View,
-} = ReactNative;
-var NavigationExampleRow = require('./NavigationExampleRow');
+const AsyncStorage = require('AsyncStorage');
+const NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react');
+const ScrollView = require('ScrollView');
+const StyleSheet = require('StyleSheet');
+const View = require('View');
 
 /*
  * Heads up! This file is not the real navigation example- only a utility to switch between them.
  *
  * To learn how to use the Navigation API, take a look at the following example files:
  */
-var EXAMPLES = {
+const EXAMPLES = {
   'Tabs': require('./NavigationTabsExample'),
   'Basic': require('./NavigationBasicExample'),
   'Animated Example': require('./NavigationAnimatedExample'),
@@ -37,9 +41,9 @@ var EXAMPLES = {
   'Tic Tac Toe': require('./NavigationTicTacToeExample'),
 };
 
-var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
+const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
 
-var NavigationExperimentalExample = React.createClass({
+const NavigationExperimentalExample = React.createClass({
   statics: {
     title: 'Navigation (Experimental)',
     description: 'Upcoming navigation APIs and animated navigation views',
@@ -74,7 +78,7 @@ var NavigationExperimentalExample = React.createClass({
   },
 
   _renderMenu: function() {
-    var exitRow = null;
+    let exitRow = null;
     if (this.props.onExampleExit) {
       exitRow = (
         <NavigationExampleRow
@@ -130,7 +134,7 @@ var NavigationExperimentalExample = React.createClass({
       return this._renderMenu();
     }
     if (EXAMPLES[this.state.example]) {
-      var Component = EXAMPLES[this.state.example];
+      const Component = EXAMPLES[this.state.example];
       return (
         <Component
           onExampleExit={this._exitInnerExample}

Examples/UIExplorer/NavigationExperimental/NavigationTabsExample.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.
  *
@@ -22,8 +29,6 @@ const {
   View,
 } = ReactNative;
 const {
-  Container: NavigationContainer,
-  RootContainer: NavigationRootContainer,
   Reducer: NavigationReducer,
 } = NavigationExperimental;
 
@@ -55,7 +60,6 @@ class ExmpleTabPage extends React.Component {
     );
   }
 }
-ExmpleTabPage = NavigationContainer.create(ExmpleTabPage);
 
 const ExampleTabsReducer = NavigationReducer.TabsReducer({
   tabReducers: [
@@ -66,36 +70,40 @@ const ExampleTabsReducer = NavigationReducer.TabsReducer({
 });
 
 class NavigationTabsExample extends React.Component {
+  constructor() {
+    super();
+    this.state = ExampleTabsReducer(undefined, {});
+  }
   render() {
     return (
-      <NavigationRootContainer
-        reducer={ExampleTabsReducer}
-        persistenceKey="NAV_EXAMPLE_STATE_TABS"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={(navigationState) => {
-          if (!navigationState) { return null; }
-          return (
-            <View style={styles.topView}>
-              <ExmpleTabPage
-                tabs={navigationState.children}
-                index={navigationState.index}
-                onExampleExit={this.props.onExampleExit}
-              />
-              <NavigationExampleTabBar
-                tabs={navigationState.children}
-                index={navigationState.index}
-              />
-            </View>
-          );
-        }}
-      />
+      <View style={styles.topView}>
+        <ExmpleTabPage
+          tabs={this.state.children}
+          index={this.state.index}
+          onExampleExit={this.props.onExampleExit}
+          onNavigate={this.handleAction.bind(this)}
+        />
+        <NavigationExampleTabBar
+          tabs={this.state.children}
+          index={this.state.index}
+          onNavigate={this.handleAction.bind(this)}
+        />
+      </View>
     );
   }
+  handleAction(action) {
+    if (!action) {
+      return false;
+    }
+    const newState = ExampleTabsReducer(this.state, action);
+    if (newState === this.state) {
+      return false;
+    }
+    this.setState(newState);
+    return true;
+  }
   handleBackAction() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
+    return this.handleAction({ type: 'BackAction' });
   }
 }
 

Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.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.
  *
@@ -16,19 +23,11 @@
  */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = ReactNative;
-const {
-  Container: NavigationContainer,
-  RootContainer: NavigationRootContainer,
-} = NavigationExperimental;
+const React = require('react');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TouchableHighlight = require('TouchableHighlight');
+const View = require('View');
 
 type GameGrid = Array<Array<?string>>;
 
@@ -41,7 +40,7 @@ function parseGame(game: string): GameGrid {
   for (let i = 0; i < 3; i++) {
     const row = Array(3);
     for (let j = 0; j < 3; j++) {
-      const turnIndex = gameTurns.indexOf(rowLetterMap[i]+j);
+      const turnIndex = gameTurns.indexOf(rowLetterMap[i] + j);
       if (turnIndex === -1) {
         row[j] = null;
       } else {
@@ -60,13 +59,13 @@ function playTurn(game: string, row: number, col: number): string {
 
 function getWinner(gameString: string): ?string {
   const game = parseGame(gameString);
-  for (var i = 0; i < 3; i++) {
+  for (let i = 0; i < 3; i++) {
     if (game[i][0] !== null && game[i][0] === game[i][1] &&
         game[i][0] === game[i][2]) {
       return game[i][0];
     }
   }
-  for (var i = 0; i < 3; i++) {
+  for (let i = 0; i < 3; i++) {
     if (game[0][i] !== null && game[0][i] === game[1][i] &&
         game[0][i] === game[2][i]) {
       return game[0][i];
@@ -88,8 +87,8 @@ function isGameOver(gameString: string): boolean {
     return true;
   }
   const game = parseGame(gameString);
-  for (var i = 0; i < 3; i++) {
-    for (var j = 0; j < 3; j++) {
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
       if (game[i][j] === null) {
         return false;
       }
@@ -157,10 +156,9 @@ function GameEndOverlay(props) {
     </View>
   );
 }
-GameEndOverlay = NavigationContainer.create(GameEndOverlay);
 
 function TicTacToeGame(props) {
-  var rows = parseGame(props.game).map((cells, row) =>
+  const rows = parseGame(props.game).map((cells, row) =>
     <View key={'row' + row} style={styles.row}>
       {cells.map((player, col) =>
         <Cell
@@ -184,11 +182,11 @@ function TicTacToeGame(props) {
       </View>
       <GameEndOverlay
         game={props.game}
+        onNavigate={props.onNavigate}
       />
     </View>
   );
 }
-TicTacToeGame = NavigationContainer.create(TicTacToeGame);
 
 const GameActions = {
   Turn: (row, col) => ({type: 'TicTacToeTurnAction', row, col }),
@@ -208,21 +206,34 @@ function GameReducer(lastGame: ?string, action: Object): string {
   return lastGame;
 }
 
+type AppState = {
+  game: string,
+};
+
 class NavigationTicTacToeExample extends React.Component {
-  static GameView = TicTacToeGame;
-  static GameReducer = GameReducer;
-  static GameActions = GameActions;
+  _handleAction: Function;
+  state: AppState;
+  constructor() {
+    super();
+    this._handleAction = this._handleAction.bind(this);
+    this.state = {
+      game: ''
+    };
+  }
+  _handleAction(action: Object) {
+    const newState = GameReducer(this.state.game, action);
+    if (newState !== this.state.game) {
+      this.setState({
+        game: newState,
+      });
+    }
+  }
   render() {
     return (
-      <NavigationRootContainer
-        reducer={GameReducer}
-        persistenceKey="TicTacToeGameState"
-        renderNavigation={(game) => (
-          <TicTacToeGame
-            game={game}
-            onExampleExit={this.props.onExampleExit}
-          />
-        )}
+      <TicTacToeGame
+        game={this.state && this.state.game}
+        onExampleExit={this.props.onExampleExit}
+        onNavigate={this._handleAction}
       />
     );
   }

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

@@ -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.
  *
@@ -155,19 +162,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>
@@ -415,12 +422,13 @@ exports.examples = [
     );
   },
 }, {
-  title: 'Inline images',
+  title: 'Inline views',
   render: function() {
     return (
       <View>
         <Text>
-          This text contains an inline image <Image source={require('./flux.png')} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
+          This text contains an inline blue view <View style={{width: 25, height: 25, backgroundColor: 'steelblue'}} /> and
+          an inline image <Image source={require('./flux.png')} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
         </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() {
@@ -506,4 +531,43 @@ exports.examples = [
       return <TokenizedTextExample />;
     }
   },
+  {
+    title: 'Return key',
+    render: function() {
+      var returnKeyTypes = [
+        'none',
+        'go',
+        'search',
+        'send',
+        'done',
+        'previous',
+        'next',
+      ];
+      var returnKeyLabels = [
+        'Compile',
+        'React Native',
+      ];
+      var examples = returnKeyTypes.map((type) => {
+        return (
+          <TextInput
+            key={type}
+            returnKeyType={type}
+            placeholder={'returnKeyType: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      var types = returnKeyLabels.map((type) => {
+        return (
+          <TextInput
+            key={type}
+            returnKeyLabel={type}
+            placeholder={'returnKeyLabel: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      return <View>{examples}{types}</View>;
+    }
+  },
 ];

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/UIExplorerActions.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.
  *
@@ -25,9 +32,7 @@ export type UIExplorerExampleAction = {
   openExample: string;
 };
 
-import type {BackAction} from 'NavigationRootContainer';
-
-export type UIExplorerAction = BackAction | UIExplorerListWithFilterAction | UIExplorerExampleAction;
+export type UIExplorerAction = UIExplorerListWithFilterAction | UIExplorerExampleAction;
 
 function ExampleListWithFilter(filter: ?string): UIExplorerListWithFilterAction {
   return {

Examples/UIExplorer/UIExplorerApp.android.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.
  *
@@ -16,29 +23,24 @@
  */
 'use strict';
 
+const AppRegistry = require('AppRegistry');
+const AsyncStorage = require('AsyncStorage');
+const BackAndroid = require('BackAndroid');
+const Dimensions = require('Dimensions');
+const DrawerLayoutAndroid = require('DrawerLayoutAndroid');
+const Linking = require('Linking');
 const React = require('react');
-const ReactNative = require('react-native');
-const {
-  AppRegistry,
-  BackAndroid,
-  Dimensions,
-  DrawerLayoutAndroid,
-  NavigationExperimental,
-  StyleSheet,
-  ToolbarAndroid,
-  View,
-  StatusBar,
-} = ReactNative;
-const {
-  RootContainer: NavigationRootContainer,
-} = NavigationExperimental;
+const StatusBar = require('StatusBar');
+const StyleSheet = require('StyleSheet');
+const ToolbarAndroid = require('ToolbarAndroid');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerList = require('./UIExplorerList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
 const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
 const URIActionMap = require('./URIActionMap');
+const View = require('View');
 
-var DRAWER_WIDTH_LEFT = 56;
+const DRAWER_WIDTH_LEFT = 56;
 
 type Props = {
   exampleFromAppetizeParams: string,
@@ -49,14 +51,13 @@ type State = {
 };
 
 class UIExplorerApp extends React.Component {
-  _handleOpenInitialExample: Function;
+  _handleAction: Function;
+  _renderDrawerContent: Function;
   state: State;
   constructor(props: Props) {
     super(props);
-    this._handleOpenInitialExample = this._handleOpenInitialExample.bind(this);
-    this.state = {
-      initialExampleUri: props.exampleFromAppetizeParams,
-    };
+    this._handleAction = this._handleAction.bind(this);
+    this._renderDrawerContent = this._renderDrawerContent.bind(this);
   }
 
   componentWillMount() {
@@ -64,38 +65,28 @@ class UIExplorerApp extends React.Component {
   }
 
   componentDidMount() {
-    // There's a race condition if we try to navigate to the specified example
-    // from the initial props at the same time the navigation logic is setting
-    // up the initial navigation state. This hack adds a delay to avoid this
-    // scenario. So after the initial example list is shown, we then transition
-    // to the initial example.
-    setTimeout(this._handleOpenInitialExample, 500);
+    Linking.getInitialURL().then((url) => {
+      AsyncStorage.getItem('UIExplorerAppState', (err, storedString) => {
+        const exampleAction = URIActionMap(this.props.exampleFromAppetizeParams);
+        const urlAction = URIActionMap(url);
+        const launchAction = exampleAction || urlAction;
+        if (err || !storedString) {
+          const initialAction = launchAction || {type: 'InitialAction'};
+          this.setState(UIExplorerNavigationReducer(null, initialAction));
+          return;
+        }
+        const storedState = JSON.parse(storedString);
+        if (launchAction) {
+          this.setState(UIExplorerNavigationReducer(storedState, launchAction));
+          return;
+        }
+        this.setState(storedState);
+      });
+    });
   }
 
   render() {
-    return (
-      <NavigationRootContainer
-        persistenceKey="UIExplorerStateNavState"
-        ref={navRootRef => { this._navigationRootRef = navRootRef; }}
-        reducer={UIExplorerNavigationReducer}
-        renderNavigation={this._renderApp.bind(this)}
-        linkingActionMap={URIActionMap}
-      />
-    );
-  }
-
-  _handleOpenInitialExample() {
-    if (this.state.initialExampleUri) {
-      const exampleAction = URIActionMap(this.state.initialExampleUri);
-      if (exampleAction && this._navigationRootRef) {
-        this._navigationRootRef.handleNavigation(exampleAction);
-      }
-    }
-    this.setState({initialExampleUri: null});
-  }
-
-  _renderApp(navigationState, onNavigate) {
-    if (!navigationState) {
+    if (!this.state) {
       return null;
     }
     return (
@@ -110,42 +101,42 @@ class UIExplorerApp extends React.Component {
           this._overrideBackPressForDrawerLayout = false;
         }}
         ref={(drawer) => { this.drawer = drawer; }}
-        renderNavigationView={this._renderDrawerContent.bind(this, onNavigate)}
+        renderNavigationView={this._renderDrawerContent}
         statusBarBackgroundColor="#589c90">
-        {this._renderNavigation(navigationState, onNavigate)}
+        {this._renderApp()}
       </DrawerLayoutAndroid>
     );
   }
 
-  _renderDrawerContent(onNavigate) {
+  _renderDrawerContent() {
     return (
       <View style={styles.drawerContentWrapper}>
         <UIExplorerExampleList
           list={UIExplorerList}
           displayTitleRow={true}
           disableSearch={true}
-          onNavigate={(action) => {
-            this.drawer && this.drawer.closeDrawer();
-            onNavigate(action);
-          }}
+          onNavigate={this._handleAction}
         />
       </View>
     );
   }
 
-  _renderNavigation(navigationState, onNavigate) {
-    if (navigationState.externalExample) {
-      var Component = UIExplorerList.Modules[navigationState.externalExample];
+  _renderApp() {
+    const {
+      externalExample,
+      stack,
+    } = this.state;
+    if (externalExample) {
+      const Component = UIExplorerList.Modules[externalExample];
       return (
         <Component
           onExampleExit={() => {
-            onNavigate(NavigationRootContainer.getBackAction());
+            this._handleAction({ type: 'BackAction' });
           }}
           ref={(example) => { this._exampleRef = example; }}
         />
       );
     }
-    const {stack} = navigationState;
     const title = UIExplorerStateTitleMap(stack.children[stack.index]);
     const index = stack.children.length <= 1 ?  1 : stack.index;
 
@@ -178,6 +169,7 @@ class UIExplorerApp extends React.Component {
           title={title}
         />
         <UIExplorerExampleList
+          onNavigate={this._handleAction}
           list={UIExplorerList}
           {...stack.children[0]}
         />
@@ -185,6 +177,17 @@ class UIExplorerApp extends React.Component {
     );
   }
 
+  _handleAction(action: Object): boolean {
+    this.drawer && this.drawer.closeDrawer();
+    const newState = UIExplorerNavigationReducer(this.state, action);
+    if (this.state !== newState) {
+      this.setState(newState);
+      AsyncStorage.setItem('UIExplorerAppState', JSON.stringify(this.state));
+      return true;
+    }
+    return false;
+  }
+
   _handleBackButtonPress() {
     if (this._overrideBackPressForDrawerLayout) {
       // This hack is necessary because drawer layout provides an imperative API
@@ -200,12 +203,7 @@ class UIExplorerApp extends React.Component {
     ) {
       return true;
     }
-    if (this._navigationRootRef) {
-      return this._navigationRootRef.handleNavigation(
-        NavigationRootContainer.getBackAction()
-      );
-    }
-    return false;
+    return this._handleAction({ type: 'BackAction' });
   }
 }
 

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -23,6 +23,8 @@
  */
 'use strict';
 
+const AsyncStorage = require('AsyncStorage');
+const Linking = require('Linking');
 const React = require('react');
 const ReactNative = require('react-native');
 const UIExplorerList = require('./UIExplorerList.ios');
@@ -42,7 +44,6 @@ const {
 const {
   CardStack: NavigationCardStack,
   Header: NavigationHeader,
-  RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
 import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
@@ -55,81 +56,86 @@ type Props = {
   exampleFromAppetizeParams: string,
 };
 
-type State = {
-  initialExampleUri: ?string,
+type State = UIExplorerNavigationState & {
+  externalExample?: string,
 };
 
 class UIExplorerApp extends React.Component {
-  _navigationRootRef: ?NavigationRootContainer;
-  _renderNavigation: Function;
   _renderOverlay: Function;
   _renderScene: Function;
   _renderCard: Function;
   _renderTitleComponent: Function;
-  _handleOpenInitialExample: Function;
+  _handleAction: Function;
   state: State;
+
   constructor(props: Props) {
     super(props);
-    this._handleOpenInitialExample = this._handleOpenInitialExample.bind(this);
-    this.state = {
-      initialExampleUri: props.exampleFromAppetizeParams,
-    };
   }
+
   componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
+    this._handleAction = this._handleAction.bind(this);
     this._renderOverlay = this._renderOverlay.bind(this);
     this._renderScene = this._renderScene.bind(this);
     this._renderTitleComponent = this._renderTitleComponent.bind(this);
   }
+
   componentDidMount() {
-    // There's a race condition if we try to navigate to the specified example
-    // from the initial props at the same time the navigation logic is setting
-    // up the initial navigation state. This hack adds a delay to avoid this
-    // scenario. So after the initial example list is shown, we then transition
-    // to the initial example.
-    setTimeout(this._handleOpenInitialExample, 500);
+    Linking.getInitialURL().then((url) => {
+      AsyncStorage.getItem('UIExplorerAppState', (err, storedString) => {
+        const exampleAction = URIActionMap(this.props.exampleFromAppetizeParams);
+        const urlAction = URIActionMap(url);
+        const launchAction = exampleAction || urlAction;
+        if (err || !storedString) {
+          const initialAction = launchAction || {type: 'InitialAction'};
+          this.setState(UIExplorerNavigationReducer(null, initialAction));
+          return;
+        }
+        const storedState = JSON.parse(storedString);
+        if (launchAction) {
+          this.setState(UIExplorerNavigationReducer(storedState, launchAction));
+          return;
+        }
+        this.setState(storedState);
+      });
+    });
+
+    Linking.addEventListener('url', (url) => {
+      this._handleAction(URIActionMap(url));
+    });
   }
-  render() {
-    return (
-      <NavigationRootContainer
-        persistenceKey="UIExplorerState"
-        reducer={UIExplorerNavigationReducer}
-        ref={navRootRef => { this._navigationRootRef = navRootRef; }}
-        renderNavigation={this._renderNavigation}
-        linkingActionMap={URIActionMap}
-      />
-    );
-  }
-  _handleOpenInitialExample() {
-    if (this.state.initialExampleUri) {
-      const exampleAction = URIActionMap(this.state.initialExampleUri);
-      if (exampleAction && this._navigationRootRef) {
-        this._navigationRootRef.handleNavigation(exampleAction);
-      }
+
+  _handleAction(action: Object) {
+    if (!action) {
+      return;
+    }
+    const newState = UIExplorerNavigationReducer(this.state, action);
+    if (this.state !== newState) {
+      this.setState(newState);
+      AsyncStorage.setItem('UIExplorerAppState', JSON.stringify(this.state));
     }
-    this.setState({initialExampleUri: null});
   }
-  _renderNavigation(navigationState: UIExplorerNavigationState, onNavigate: Function) {
-    if (!navigationState) {
+
+  render() {
+    if (!this.state) {
       return null;
     }
-    if (navigationState.externalExample) {
-      var Component = UIExplorerList.Modules[navigationState.externalExample];
+    if (this.state.externalExample) {
+      const Component = UIExplorerList.Modules[this.state.externalExample];
       return (
         <Component
           onExampleExit={() => {
-            onNavigate(NavigationRootContainer.getBackAction());
+            this._handleAction({ type: 'BackAction' });
           }}
         />
       );
     }
-    const {stack} = navigationState;
     return (
       <NavigationCardStack
-        navigationState={stack}
+        navigationState={this.state.stack}
         style={styles.container}
         renderOverlay={this._renderOverlay}
         renderScene={this._renderScene}
+        onNavigate={this._handleAction}
       />
     );
   }
@@ -156,6 +162,7 @@ class UIExplorerApp extends React.Component {
     if (state.key === 'AppList') {
       return (
         <UIExplorerExampleList
+          onNavigate={this._handleAction}
           list={UIExplorerList}
           style={styles.exampleContainer}
           {...state}
@@ -194,9 +201,9 @@ AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
 UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Example: UIExplorerExample) => {
   const ExampleModule = Example.module;
   if (ExampleModule.displayName) {
-    var Snapshotter = React.createClass({
+    const Snapshotter = React.createClass({
       render: function() {
-        var Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
+        const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
         return (
           <SnapshotViewIOS>
             <Renderable />

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,20 @@
  */
 '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 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,
@@ -54,6 +55,13 @@ class UIExplorerExampleList extends React.Component {
   }) {
 
   }
+
+  static makeRenderable(example: any): ReactClass<any> {
+    return example.examples ?
+      createExamplePage(null, example) :
+      example;
+  }
+
   render(): ?ReactElement {
     const filterText = this.props.filter || '';
     const filterRegex = new RegExp(String(filterText), 'i');
@@ -154,20 +162,11 @@ class UIExplorerExampleList extends React.Component {
   }
 
   _handleRowPress(exampleKey: string): void {
-    this.props.onNavigate(UIExplorerActions.ExampleAction(exampleKey))
+    this.props.onNavigate(UIExplorerActions.ExampleAction(exampleKey));
   }
 }
 
-function makeRenderable(example: any): ReactClass<any> {
-  return example.examples ?
-    createExamplePage(null, example) :
-    example;
-}
-
-UIExplorerExampleList = NavigationContainer.create(UIExplorerExampleList);
-UIExplorerExampleList.makeRenderable = makeRenderable;
-
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   listContainer: {
     flex: 1,
   },

Examples/UIExplorer/UIExplorerIntegrationTests/RCTRootViewIntegrationTests.m

@@ -138,12 +138,6 @@ static ControlBlock propertiesUpdateBlock()
 
 - (void)setUp
 {
-#if __LP64__
-  RCTAssert(NO, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
-#endif
-
-  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
-  RCTAssert((version.majorVersion == 8 && version.minorVersion >= 3) || version.majorVersion >= 9, @"Tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
   _runner = RCTInitRunnerForApp(@"IntegrationTests/RCTRootViewIntegrationTestApp", nil);
 }
 

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m

@@ -31,12 +31,6 @@
 
 - (void)setUp
 {
-#if __LP64__
-  RCTAssert(NO, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
-#endif
-
-  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
-  RCTAssert((version.majorVersion == 8 && version.minorVersion >= 3) || version.majorVersion >= 9, @"Tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
   _runner = RCTInitRunnerForApp(@"IntegrationTests/IntegrationTestsApp", nil);
 }
 

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m

@@ -32,12 +32,6 @@
 
 - (void)setUp
 {
-#if __LP64__
-  RCTAssert(NO, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
-#endif
-
-  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
-  RCTAssert((version.majorVersion == 8 && version.minorVersion >= 3) || version.majorVersion >= 9, @"Tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
   _runner = RCTInitRunnerForApp(@"Examples/UIExplorer/UIExplorerApp.ios", nil);
   _runner.recordMode = NO;
 }

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

@@ -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.
  *
@@ -20,7 +27,7 @@ export type UIExplorerExample = {
   module: Object;
 };
 
-var ComponentExamples: Array<UIExplorerExample> = [
+const ComponentExamples: Array<UIExplorerExample> = [
   {
     key: 'ActivityIndicatorIOSExample',
     module: require('./ActivityIndicatorIOSExample'),
@@ -69,6 +76,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'NavigatorIOSExample',
     module: require('./NavigatorIOSExample'),
   },
+  {
+    key: 'PickerExample',
+    module: require('./PickerExample'),
+  },
   {
     key: 'PickerIOSExample',
     module: require('./PickerIOSExample'),
@@ -131,7 +142,7 @@ var ComponentExamples: Array<UIExplorerExample> = [
   },
 ];
 
-var APIExamples: Array<UIExplorerExample> = [
+const APIExamples: Array<UIExplorerExample> = [
   {
     key: 'AccessibilityIOSExample',
     module: require('./AccessibilityIOSExample'),
@@ -144,6 +155,10 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'AdSupportIOSExample',
     module: require('./AdSupportIOSExample'),
   },
+  {
+    key: 'AlertExample',
+    module: require('./AlertExample').AlertExample,
+  },
   {
     key: 'AlertIOSExample',
     module: require('./AlertIOSExample'),
@@ -192,6 +207,10 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'ImageEditingExample',
     module: require('./ImageEditingExample'),
   },
+  {
+    key: 'LayoutAnimationExample',
+    module: require('./LayoutAnimationExample'),
+  },
   {
     key: 'LayoutExample',
     module: require('./LayoutExample'),
@@ -204,10 +223,6 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'NavigationExperimentalExample',
     module: require('./NavigationExperimental/NavigationExperimentalExample'),
   },
-  {
-    key: 'NavigationExperimentalLegacyNavigatorExample',
-    module: require('./NavigationExperimental/LegacyNavigator/LegacyNavigatorExample'),
-  },
   {
     key: 'NetInfoExample',
     module: require('./NetInfoExample'),
@@ -248,6 +263,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/ViewExample.js

@@ -46,7 +46,6 @@ var ViewBorderStyleExample = React.createClass({
         <View>
           <View style={{
             borderWidth: 1,
-            borderRadius: 5,
             borderStyle: this.state.showBorder ? 'dashed' : null,
             padding: 5
           }}>

Examples/UIExplorer/ViewPagerAndroidExample.android.js

@@ -109,6 +109,7 @@ var ViewPagerAndroidExample = React.createClass({
     return {
       page: 0,
       animationsAreEnabled: true,
+      scrollEnabled: true,
       progress: {
         position: 0,
         offset: 0,
@@ -167,6 +168,7 @@ var ViewPagerAndroidExample = React.createClass({
         <ViewPagerAndroid
           style={styles.viewPager}
           initialPage={0}
+          scrollEnabled={this.state.scrollEnabled}
           onPageScroll={this.onPageScroll}
           onPageSelected={this.onPageSelected}
           onPageScrollStateChanged={this.onPageScrollStateChanged}
@@ -174,6 +176,13 @@ var ViewPagerAndroidExample = React.createClass({
           ref={viewPager => { this.viewPager = viewPager; }}>
           {pages}
         </ViewPagerAndroid>
+        <View style={styles.buttons}>
+          <Button
+            enabled={true}
+            text={this.state.scrollEnabled ? 'Scroll Enabled' : 'Scroll Disabled'}
+            onPress={() => this.setState({scrollEnabled: !this.state.scrollEnabled})}
+          />
+        </View>
         <View style={styles.buttons}>
           { animationsAreEnabled ?
             <Button

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

@@ -69,6 +69,7 @@ class Animated {
   __getNativeConfig(): Object {
     throw new Error('This JS animated node type cannot be used as native animated node');
   }
+  toJSON(): any { return this.__getValue(); }
 }
 
 type AnimationConfig = {
@@ -82,7 +83,7 @@ type AnimationConfig = {
 class Animation {
   __active: bool;
   __isInteraction: bool;
-  __nativeTag: number;
+  __nativeId: number;
   __onEnd: ?EndCallback;
   start(
     fromValue: number,
@@ -91,7 +92,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 +110,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 +316,7 @@ class TimingAnimation extends Animation {
   }
 
   stop(): void {
+    super.stop();
     this.__active = false;
     clearTimeout(this._timeout);
     window.cancelAnimationFrame(this._animationFrame);
@@ -381,6 +387,7 @@ class DecayAnimation extends Animation {
   }
 
   stop(): void {
+    super.stop();
     this.__active = false;
     window.cancelAnimationFrame(this._animationFrame);
     this.__debouncedOnEnd({finished: false});
@@ -595,6 +602,7 @@ class SpringAnimation extends Animation {
   }
 
   stop(): void {
+    super.stop();
     this.__active = false;
     window.cancelAnimationFrame(this._animationFrame);
     this.__debouncedOnEnd({finished: false});
@@ -645,7 +653,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 +713,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 +731,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 +763,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 +924,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 +944,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 +953,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 +975,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 +997,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 +1018,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 +1040,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 +1066,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 +1445,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/Interpolation.js

@@ -233,7 +233,7 @@ function createInterpolationFromStringOutputRange(
     // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
     return outputRange[0].replace(stringShapeRegex, () => {
       const val = +interpolations[i++](input);
-      const rounded = shouldRound && i < 4 ? Math.round(val) : val;
+      const rounded = shouldRound && i < 4 ? Math.round(val) : Math.round(val * 1000) / 1000;
       return String(rounded);
     });
   };

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();
@@ -142,21 +142,24 @@ describe('Animated', () => {
     expect(anim.__getValue()).toBe(15);
   });
 
+  it('convert to JSON', () => {
+    expect(JSON.stringify(new Animated.Value(10))).toBe('10');
+  });
 });
 
 
 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 +182,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 +196,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 +218,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 +235,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 +258,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 +279,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 +309,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 +322,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 +344,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 +369,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 +390,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 +454,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 +539,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 +557,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');
@@ -294,4 +294,14 @@ describe('Interpolation', () => {
       outputRange: ['20deg', '30rad'],
     })).toThrow();
   });
+
+  it('should round the alpha channel of a color to the nearest thousandth', () => {
+    var interpolation = Interpolation.create({
+      inputRange: [0, 1],
+      outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 1)'],
+    });
+
+    expect(interpolation(1e-12)).toBe('rgba(0, 0, 0, 0)');
+    expect(interpolation(2 / 3)).toBe('rgba(0, 0, 0, 0.667)');
+  });
 });

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,10 +12,12 @@
 'use strict';
 
 var BatchedBridge = require('BatchedBridge');
+var BugReporting = require('BugReporting');
 var ReactNative = require('ReactNative');
 
 var invariant = require('fbjs/lib/invariant');
 var renderApplication = require('renderApplication');
+const infoLog = require('infoLog');
 
 if (__DEV__) {
   // In order to use Cmd+P to record/dump perf data, we need to make sure
@@ -24,6 +26,7 @@ if (__DEV__) {
 }
 
 var runnables = {};
+var runCount = 1;
 
 type ComponentProvider = () => ReactClass<any>;
 
@@ -79,13 +82,14 @@ 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');
+    infoLog(msg);
+    BugReporting.addSource('AppRegistry.runApplication' + runCount++, () => msg);
     invariant(
       runnables[appKey] && runnables[appKey].run,
       'Application ' + appKey + ' has not been registered. This ' +

Libraries/BatchedBridge/BatchedBridge.js

@@ -13,8 +13,7 @@
 const MessageQueue = require('MessageQueue');
 
 const BatchedBridge = new MessageQueue(
-  __fbBatchedBridgeConfig.remoteModuleConfig,
-  __fbBatchedBridgeConfig.localModulesConfig,
+  () => global.__fbBatchedBridgeConfig
 );
 
 // TODO: Move these around to solve the cycle in a cleaner way.
@@ -24,6 +23,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

@@ -51,65 +51,14 @@ Object.keys(RemoteModules).forEach((moduleName) => {
         module = config && BatchedBridge.processModuleConfig(config, module.moduleID);
         RemoteModules[moduleName] = module;
       }
+      Object.defineProperty(NativeModules, moduleName, {
+        configurable: true,
+        enumerable: true,
+        value: module,
+      });
       return module;
     },
   });
 });
 
-/**
- * Copies the ViewManager constants and commands into UIManager. This is
- * only needed for iOS, which puts the constants in the ViewManager
- * namespace instead of UIManager, unlike Android.
- *
- * We'll eventually move this logic to UIManager.js, once all
- * 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) {
-          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;
-      },
-    });
-    let commands;
-    /* $FlowFixMe - nice try. Flow doesn't like getters */
-    Object.defineProperty(viewConfig, 'Commands', {
-      configurable: true,
-      enumerable: true,
-      get: () => {
-        if (commands) {
-          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/RCTEventEmitter.js

@@ -11,13 +11,15 @@
  */
 'use strict';
 
-var BatchedBridge = require('BatchedBridge');
-var ReactNativeEventEmitter = require('ReactNativeEventEmitter');
+const BatchedBridge = require('BatchedBridge');
 
-BatchedBridge.registerCallableModule(
-  'RCTEventEmitter',
-  ReactNativeEventEmitter
-);
+const RCTEventEmitter = {
+  register(eventEmitter: any) {
+    BatchedBridge.registerCallableModule(
+      'RCTEventEmitter',
+      eventEmitter
+    );
+  }
+};
 
-// Completely locally implemented - no native hooks.
-module.exports = ReactNativeEventEmitter;
+module.exports = RCTEventEmitter;

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,105 @@
+/**
+ * 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 RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+const Map = require('Map');
+const infoLog = require('infoLog');
+
+import type EmitterSubscription from 'EmitterSubscription';
+
+type ExtraData = { [key: string]: string };
+type SourceCallback = () => string;
+type DebugData = { extras: ExtraData, files: ExtraData };
+
+function defaultExtras() {
+  BugReporting.addFileSource('react_hierarchy.txt', () => require('dumpReactTree')());
+}
+
+/**
+ * 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 _extraSources: Map<string, SourceCallback> = new Map();
+  static _fileSources: Map<string, SourceCallback> = new Map();
+  static _subscription: ?EmitterSubscription = null;
+
+  static _maybeInit() {
+    if (!BugReporting._subscription) {
+      BugReporting._subscription = RCTDeviceEventEmitter
+          .addListener('collectBugExtraData', BugReporting.collectExtraData, null);
+      defaultExtras();
+    }
+  }
+
+  /**
+   * 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} {
+    return this._addSource(key, callback, BugReporting._extraSources);
+  }
+
+  /**
+   * 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 addFileSource(key: string, callback: SourceCallback): {remove: () => void} {
+    return this._addSource(key, callback, BugReporting._fileSources);
+  }
+
+  static _addSource(key: string, callback: SourceCallback, source: Map<string, SourceCallback>): {remove: () => void} {
+    BugReporting._maybeInit();
+    if (source.has(key)) {
+      console.warn(`BugReporting.add* called multiple times for same key '${key}'`);
+    }
+    source.set(key, callback);
+    return {remove: () => { source.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(): DebugData {
+    const extraData: ExtraData = {};
+    for (const [key, callback] of BugReporting._extraSources) {
+      extraData[key] = callback();
+    }
+    const fileData: ExtraData = {};
+    for (const [key, callback] of BugReporting._fileSources) {
+      fileData[key] = callback();
+    }
+    infoLog('BugReporting extraData:', extraData);
+    const BugReportingNativeModule = require('NativeModules').BugReporting;
+    BugReportingNativeModule &&
+      BugReportingNativeModule.setExtraData &&
+      BugReportingNativeModule.setExtraData(extraData, fileData);
+
+    return { extras: extraData, files: fileData };
+  }
+}
+
+module.exports = BugReporting;

Libraries/BugReporting/dumpReactTree.js

@@ -0,0 +1,142 @@
+/**
+ * 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 dumpReactTree
+ * @flow
+ */
+'use strict';
+
+const ReactNativeMount = require('ReactNativeMount');
+const getReactData = require('getReactData');
+
+const INDENTATION_SIZE = 2;
+const MAX_DEPTH = 2;
+const MAX_STRING_LENGTH = 50;
+
+/**
+ * Dump all React Native root views and their content. This function tries
+ * it best to get the content but ultimately relies on implementation details
+ * of React and will fail in future versions.
+ */
+function dumpReactTree() {
+  try {
+    return getReactTree();
+  } catch (e) {
+    return 'Failed to dump react tree: ' + e;
+  }
+}
+
+function getReactTree() {
+  let output = '';
+  const rootIds = Object.getOwnPropertyNames(ReactNativeMount._instancesByContainerID);
+  for (const rootId of rootIds) {
+    const instance = ReactNativeMount._instancesByContainerID[rootId];
+    output += `============ Root ID: ${rootId} ============\n`;
+    output += dumpNode(instance, 0);
+    output += `============ End root ID: ${rootId} ============\n`;
+  }
+  return output;
+}
+
+function dumpNode(node: Object, identation: number) {
+  const data = getReactData(node);
+  if (data.nodeType === 'Text') {
+    return indent(identation) + data.text + '\n';
+  } else if (data.nodeType === 'Empty') {
+    return '';
+  }
+  let output = indent(identation) + `<${data.name}`;
+  if (data.nodeType === 'Composite') {
+    for (const propName of Object.getOwnPropertyNames(data.props || {})) {
+      if (isNormalProp(propName)) {
+        try {
+          const value = convertValue(data.props[propName]);
+          if (value) {
+            output += ` ${propName}=${value}`;
+          }
+        } catch (e) {
+          const message = `[Failed to get property: ${e}]`;
+          output += ` ${propName}=${message}`;
+        }
+      }
+    }
+  }
+  let childOutput = '';
+  for (const child of data.children || []) {
+    childOutput += dumpNode(child, identation + 1);
+  }
+
+  if (childOutput) {
+    output += '>\n' + childOutput + indent(identation) + `</${data.name}>\n`;
+  } else {
+    output += ' />\n';
+  }
+
+  return output;
+}
+
+function isNormalProp(name: string): boolean {
+  switch (name) {
+    case 'children':
+    case 'key':
+    case 'ref':
+      return false;
+    default:
+      return true;
+  }
+}
+
+function convertObject(object: Object, depth: number) {
+  if (depth >= MAX_DEPTH) {
+    return '[...omitted]';
+  }
+  let output = '{';
+  let first = true;
+  for (const key of Object.getOwnPropertyNames(object)) {
+    if (!first) {
+      output += ', ';
+    }
+    output += `${key}: ${convertValue(object[key], depth + 1)}`;
+    first = false;
+  }
+  return output + '}';
+}
+
+function convertValue(value, depth = 0): ?string {
+  if (!value) {
+    return null;
+  }
+
+  switch (typeof value) {
+    case 'string':
+      return JSON.stringify(possiblyEllipsis(value).replace('\n', '\\n'));
+    case 'boolean':
+    case 'number':
+      return JSON.stringify(value);
+    case 'function':
+      return '[function]';
+    case 'object':
+      return convertObject(value, depth);
+    default:
+      return null;
+  }
+}
+
+function possiblyEllipsis(value: string) {
+  if (value.length > MAX_STRING_LENGTH) {
+    return value.slice(0, MAX_STRING_LENGTH) + '...';
+  } else {
+    return value;
+  }
+}
+
+function indent(size: number) {
+  return ' '.repeat(size * INDENTATION_SIZE);
+}
+
+module.exports = dumpReactTree;

Libraries/BugReporting/getReactData.js

@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2015-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 getReactData
+ * @flow
+ */
+'use strict';
+
+/**
+ * Convert a react internal instance to a sanitized data object.
+ *
+ * This is shamelessly stolen from react-devtools:
+ * https://github.com/facebook/react-devtools/blob/master/backend/getData.js
+ */
+function getData(element: Object): Object {
+  var children = null;
+  var props = null;
+  var state = null;
+  var context = null;
+  var updater = null;
+  var name = null;
+  var type = null;
+  var text = null;
+  var publicInstance = null;
+  var nodeType = 'Native';
+  // If the parent is a native node without rendered children, but with
+  // multiple string children, then the `element` that gets passed in here is
+  // a plain value -- a string or number.
+  if (typeof element !== 'object') {
+    nodeType = 'Text';
+    text = element + '';
+  } else if (element._currentElement === null || element._currentElement === false) {
+    nodeType = 'Empty';
+  } else if (element._renderedComponent) {
+    nodeType = 'NativeWrapper';
+    children = [element._renderedComponent];
+    props = element._instance.props;
+    state = element._instance.state;
+    context = element._instance.context;
+    if (context && Object.keys(context).length === 0) {
+      context = null;
+    }
+  } else if (element._renderedChildren) {
+    children = childrenList(element._renderedChildren);
+  } else if (element._currentElement && element._currentElement.props) {
+    // This is a native node without rendered children -- meaning the children
+    // prop is just a string or (in the case of the <option>) a list of
+    // strings & numbers.
+    children = element._currentElement.props.children;
+  }
+
+  if (!props && element._currentElement && element._currentElement.props) {
+    props = element._currentElement.props;
+  }
+
+  // != used deliberately here to catch undefined and null
+  if (element._currentElement != null) {
+    type = element._currentElement.type;
+    if (typeof type === 'string') {
+      name = type;
+    } else if (element.getName) {
+      nodeType = 'Composite';
+      name = element.getName();
+      // 0.14 top-level wrapper
+      // TODO(jared): The backend should just act as if these don't exist.
+      if (element._renderedComponent && element._currentElement.props === element._renderedComponent._currentElement) {
+        nodeType = 'Wrapper';
+      }
+      if (name === null) {
+        name = 'No display name';
+      }
+    } else if (element._stringText) {
+      nodeType = 'Text';
+      text = element._stringText;
+    } else {
+      name = type.displayName || type.name || 'Unknown';
+    }
+  }
+
+  if (element._instance) {
+    var inst = element._instance;
+    updater = {
+      setState: inst.setState && inst.setState.bind(inst),
+      forceUpdate: inst.forceUpdate && inst.forceUpdate.bind(inst),
+      setInProps: inst.forceUpdate && setInProps.bind(null, element),
+      setInState: inst.forceUpdate && setInState.bind(null, inst),
+      setInContext: inst.forceUpdate && setInContext.bind(null, inst),
+    };
+    publicInstance = inst;
+
+    // TODO: React ART currently falls in this bucket, but this doesn't
+    // actually make sense and we should clean this up after stabilizing our
+    // API for backends
+    if (inst._renderedChildren) {
+      children = childrenList(inst._renderedChildren);
+    }
+  }
+
+  return {
+    nodeType,
+    type,
+    name,
+    props,
+    state,
+    context,
+    children,
+    text,
+    updater,
+    publicInstance,
+  };
+}
+
+function setInProps(internalInst, path: Array<string | number>, value: any) {
+  var element = internalInst._currentElement;
+  internalInst._currentElement = {
+    ...element,
+    props: copyWithSet(element.props, path, value),
+  };
+  internalInst._instance.forceUpdate();
+}
+
+function setInState(inst, path: Array<string | number>, value: any) {
+  setIn(inst.state, path, value);
+  inst.forceUpdate();
+}
+
+function setInContext(inst, path: Array<string | number>, value: any) {
+  setIn(inst.context, path, value);
+  inst.forceUpdate();
+}
+
+function setIn(obj: Object, path: Array<string | number>, value: any) {
+  var last = path.pop();
+  var parent = path.reduce((obj_, attr) => obj_ ? obj_[attr] : null, obj);
+  if (parent) {
+    parent[last] = value;
+  }
+}
+
+function childrenList(children) {
+  var res = [];
+  for (var name in children) {
+    res.push(children[name]);
+  }
+  return res;
+}
+
+function copyWithSetImpl(obj, path, idx, value) {
+  if (idx >= path.length) {
+    return value;
+  }
+  var key = path[idx];
+  var updated = Array.isArray(obj) ? obj.slice() : {...obj};
+  // $FlowFixMe number or string is fine here
+  updated[key] = copyWithSetImpl(obj[key], path, idx + 1, value);
+  return updated;
+}
+
+function copyWithSet(obj: Object | Array<any>, path: Array<string | number>, value: any): Object | Array<any> {
+  return copyWithSetImpl(obj, path, 0, value);
+}
+
+module.exports = getData;

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/CameraRoll/RCTImagePickerManager.m

@@ -108,8 +108,15 @@ didFinishPickingMediaWithInfo:(NSDictionary<NSString *, id> *)info
   BOOL isMovie = [mediaType isEqualToString:(NSString *)kUTTypeMovie];
   NSString *key = isMovie ? UIImagePickerControllerMediaURL : UIImagePickerControllerReferenceURL;
   NSURL *imageURL = info[key];
+  UIImage *image = info[UIImagePickerControllerOriginalImage];
+  NSNumber *width = 0;
+  NSNumber *height = 0;
+  if (image) {
+    height = @(image.size.height);
+    width = @(image.size.width);
+  }
   if (imageURL) {
-    [self _dismissPicker:picker args:@[imageURL.absoluteString]];
+    [self _dismissPicker:picker args:@[imageURL.absoluteString, RCTNullIfNil(height), RCTNullIfNil(width)]];
     return;
   }
 
@@ -120,7 +127,7 @@ didFinishPickingMediaWithInfo:(NSDictionary<NSString *, id> *)info
   // WARNING: Using ImageStoreManager may cause a memory leak because the
   // image isn't automatically removed from store once we're done using it.
   [_bridge.imageStoreManager storeImage:originalImage withBlock:^(NSString *tempImageTag) {
-    [self _dismissPicker:picker args:tempImageTag ? @[tempImageTag] : nil];
+    [self _dismissPicker:picker args:tempImageTag ? @[tempImageTag, height, width] : 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/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -127,7 +127,7 @@ var DrawerLayoutAndroid = React.createClass({
      * - idle, meaning there is no interaction with the navigation view happening at the time
      * - dragging, meaning there is currently an interaction with the navigation view
      * - settling, meaning that there was an interaction with the navigation view, and the
-     * navigation view is now finishing it's closing or opening animation
+     * navigation view is now finishing its closing or opening animation
      */
     onDrawerStateChanged: ReactPropTypes.func,
     /**

Libraries/Components/Keyboard/Keyboard.js

@@ -6,14 +6,12 @@
  * 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 IOSDefaultEventPluginOrder
+ * @providesModule Keyboard
  * @flow
  */
 'use strict';
 
-var IOSDefaultEventPluginOrder = [
-  'ResponderEventPlugin',
-  'IOSNativeBridgeEventPlugin'
-];
+const NativeEventEmitter = require('NativeEventEmitter');
+const KeyboardObserver = require('NativeModules').KeyboardObserver;
 
-module.exports = IOSDefaultEventPluginOrder;
+module.exports = new NativeEventEmitter(KeyboardObserver);

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/Navigation/NavigatorIOS.ios.js

@@ -308,6 +308,15 @@ var NavigatorIOS = React.createClass({
      */
     translucent: PropTypes.bool,
 
+    /**
+     * A Boolean value that indicates whether the interactive pop gesture is enabled. Useful
+     * for enabling/disabling the back swipe navigation gesture. If this prop is not provided,
+     * the default behavior is for the back swipe gesture to be enabled when the navigation bar
+     * is shown and disabled when the navigation bar is hidden. Once you've provided
+     * the interactivePopGestureEnabled prop, you can never restore the default behavior.
+     */
+    interactivePopGestureEnabled: PropTypes.bool,
+
   },
 
   navigator: (undefined: ?Object),
@@ -686,7 +695,8 @@ var NavigatorIOS = React.createClass({
           style={styles.transitioner}
           vertical={this.props.vertical}
           requestedTopOfStack={this.state.requestedTopOfStack}
-          onNavigationComplete={this._handleNavigationComplete}>
+          onNavigationComplete={this._handleNavigationComplete}
+          interactivePopGestureEnabled={this.props.interactivePopGestureEnabled}>
           {items}
         </NavigatorTransitionerIOS>
       </StaticContainer>

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/RefreshControl/RefreshControl.js

@@ -20,7 +20,7 @@ const View = require('View');
 const requireNativeComponent = require('requireNativeComponent');
 
 if (Platform.OS === 'android') {
-  var RefreshLayoutConsts = require('NativeModules').UIManager.AndroidSwipeRefreshLayout.Constants;
+  var RefreshLayoutConsts = require('UIManager').AndroidSwipeRefreshLayout.Constants;
 } else {
   var RefreshLayoutConsts = {SIZE: {}};
 }
@@ -86,7 +86,7 @@ const RefreshControl = React.createClass({
     /**
      * Whether the view should be indicating an active refresh.
      */
-    refreshing: React.PropTypes.bool,
+    refreshing: React.PropTypes.bool.isRequired,
     /**
      * The color of the refresh indicator.
      * @platform ios
@@ -121,10 +121,32 @@ const RefreshControl = React.createClass({
      * Size of the refresh indicator, see RefreshControl.SIZE.
      * @platform android
      */
-    size: React.PropTypes.oneOf(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE),
+    size: React.PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE]),
+    /**
+     * Progress view top offset
+     * @platform android
+     */
+    progressViewOffset: React.PropTypes.number,
   },
 
-  _nativeRef: {},
+  _nativeRef: (null: any),
+  _lastNativeRefreshing: false,
+
+  componentDidMount() {
+    this._lastNativeRefreshing = this.props.refreshing;
+  },
+
+  componentDidUpdate(prevProps: {refreshing: boolean}) {
+    // RefreshControl is a controlled component so if the native refreshing
+    // value doesn't match the current js refreshing prop update it to
+    // the js value.
+    if (this.props.refreshing !== prevProps.refreshing) {
+      this._lastNativeRefreshing = this.props.refreshing;
+    } else if (this.props.refreshing !== this._lastNativeRefreshing) {
+      this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
+      this._lastNativeRefreshing = this.props.refreshing;
+    }
+  },
 
   render() {
     return (
@@ -137,11 +159,13 @@ const RefreshControl = React.createClass({
   },
 
   _onRefresh() {
+    this._lastNativeRefreshing = true;
+
     this.props.onRefresh && this.props.onRefresh();
 
-    if (this._nativeRef) {
-      this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
-    }
+    // The native component will start refreshing so force an update to
+    // make sure it stays in sync with the js component.
+    this.forceUpdate();
   },
 });
 

Libraries/Components/ScrollResponder.js

@@ -13,8 +13,7 @@
 
 var Dimensions = require('Dimensions');
 var Platform = require('Platform');
-var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
-var React = require('React');
+var Keyboard = require('Keyboard');
 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
@@ -480,10 +476,10 @@ var ScrollResponderMixin = {
   componentWillMount: function() {
     this.keyboardWillOpenTo = null;
     this.additionalScrollOffset = 0;
-    this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', this.scrollResponderKeyboardWillShow);
-    this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillHide', this.scrollResponderKeyboardWillHide);
-    this.addListenerOn(RCTDeviceEventEmitter, 'keyboardDidShow', this.scrollResponderKeyboardDidShow);
-    this.addListenerOn(RCTDeviceEventEmitter, 'keyboardDidHide', this.scrollResponderKeyboardDidHide);
+    this.addListenerOn(Keyboard, 'keyboardWillShow', this.scrollResponderKeyboardWillShow);
+    this.addListenerOn(Keyboard, 'keyboardWillHide', this.scrollResponderKeyboardWillHide);
+    this.addListenerOn(Keyboard, 'keyboardDidShow', this.scrollResponderKeyboardDidShow);
+    this.addListenerOn(Keyboard, 'keyboardDidHide', this.scrollResponderKeyboardDidHide);
   },
 
   /**

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

@@ -11,30 +11,26 @@
  */
 'use strict';
 
-var ColorPropType = require('ColorPropType');
-var EdgeInsetsPropType = require('EdgeInsetsPropType');
-var Platform = require('Platform');
-var PointPropType = require('PointPropType');
-var RCTScrollView = require('NativeModules').UIManager.RCTScrollView;
-var RCTScrollViewManager = require('NativeModules').ScrollViewManager;
-var React = require('React');
-var ReactNative = require('ReactNative');
-var ScrollResponder = require('ScrollResponder');
-var StyleSheet = require('StyleSheet');
-var StyleSheetPropType = require('StyleSheetPropType');
-var View = require('View');
-var ViewStylePropTypes = require('ViewStylePropTypes');
+const ColorPropType = require('ColorPropType');
+const EdgeInsetsPropType = require('EdgeInsetsPropType');
+const Platform = require('Platform');
+const PointPropType = require('PointPropType');
+const RCTScrollViewManager = require('NativeModules').ScrollViewManager;
+const React = require('React');
+const ReactNative = require('ReactNative');
+const ScrollResponder = require('ScrollResponder');
+const StyleSheet = require('StyleSheet');
+const StyleSheetPropType = require('StyleSheetPropType');
+const View = require('View');
+const ViewStylePropTypes = require('ViewStylePropTypes');
 
-var deprecatedPropType = require('deprecatedPropType');
-var dismissKeyboard = require('dismissKeyboard');
-var flattenStyle = require('flattenStyle');
-var invariant = require('fbjs/lib/invariant');
-var requireNativeComponent = require('requireNativeComponent');
-var processDecelerationRate = require('processDecelerationRate');
-var PropTypes = React.PropTypes;
-
-var SCROLLVIEW = 'ScrollView';
-var INNERVIEW = 'InnerScrollView';
+const deprecatedPropType = require('deprecatedPropType');
+const dismissKeyboard = require('dismissKeyboard');
+const flattenStyle = require('flattenStyle');
+const invariant = require('fbjs/lib/invariant');
+const processDecelerationRate = require('processDecelerationRate');
+const PropTypes = React.PropTypes;
+const requireNativeComponent = require('requireNativeComponent');
 
 /**
  * Component that wraps platform ScrollView while providing
@@ -51,7 +47,7 @@ var INNERVIEW = 'InnerScrollView';
  * Doesn't yet support other contained responders from blocking this scroll
  * view from becoming the responder.
  */
-var ScrollView = React.createClass({
+const ScrollView = React.createClass({
   propTypes: {
     ...View.propTypes,
     /**
@@ -63,7 +59,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,
@@ -119,7 +115,7 @@ var ScrollView = React.createClass({
      *     </ScrollView>
      *   );
      *   ...
-     *   var styles = StyleSheet.create({
+     *   const styles = StyleSheet.create({
      *     contentContainer: {
      *       paddingVertical: 20
      *     }
@@ -210,8 +206,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,
@@ -219,7 +218,6 @@ var ScrollView = React.createClass({
      * When true, the scroll view stops on multiples of the scroll view's size
      * when scrolling. This can be used for horizontal pagination. The default
      * value is false.
-     * @platform ios
      */
     pagingEnabled: PropTypes.bool,
     /**
@@ -329,6 +327,15 @@ var ScrollView = React.createClass({
      * @platform android
      */
     endFillColor: ColorPropType,
+
+    /**
+     * Tag used to log scroll performance on this scroll view. Will force
+     * momentum events to be turned on (see sendMomentumEvents). This doesn't do
+     * anything out of the box and you need to implement a custom native
+     * FpsListener for it to be useful.
+     * @platform android
+     */
+    scrollPerfTag: PropTypes.string,
   },
 
   mixins: [ScrollResponder.Mixin],
@@ -338,7 +345,7 @@ var ScrollView = React.createClass({
   },
 
   setNativeProps: function(props: Object) {
-    this.refs[SCROLLVIEW].setNativeProps(props);
+    this._scrollViewRef && this._scrollViewRef.setNativeProps(props);
   },
 
   /**
@@ -356,16 +363,16 @@ var ScrollView = React.createClass({
    * implement this method so that they can be composed while providing access
    * to the underlying scroll responder's methods.
    */
-  getScrollResponder: function(): ReactComponent {
+  getScrollResponder: function(): ScrollView {
     return this;
   },
 
   getScrollableNode: function(): any {
-    return ReactNative.findNodeHandle(this.refs[SCROLLVIEW]);
+    return ReactNative.findNodeHandle(this._scrollViewRef);
   },
 
   getInnerViewNode: function(): any {
-    return ReactNative.findNodeHandle(this.refs[INNERVIEW]);
+    return ReactNative.findNodeHandle(this._innerViewRef);
   },
 
   /**
@@ -389,7 +396,6 @@ var ScrollView = React.createClass({
     } else {
       ({x, y, animated} = y || {});
     }
-    // $FlowFixMe - Don't know how to pass Mixin correctly. Postpone for now
     this.getScrollResponder().scrollResponderScrollTo({x: x || 0, y: y || 0, animated: animated !== false});
   },
 
@@ -404,7 +410,7 @@ var ScrollView = React.createClass({
   _handleScroll: function(e: Object) {
     if (__DEV__) {
       if (this.props.onScroll && !this.props.scrollEventThrottle && Platform.OS === 'ios') {
-        console.log(
+        console.log( // eslint-disable-line no-console-disallow
           'You specified `onScroll` on a <ScrollView> but not ' +
           '`scrollEventThrottle`. You will only receive one event. ' +
           'Using `16` you get all the events but be aware that it may ' +
@@ -422,18 +428,29 @@ var ScrollView = React.createClass({
   },
 
   _handleContentOnLayout: function(e: Object) {
-    var {width, height} = e.nativeEvent.layout;
+    const {width, height} = e.nativeEvent.layout;
     this.props.onContentSizeChange && this.props.onContentSizeChange(width, height);
   },
 
+  _scrollViewRef: (null: ?ScrollView),
+  _setScrollViewRef: function(ref: ?ScrollView) {
+    this._scrollViewRef = ref;
+  },
+
+  _innerViewRef: (null: ?View),
+  _setInnerViewRef: function(ref: ?View) {
+    this._innerViewRef = ref;
+  },
+
   render: function() {
-    var contentContainerStyle = [
+    const contentContainerStyle = [
       this.props.horizontal && styles.contentContainerHorizontal,
       this.props.contentContainerStyle,
     ];
+    let style, childLayoutProps;
     if (__DEV__ && this.props.style) {
-      var style = flattenStyle(this.props.style);
-      var childLayoutProps = ['alignItems', 'justifyContent']
+      style = flattenStyle(this.props.style);
+      childLayoutProps = ['alignItems', 'justifyContent']
         .filter((prop) => style && style[prop] !== undefined);
       invariant(
         childLayoutProps.length === 0,
@@ -442,34 +459,34 @@ var ScrollView = React.createClass({
       );
     }
 
-    var contentSizeChangeProps = {};
+    let contentSizeChangeProps = {};
     if (this.props.onContentSizeChange) {
       contentSizeChangeProps = {
         onLayout: this._handleContentOnLayout,
       };
     }
 
-    var contentContainer =
+    const contentContainer =
       <View
         {...contentSizeChangeProps}
-        ref={INNERVIEW}
+        ref={this._setInnerViewRef}
         style={contentContainerStyle}
         removeClippedSubviews={this.props.removeClippedSubviews}
         collapsable={false}>
         {this.props.children}
       </View>;
 
-    var alwaysBounceHorizontal =
+    const alwaysBounceHorizontal =
       this.props.alwaysBounceHorizontal !== undefined ?
         this.props.alwaysBounceHorizontal :
         this.props.horizontal;
 
-    var alwaysBounceVertical =
+    const alwaysBounceVertical =
       this.props.alwaysBounceVertical !== undefined ?
         this.props.alwaysBounceVertical :
         !this.props.horizontal;
 
-    var props = {
+    const props = {
       ...this.props,
       alwaysBounceHorizontal,
       alwaysBounceVertical,
@@ -493,7 +510,7 @@ var ScrollView = React.createClass({
       sendMomentumEvents: (this.props.onMomentumScrollBegin || this.props.onMomentumScrollEnd) ? true : false,
     };
 
-    var onRefreshStart = this.props.onRefreshStart;
+    const onRefreshStart = this.props.onRefreshStart;
     if (onRefreshStart) {
       // this is necessary because if we set it on props, even when empty,
       // it'll trigger the default pull-to-refresh behavior on native.
@@ -501,12 +518,12 @@ var ScrollView = React.createClass({
         function() { onRefreshStart && onRefreshStart(this.endRefreshing); }.bind(this);
     }
 
-    var { decelerationRate } = this.props;
+    const { decelerationRate } = this.props;
     if (decelerationRate) {
       props.decelerationRate = processDecelerationRate(decelerationRate);
     }
 
-    var ScrollViewClass;
+    let ScrollViewClass;
     if (Platform.OS === 'ios') {
       ScrollViewClass = RCTScrollView;
     } else if (Platform.OS === 'android') {
@@ -521,12 +538,12 @@ var ScrollView = React.createClass({
       'ScrollViewClass must not be undefined'
     );
 
-    var refreshControl = this.props.refreshControl;
+    const refreshControl = this.props.refreshControl;
     if (refreshControl) {
       if (Platform.OS === 'ios') {
         // On iOS the RefreshControl is a child of the ScrollView.
         return (
-          <ScrollViewClass {...props} ref={SCROLLVIEW}>
+          <ScrollViewClass {...props} ref={this._setScrollViewRef}>
             {refreshControl}
             {contentContainer}
           </ScrollViewClass>
@@ -538,21 +555,21 @@ var ScrollView = React.createClass({
         return React.cloneElement(
           refreshControl,
           {style: props.style},
-          <ScrollViewClass {...props} style={styles.base} ref={SCROLLVIEW}>
+          <ScrollViewClass {...props} style={styles.base} ref={this._setScrollViewRef}>
             {contentContainer}
           </ScrollViewClass>
         );
       }
     }
     return (
-      <ScrollViewClass {...props} ref={SCROLLVIEW}>
+      <ScrollViewClass {...props} ref={this._setScrollViewRef}>
         {contentContainer}
       </ScrollViewClass>
     );
   }
 });
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   base: {
     flex: 1,
   },
@@ -562,16 +579,29 @@ var styles = StyleSheet.create({
   },
 });
 
+let nativeOnlyProps, AndroidScrollView, AndroidHorizontalScrollView, RCTScrollView;
 if (Platform.OS === 'android') {
-  var nativeOnlyProps = { nativeOnly : { 'sendMomentumEvents' : true } };
-  var AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
-  var AndroidHorizontalScrollView = requireNativeComponent(
+  nativeOnlyProps = {
+    nativeOnly: {
+      sendMomentumEvents: true,
+    }
+  };
+  AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
+  AndroidHorizontalScrollView = requireNativeComponent(
     'AndroidHorizontalScrollView',
     ScrollView,
     nativeOnlyProps
   );
 } else if (Platform.OS === 'ios') {
-  var RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView);
+  nativeOnlyProps = {
+    nativeOnly: {
+      onMomentumScrollBegin: true,
+      onMomentumScrollEnd : true,
+      onScrollBeginDrag: true,
+      onScrollEndDrag: true,
+    }
+  };
+  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/StatusBar/StatusBarIOS.android.js

@@ -11,4 +11,6 @@
  */
 'use strict';
 
-module.exports = null;
+const NativeEventEmitter = require('NativeEventEmitter');
+
+module.exports = new NativeEventEmitter('StatusBarManager');

Libraries/Components/StatusBar/StatusBarIOS.ios.js

@@ -11,24 +11,26 @@
  */
 'use strict';
 
+const NativeEventEmitter = require('NativeEventEmitter');
 const StatusBar = require('StatusBar');
+const StatusBarManager = require('NativeModules').StatusBarManager;
 
 import type {StatusBarStyle, StatusBarAnimation} from 'StatusBar';
 
 /**
  * Deprecated. Use `StatusBar` instead.
  */
-const StatusBarIOS = {
+class StatusBarIOS extends NativeEventEmitter {
 
   setStyle(style: StatusBarStyle, animated?: boolean) {
     console.warn('`StatusBarIOS.setStyle` is deprecated. Use `StatusBar.setBarStyle` instead.');
     StatusBar.setBarStyle(style, animated);
-  },
+  }
 
   setHidden(hidden: boolean, animation?: StatusBarAnimation) {
     console.warn('`StatusBarIOS.setHidden` is deprecated. Use `StatusBar.setHidden` instead.');
     StatusBar.setHidden(hidden, animation);
-  },
+  }
 
   setNetworkActivityIndicatorVisible(visible: boolean) {
     console.warn(
@@ -36,7 +38,7 @@ const StatusBarIOS = {
       'Use `StatusBar.setNetworkActivityIndicatorVisible` instead.'
     );
     StatusBar.setNetworkActivityIndicatorVisible(visible);
-  },
-};
+  }
+}
 
-module.exports = StatusBarIOS;
+module.exports = new StatusBarIOS(StatusBarManager);

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

@@ -120,6 +120,7 @@ var TextInput = React.createClass({
      * Determines which keyboard to open, e.g.`numeric`.
      *
      * The following values work across platforms:
+     *
      * - default
      * - numeric
      * - email-address
@@ -150,22 +151,54 @@ var TextInput = React.createClass({
       'dark',
     ]),
     /**
-     * Determines how the return key should look.
-     * @platform ios
+     * Determines how the return key should look. On Android you can also use
+     * `returnKeyLabel`.
+     *
+     * The following values work across platforms:
+     *
+     * - done
+     * - go
+     * - next
+     * - search
+     * - send
+     *
+     * The following values work on Android only:
+     *
+     * - none
+     * - previous
+     *
+     * The following values work on iOS only:
+     *
+     * - default
+     * - emergency-call
+     * - google
+     * - join
+     * - route
+     * - yahoo
      */
     returnKeyType: PropTypes.oneOf([
-      'default',
+      // Cross-platform
+      'done',
       'go',
-      'google',
-      'join',
       'next',
-      'route',
       'search',
       'send',
-      'yahoo',
-      'done',
+      // Android-only
+      'none',
+      'previous',
+      // iOS-only
+      'default',
       'emergency-call',
+      'google',
+      'join',
+      'route',
+      'yahoo',
     ]),
+    /**
+     * Sets the return key to the label. Use it instead of `returnKeyType`.
+     * @platform android
+     */
+     returnKeyLabel: PropTypes.string,
     /**
      * Limits the maximum number of characters that can be entered. Use this
      * instead of implementing the logic in JS to avoid flicker.
@@ -443,8 +476,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];
@@ -531,6 +564,8 @@ var TextInput = React.createClass({
         children={children}
         editable={this.props.editable}
         selectTextOnFocus={this.props.selectTextOnFocus}
+        returnKeyType={this.props.returnKeyType}
+        returnKeyLabel={this.props.returnKeyLabel}
       />;
 
     return (

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: ReactPropTypes.bool,
   },
 
   componentDidMount: function() {
@@ -201,7 +207,7 @@ var ViewPagerAndroid = React.createClass({
 
   /**
    * A helper function to scroll to a specific page in the ViewPager.
-   * The transition between pages will be *not* be animated.
+   * The transition between pages will *not* be animated.
    */
   setPageWithoutAnimation: function(selectedPage: number) {
     UIManager.dispatchViewManagerCommand(

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
@@ -135,9 +137,10 @@ var ListView = React.createClass({
      * a renderable component to be rendered as the row.  By default the data
      * is exactly what was put into the data source, but it's also possible to
      * provide custom extractors. ListView can be notified when a row is
-     * being highlighted by calling highlightRow function. The separators above and
-     * below will be hidden when a row is highlighted. The highlighted state of
-     * a row can be reset by calling highlightRow(null).
+     * being highlighted by calling `highlightRow(sectionID, rowID)`. This
+     * sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you
+     * to control the separators above and below the highlighted row. The highlighted
+     * state of a row can be reset by calling highlightRow(null).
      */
     renderRow: PropTypes.func.isRequired,
     /**
@@ -593,12 +596,19 @@ var ListView = React.createClass({
         var rowID = rowIDs[rowIdx];
         var frame = this._childFrames[totalIndex];
         totalIndex++;
+        if(this.props.renderSeparator &&
+           (rowIdx !== rowIDs.length - 1 || sectionIdx === allRowIDs.length - 1)){
+          totalIndex++;
+        }
         if (!frame) {
           break;
         }
         var rowVisible = visibleSection[rowID];
         var min = isVertical ? frame.y : frame.x;
         var max = min + (isVertical ? frame.height : frame.width);
+        if ((!min && !max) || (min === max)) {
+          break;
+        }
         if (min > visibleMax || max < visibleMin) {
           if (rowVisible) {
             visibilityChanged = true;

Libraries/CustomComponents/NavigationExperimental/NavigationCard.js

@@ -35,9 +35,9 @@
 const Animated = require('Animated');
 const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
 const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
-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 +50,40 @@ 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:
+      PropTypes.shape(NavigationPropTypes.SceneRenderer).isRequired,
+  };
+
+  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,49 +111,39 @@ 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;
+  static CardStackPanResponder = NavigationCardStackPanResponder;
+  static CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
+  static PagerPanResponder = NavigationPagerPanResponder;
+  static PagerStyleInterpolator = NavigationPagerStyleInterpolator;
+}
 
 const styles = StyleSheet.create({
   main: {
@@ -141,13 +160,6 @@ const styles = StyleSheet.create({
   },
 });
 
+NavigationCard = NavigationPointerEventsContainer.create(NavigationCard);
 
-const NavigationCardContainer = NavigationContainer.create(NavigationCard);
-
-// Export these buil-in interaction modules.
-NavigationCardContainer.CardStackPanResponder = NavigationCardStackPanResponder;
-NavigationCardContainer.CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
-NavigationCardContainer.PagerPanResponder = NavigationPagerPanResponder;
-NavigationCardContainer.PagerStyleInterpolator = NavigationPagerStyleInterpolator;
-
-module.exports = NavigationCardContainer;
+module.exports = NavigationCard;

Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js

@@ -35,7 +35,6 @@
 const NavigationAnimatedView = require('NavigationAnimatedView');
 const NavigationCard = require('NavigationCard');
 const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
-const NavigationContainer = require('NavigationContainer');
 const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
 const NavigationPropTypes = require('NavigationPropTypes');
 const React = require('React');
@@ -48,6 +47,7 @@ const {PropTypes} = React;
 const {Directions} = NavigationCardStackPanResponder;
 
 import type {
+  NavigationActionCaller,
   NavigationParentState,
   NavigationSceneRenderer,
   NavigationSceneRendererProps,
@@ -60,10 +60,16 @@ import type {
 type Props = {
   direction: NavigationGestureDirection,
   navigationState: NavigationParentState,
+  onNavigate: NavigationActionCaller,
   renderOverlay: ?NavigationSceneRenderer,
   renderScene: NavigationSceneRenderer,
 };
 
+type DefaultProps = {
+  direction: NavigationGestureDirection,
+  renderOverlay: ?NavigationSceneRenderer,
+};
+
 /**
  * A controlled navigation view that renders a stack of cards.
  *
@@ -78,17 +84,18 @@ type Props = {
  *   +-+            |
  *     +------------+
  */
-class NavigationCardStack extends React.Component {
+class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
   _renderScene : NavigationSceneRenderer;
 
   static propTypes = {
     direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]),
     navigationState: NavigationPropTypes.navigationParentState.isRequired,
+    onNavigate: NavigationPropTypes.SceneRendererProps.onNavigate,
     renderOverlay: PropTypes.func,
     renderScene: PropTypes.func.isRequired,
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     direction: Directions.HORIZONTAL,
     renderOverlay: emptyFunction.thatReturnsNull,
   };
@@ -101,7 +108,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 +122,8 @@ class NavigationCardStack extends React.Component {
         navigationState={this.props.navigationState}
         renderOverlay={this.props.renderOverlay}
         renderScene={this._renderScene}
+        onNavigate={this.props.onNavigate}
+        // $FlowFixMe - style should be declared
         style={[styles.animatedView, this.props.style]}
       />
     );
@@ -149,4 +158,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = NavigationContainer.create(NavigationCardStack);
+module.exports = NavigationCardStack;