Use latest simulator by not specifying the OS version

Summary:Appetize asked for this so they can better support us, since they will usually have more simulators available for the latest versions.
Closes https://github.com/facebook/react-native/pull/7061

Differential Revision: D3196110

Pulled By: mkonicek

fb-gh-sync-id: 2406ab6e1ee352f0148957e851d7f483a2182f90
fbshipit-source-id: 2406ab6e1ee352f0148957e851d7f483a2182f90

.eslintrc

@@ -147,11 +147,6 @@
     "wrap-iife": 0,                  // require immediate function invocation to be wrapped in parentheses (off by default)
     "yoda": 1,                       // require or disallow Yoda conditions
 
-  // Strict Mode
-  // These rules relate to using strict mode.
-
-    "strict": [2, "global"],         // require or disallow the "use strict" pragma in the global scope (off by default in the node environment)
-
   // Variables
   // These rules have to do with variable declarations.
 

.flowconfig

@@ -42,10 +42,35 @@
 # Ignore Website
 .*/website/.*
 
+# Ignore generators
+.*/local-cli/generator.*
+
+# Ignore BUCK generated folders
+.*\.buckd/
+
+.*/node_modules/is-my-json-valid/test/.*\.json
+.*/node_modules/iconv-lite/encodings/tables/.*\.json
+.*/node_modules/y18n/test/.*\.json
+.*/node_modules/spdx-license-ids/spdx-license-ids.json
+.*/node_modules/spdx-exceptions/index.json
+.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
+.*/node_modules/resolve/lib/core.json
+.*/node_modules/jsonparse/samplejson/.*\.json
+.*/node_modules/json5/test/.*\.json
+.*/node_modules/ua-parser-js/test/.*\.json
+.*/node_modules/builtin-modules/builtin-modules.json
+.*/node_modules/binary-extensions/binary-extensions.json
+.*/node_modules/url-regex/tlds.json
+.*/node_modules/joi/.*\.json
+.*/node_modules/isemail/.*\.json
+.*/node_modules/tr46/.*\.json
+
+
 [include]
 
 [libs]
 Libraries/react-native/react-native-interface.js
+flow/
 
 [options]
 module.system=haste
@@ -62,9 +87,9 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.21.0
+^0.22.0

.gitignore

@@ -24,6 +24,9 @@ project.xcworkspace
 # Gradle
 /build/
 /Examples/**/android/app/build/
+/Examples/**/android/app/gradle/
+/Examples/**/android/app/gradlew
+/Examples/**/android/app/gradlew.bat
 /ReactAndroid/build/
 
 # Buck
@@ -37,6 +40,7 @@ buck-out
 .gradle
 local.properties
 *.iml
+/android/
 
 # Node
 node_modules

.travis.yml

@@ -2,45 +2,24 @@ language: objective-c
 
 osx_image: xcode7.2
 
-cache:
-  directories:
-    - node_modules
-    - .nvm
-
 install:
   - brew reinstall nvm
-  - mkdir -p .nvm
-  - export NVM_DIR="$PWD/.nvm"
+  - mkdir -p /Users/travis/build/facebook/.nvm
+  - export NVM_DIR="/Users/travis/build/facebook/.nvm"
   - source $(brew --prefix nvm)/nvm.sh
-  - nvm install 5
+  # testing with npm@2 for diversity, Circle tests with npm@3
+  - nvm install 4.4.0
   - rm -Rf "${TMPDIR}/jest_preprocess_cache"
   - npm config set spin=false
   - npm config set progress=false
   - npm install
 
 script:
-- |
-  if [ "$TEST_TYPE" = objc ]
-  then
-
-    travis_retry ./scripts/objc-test.sh
-
-  elif [ "$TEST_TYPE" = js ]
-  then
-
-    npm install github@0.2.4
-    cat <(echo eslint; npm run lint --silent -- --format=json; echo flow; npm run flow --silent -- --json) | GITHUB_TOKEN="af6ef0d15709bc91d""06a6217a5a826a226fb57b7" node bots/code-analysis-bot.js
-    npm run flow && npm test
-
-  elif [ "$TEST_TYPE" = e2e-objc ]
-  then
-
-    travis_retry ./scripts/e2e-test.sh --ios
-
-  else
-    echo "Unknown test type: $TEST_TYPE"
-    exit 1
-  fi
+  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry ./scripts/objc-test.sh; fi
+  - if [[ "$TEST_TYPE" = e2e-objc ]]; then travis_retry ./scripts/e2e-test.sh --ios; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
+  - if [[ "$TEST_TYPE" = js ]]; then travis_retry ./scripts/e2e-test.sh --packager; fi
 
 env:
   matrix:

CONTRIBUTING.md

@@ -19,11 +19,17 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
 1. Fork the repo and create your branch from `master`.
 2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-4. Add the copyright notice to the top of any new files you've added.
-5. Ensure tests pass on Travis and Circle CI.
-6. Make sure your code lints (`node linter.js <files touched>`).
-7. Squash your commits (`git rebase -i`).
-8. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
+4. If you've updated the docs, verify the website locally and submit screenshots if applicable
+```
+$ cd website
+$ npm install && npm start
+go to: http://localhost:8079/react-native/index.html
+```
+5. Add the copyright notice to the top of any new files you've added.
+6. Ensure tests pass on Travis and Circle CI.
+7. Make sure your code lints (`node linter.js <files touched>`).
+8. Squash your commits (`git rebase -i`).
+9. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
 
 #### Copyright Notice for files
 

Examples/UIExplorer/CameraRollView.js

@@ -148,7 +148,8 @@ var CameraRollView = React.createClass({
       fetchParams.after = this.state.lastCursor;
     }
 
-    CameraRoll.getPhotos(fetchParams, this._appendAssets, logError);
+    CameraRoll.getPhotos(fetchParams)
+      .then((data) => this._appendAssets(data), (e) => logError(e));
   },
 
   /**

Examples/UIExplorer/ExampleTypes.js

@@ -18,7 +18,7 @@
 
 export type Example = {
   title: string,
-  render: () => ?ReactElement<any, any, any>,
+  render: () => ?ReactElement<any>,
   description?: string,
   platform?: string;
 };

Examples/UIExplorer/ImageExample.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.
  *
@@ -18,6 +25,7 @@
 var React = require('react-native');
 var {
   Image,
+  Platform,
   StyleSheet,
   Text,
   View,
@@ -381,37 +389,59 @@ exports.examples = [
       'rendered within the frame.',
     render: function() {
       return (
-        <View style={styles.horizontal}>
-          <View>
-            <Text style={[styles.resizeModeText]}>
-              Contain
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.contain}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Cover
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.cover}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Stretch
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.stretch}
-              source={fullImage}
-            />
-          </View>
+        <View>
+          {[smallImage, fullImage].map((image, index) => {
+            return (
+            <View key={index}>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Contain
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.contain}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Cover
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.cover}
+                    source={image}
+                  />
+                </View>
+              </View>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Stretch
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.stretch}
+                    source={image}
+                  />
+                </View>
+                { Platform.OS === 'android' ?
+                  <View style={styles.leftMargin}>
+                    <Text style={[styles.resizeModeText]}>
+                      Center
+                    </Text>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode={Image.resizeMode.center}
+                      source={image}
+                    />
+                  </View>
+                : null }
+              </View>
+            </View>
+          );
+        })}
         </View>
       );
     },
@@ -455,7 +485,7 @@ exports.examples = [
   {
     title: 'Image Size',
     render: function() {
-      return <ImageSizeExample source={fullImage} />; 
+      return <ImageSizeExample source={fullImage} />;
     },
     platform: 'ios',
   },

Examples/UIExplorer/ModalExample.js

@@ -19,7 +19,7 @@ var React = require('react-native');
 var {
   Modal,
   StyleSheet,
-  SwitchIOS,
+  Switch,
   Text,
   TouchableHighlight,
   View,
@@ -96,7 +96,9 @@ var ModalExample = React.createClass({
         <Modal
           animated={this.state.animated}
           transparent={this.state.transparent}
-          visible={this.state.modalVisible}>
+          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>
@@ -111,12 +113,12 @@ var ModalExample = React.createClass({
 
         <View style={styles.row}>
           <Text style={styles.rowTitle}>Animated</Text>
-          <SwitchIOS value={this.state.animated} onValueChange={this._toggleAnimated} />
+          <Switch value={this.state.animated} onValueChange={this._toggleAnimated} />
         </View>
 
         <View style={styles.row}>
           <Text style={styles.rowTitle}>Transparent</Text>
-          <SwitchIOS value={this.state.transparent} onValueChange={this._toggleTransparent} />
+          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
         </View>
 
         <Button onPress={this._setModalVisible.bind(this, true)}>

Examples/UIExplorer/NavigationExperimental/LegacyNavigator/LegacyNavigatorExample.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.
  *
@@ -161,7 +168,7 @@ var TabBarExample = React.createClass({
       if (navigator) {
         var callback = (event) => {
           console.log(
-            `TabBarExample: event ${event.type}`,
+            `LegacyNavigator: event ${event.type}`,
             {
               route: JSON.stringify(event.data.route),
               target: event.target,

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.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,20 +20,23 @@
 */
 'use strict';
 
-var React = require('react-native');
-var {
+const React = require('react-native');
+
+const {
   Animated,
   NavigationExperimental,
   StyleSheet,
   ScrollView,
 } = React;
-var NavigationExampleRow = require('./NavigationExampleRow');
-var {
+
+const  NavigationExampleRow = require('./NavigationExampleRow');
+
+const  {
   AnimatedView: NavigationAnimatedView,
   Card: NavigationCard,
-  RootContainer: NavigationRootContainer,
-  Reducer: NavigationReducer,
   Header: NavigationHeader,
+  Reducer: NavigationReducer,
+  RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
 const NavigationBasicReducer = NavigationReducer.StackReducer({
@@ -48,10 +58,11 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
 
 class NavigationAnimatedExample extends React.Component {
   componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
     this._renderCard = this._renderCard.bind(this);
-    this._renderScene = this._renderScene.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);
   }
   render() {
     return (
@@ -78,8 +89,8 @@ class NavigationAnimatedExample extends React.Component {
         navigationState={navigationState}
         style={styles.animatedView}
         renderOverlay={this._renderHeader}
-        setTiming={(pos, navState) => {
-          Animated.timing(pos, {toValue: navState.index, duration: 1000}).start();
+        applyAnimation={(pos, navState) => {
+          Animated.timing(pos, {toValue: navState.index, duration: 500}).start();
         }}
         renderScene={this._renderCard}
       />
@@ -90,11 +101,19 @@ class NavigationAnimatedExample extends React.Component {
     return (
       <NavigationHeader
         {...props}
-        getTitle={state => state.key}
+        renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
+  _renderTitleComponent(/*NavigationSceneRendererProps*/ props) {
+    return (
+      <NavigationHeader.Title>
+        {props.scene.navigationState.key}
+      </NavigationHeader.Title>
+    );
+  }
+
   _renderCard(/*NavigationSceneRendererProps*/ props) {
     return (
       <NavigationCard
@@ -134,7 +153,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT,
   },
 });
 

Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.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.
  *
@@ -14,7 +21,6 @@
 'use strict';
 
 const NavigationExampleRow = require('./NavigationExampleRow');
-const NavigationRootContainer = require('NavigationRootContainer');
 const React = require('react-native');
 
 const {
@@ -23,10 +29,13 @@ const {
   ScrollView,
 } = React;
 
-const NavigationCardStack = NavigationExperimental.CardStack;
-const NavigationStateUtils = NavigationExperimental.StateUtils;
+const {
+  CardStack: NavigationCardStack,
+  StateUtils: NavigationStateUtils,
+  RootContainer: NavigationRootContainer,
+} = NavigationExperimental;
 
-function reduceNavigationState(initialState) {
+function createReducer(initialState) {
   return (currentState, action) => {
     switch (action.type) {
       case 'RootContainerInitialAction':
@@ -47,7 +56,7 @@ function reduceNavigationState(initialState) {
   };
 }
 
-const ExampleReducer = reduceNavigationState({
+const ExampleReducer = createReducer({
   index: 0,
   key: 'exmaple',
   children: [{key: 'First Route'}],

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.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.
  *
@@ -27,7 +34,6 @@ const {
 } = React;
 
 const {
-  AnimatedView: NavigationAnimatedView,
   CardStack: NavigationCardStack,
   Container: NavigationContainer,
   Header: NavigationHeader,
@@ -140,7 +146,7 @@ const ExampleAppReducer = NavigationReducer.TabsReducer({
   ],
 });
 
-function stateTypeTitleMap(pageState) {
+function stateTypeTitleMap(pageState: any) {
   switch (pageState.type) {
     case 'ProfilePage':
       return 'Profile Page';
@@ -179,11 +185,19 @@ class ExampleTabScreen extends React.Component {
     return (
       <NavigationHeader
         {...props}
-        getTitle={state => stateTypeTitleMap(state)}
+        renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
+  _renderTitleComponent(props: NavigationSceneRendererProps) {
+    return (
+      <NavigationHeader.Title>
+        {stateTypeTitleMap(props.scene.navigationState)}
+      </NavigationHeader.Title>
+    );
+  }
+
   _renderScene(props: NavigationSceneRendererProps) {
     const {onNavigate} = props;
     return (
@@ -251,21 +265,33 @@ class NavigationCompositionExample extends React.Component {
 }
 
 class ExampleMainView extends React.Component {
+  _renderScene: NavigationSceneRenderer;
+
+  componentWillMount() {
+    this._renderScene = this._renderScene.bind(this);
+  }
+
   render() {
     return (
       <NavigationView
         navigationState={this.props.navigationState}
         style={styles.tabsContent}
-        renderScene={(tabState, index) => (
-          <ExampleTabScreen
-            key={tabState.key}
-            navigationState={tabState}
-            onNavigate={this._handleNavigation.bind(this, tabState.key)}
-          />
-        )}
+        renderScene={this._renderScene}
       />
     );
   }
+
+  _renderScene(props: NavigationSceneRendererProps): ReactElement {
+    const {scene} = props;
+    return (
+      <ExampleTabScreen
+        key={'tab_screen' + scene.key}
+        navigationState={scene.navigationState}
+        onNavigate={this._handleNavigation.bind(this, scene.key)}
+      />
+    );
+  }
+
   _handleNavigation(tabKey, action) {
     if (ExampleExitAction.match(action)) {
       this.props.onExampleExit();
@@ -274,6 +300,7 @@ class ExampleMainView extends React.Component {
     this.props.onNavigate(action);
   }
 }
+
 ExampleMainView = NavigationContainer.create(ExampleMainView);
 
 const styles = StyleSheet.create({
@@ -284,7 +311,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT
   },
   tabContent: {
     flex: 1,

Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js

@@ -32,7 +32,7 @@ const {
 type GameGrid = Array<Array<?string>>;
 
 const evenOddPlayerMap = ['O', 'X'];
-const rowLeterMap = ['a', 'b', 'c'];
+const rowLetterMap = ['a', 'b', 'c'];
 
 function parseGame(game: string): GameGrid {
   const gameTurns = game ? game.split('-') : [];
@@ -40,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(rowLeterMap[i]+j);
+      const turnIndex = gameTurns.indexOf(rowLetterMap[i]+j);
       if (turnIndex === -1) {
         row[j] = null;
       } else {
@@ -53,7 +53,7 @@ function parseGame(game: string): GameGrid {
 }
 
 function playTurn(game: string, row: number, col: number): string {
-  const turn = rowLeterMap[row] + col;
+  const turn = rowLetterMap[row] + col;
   return game ? (game + '-' + turn) : turn;
 }
 

Examples/UIExplorer/PointerEventsExample.js

@@ -182,7 +182,7 @@ var BoxOnlyExample = React.createClass({
 });
 
 type ExampleClass = {
-  Component: ReactClass<any, any, any>,
+  Component: ReactClass<any>,
   title: string,
   description: string,
 };

Examples/UIExplorer/SliderExample.js

@@ -0,0 +1,169 @@
+/**
+ * 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';
+
+var React = require('react-native');
+var {
+  Slider,
+  Text,
+  StyleSheet,
+  View,
+} = React;
+
+var SliderExample = React.createClass({
+  getDefaultProps() {
+    return {
+      value: 0,
+    }
+  },
+
+  getInitialState() {
+    return {
+      value: this.props.value,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          {this.state.value && +this.state.value.toFixed(3)}
+        </Text>
+        <Slider
+          {...this.props}
+          onValueChange={(value) => this.setState({value: value})} />
+      </View>
+    );
+  }
+});
+
+var SlidingCompleteExample = React.createClass({
+  getInitialState() {
+    return {
+      slideCompletionValue: 0,
+      slideCompletionCount: 0,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <SliderExample
+          {...this.props}
+          onSlidingComplete={(value) => this.setState({
+              slideCompletionValue: value,
+              slideCompletionCount: this.state.slideCompletionCount + 1})} />
+        <Text>
+          Completions: {this.state.slideCompletionCount} Value: {this.state.slideCompletionValue}
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  slider: {
+    height: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 10,
+  },
+});
+
+exports.title = '<Slider>';
+exports.displayName = 'SliderExample';
+exports.description = 'Slider input for numeric values';
+exports.examples = [
+  {
+    title: 'Default settings',
+    render(): ReactElement {
+      return <SliderExample />;
+    }
+  },
+  {
+    title: 'Initial value: 0.5',
+    render(): ReactElement {
+      return <SliderExample value={0.5} />;
+    }
+  },
+  {
+    title: 'minimumValue: -1, maximumValue: 2',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumValue={-1}
+          maximumValue={2}
+        />
+      );
+    }
+  },
+  {
+    title: 'step: 0.25',
+    render(): ReactElement {
+      return <SliderExample step={0.25} />;
+    }
+  },
+  {
+    title: 'onSlidingComplete',
+    render(): ReactElement {
+      return (
+        <SlidingCompleteExample />
+      );
+    }
+  },
+  {
+    title: 'Custom min/max track tint color',
+    platform: 'ios',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackTintColor={'red'}
+          maximumTrackTintColor={'green'}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom thumb image',
+    platform: 'ios',
+    render(): ReactElement {
+      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
+    }
+  },
+  {
+    title: 'Custom track image',
+    platform: 'ios',
+    render(): ReactElement {
+      return <SliderExample trackImage={require('./slider.png')} />;
+    }
+  },
+  {
+    title: 'Custom min/max track image',
+    platform: 'ios',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackImage={require('./slider-left.png')}
+          maximumTrackImage={require('./slider-right.png')}
+        />
+      );
+    }
+  },
+];

Examples/UIExplorer/StatusBarExample.js

@@ -17,26 +17,13 @@
 
 const React = require('react-native');
 const {
+  StatusBar,
   StyleSheet,
-  View,
   Text,
   TouchableHighlight,
-  StatusBar,
+  View,
 } = React;
 
-type BarStyle = 'default' | 'light-content';
-type ShowHideTransition = 'fade' | 'slide';
-
-type State = {
-  animated: boolean,
-  backgroundColor: string,
-  hidden?: boolean,
-  showHideTransition: ShowHideTransition,
-  translucent?: boolean,
-  barStyle?: BarStyle,
-  networkActivityIndicatorVisible?: boolean
-};
-
 exports.framework = 'React';
 exports.title = '<StatusBar>';
 exports.description = 'Component for controlling the status bar';
@@ -57,242 +44,412 @@ const showHideTransitions = [
   'slide',
 ];
 
-function getValue(values: Array<any>, index: number): any {
+function getValue<T>(values: Array<T>, index: number): T {
   return values[index % values.length];
 }
 
-const StatusBarExample = React.createClass({
-  getInitialState(): State {
+const StatusBarHiddenExample = React.createClass({
+  getInitialState() {
     return {
       animated: true,
-      backgroundColor: getValue(colors, 0),
+      hidden: false,
       showHideTransition: getValue(showHideTransitions, 0),
     };
   },
 
-  _colorIndex: 0,
-  _barStyleIndex: 0,
   _showHideTransitionIndex: 0,
 
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
+  _onChangeHidden() {
+    this.setState({hidden: !this.state.hidden});
+  },
+
+  _onChangeTransition() {
+    this._showHideTransitionIndex++;
+    this.setState({
+      showHideTransition: getValue(showHideTransitions, this._showHideTransitionIndex),
+    });
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          hidden={this.state.hidden}
+          showHideTransition={this.state.showHideTransition}
+          animated={this.state.animated}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeHidden}>
+          <View style={styles.button}>
+            <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated (ios only): {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeTransition}>
+          <View style={styles.button}>
+            <Text>
+              showHideTransition (ios only):
+              '{getValue(showHideTransitions, this._showHideTransitionIndex)}'
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarStyleExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      barStyle: getValue(barStyles, this._barStyleIndex),
+    };
+  },
+
+  _barStyleIndex: 0,
+
+  _onChangeBarStyle() {
+    this._barStyleIndex++;
+    this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
+  },
+
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          animated={this.state.animated}
+          barStyle={this.state.barStyle}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeBarStyle}>
+          <View style={styles.button}>
+            <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarNetworkActivityExample = React.createClass({
+  getInitialState() {
+    return {
+      networkActivityIndicatorVisible: false,
+    };
+  },
+
+  _onChangeNetworkIndicatorVisible() {
+    this.setState({
+      networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
+    });
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeNetworkIndicatorVisible}>
+          <View style={styles.button}>
+            <Text>
+              networkActivityIndicatorVisible:
+              {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarBackgroundColorExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      backgroundColor: getValue(colors, 0),
+    };
+  },
+
+  _colorIndex: 0,
+
+  _onChangeBackgroundColor() {
+    this._colorIndex++;
+    this.setState({backgroundColor: getValue(colors, this._colorIndex)});
+  },
+
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
   render() {
     return (
       <View>
         <StatusBar
           backgroundColor={this.state.backgroundColor}
-          translucent={this.state.translucent}
-          hidden={this.state.hidden}
-          showHideTransition={this.state.showHideTransition}
           animated={this.state.animated}
-          barStyle={this.state.barStyle}
-          networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
         />
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({animated: !this.state.animated})}>
-            <View style={styles.button}>
-              <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({hidden: !this.state.hidden})}>
-            <View style={styles.button}>
-              <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>iOS</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._barStyleIndex++;
-              this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
-            }}>
-            <View style={styles.button}>
-              <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({
-              networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
-            })}>
-            <View style={styles.button}>
-              <Text>
-                networkActivityIndicatorVisible:
-                {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._showHideTransitionIndex++;
-              this.setState({
-                showHideTransition:
-                getValue(showHideTransitions, this._showHideTransitionIndex),
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>
-                showHideTransition:
-                '{getValue(showHideTransitions, this._showHideTransitionIndex)}'
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>Android</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._colorIndex++;
-              this.setState({backgroundColor: getValue(colors, this._colorIndex)});
-            }}>
-            <View style={styles.button}>
-              <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this.setState({
-                translucent: !this.state.translucent,
-                backgroundColor: !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black',
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeBackgroundColor}>
+          <View style={styles.button}>
+            <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
       </View>
     );
   },
 });
 
-const StatusBarStaticExample = React.createClass({
-  _colorIndex: 0,
-  _barStyleIndex: 0,
-  _showHideTransitionIndex: 0,
 
+const StatusBarTranslucentExample = React.createClass({
   getInitialState() {
     return {
-      backgroundColor: getValue(colors, 0),
-      barStyle: getValue(barStyles, 0),
-      hidden: false,
-      networkActivityIndicatorVisible: false,
       translucent: false,
     };
   },
 
+  _onChangeTranslucent() {
+    this.setState({
+      translucent: !this.state.translucent,
+    });
+  },
+
   render() {
     return (
       <View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const hidden = !this.state.hidden;
-              StatusBar.setHidden(hidden, 'slide');
-              this.setState({hidden});
-            }}>
-            <View style={styles.button}>
-              <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>iOS</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._barStyleIndex++;
-              const barStyle = getValue(barStyles, this._barStyleIndex);
-              StatusBar.setBarStyle(barStyle, true);
-              this.setState({barStyle});
-            }}>
-            <View style={styles.button}>
-              <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const networkActivityIndicatorVisible = !this.state.networkActivityIndicatorVisible;
-              StatusBar.setNetworkActivityIndicatorVisible(networkActivityIndicatorVisible);
-              this.setState({networkActivityIndicatorVisible});
-            }}>
-            <View style={styles.button}>
-              <Text>
-                networkActivityIndicatorVisible:
-                {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>Android</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._colorIndex++;
-              const backgroundColor = getValue(colors, this._colorIndex);
-              StatusBar.setBackgroundColor(backgroundColor, true);
-              this.setState({backgroundColor});
-            }}>
-            <View style={styles.button}>
-              <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const translucent = !this.state.translucent;
-              const backgroundColor = !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black';
-              StatusBar.setTranslucent(translucent);
-              StatusBar.setBackgroundColor(backgroundColor, true);
-              this.setState({
-                translucent,
-                backgroundColor,
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
+        <StatusBar
+          translucent={this.state.translucent}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeTranslucent}>
+          <View style={styles.button}>
+            <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
       </View>
     );
   },
 });
 
-exports.examples = [{
-  title: 'StatusBar',
+const StatusBarStaticIOSExample = React.createClass({
   render() {
-    return <StatusBarExample />;
+    return (
+      <View>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(true, 'slide');
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(true, 'slide')</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(false, 'fade');
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(false, 'fade')</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBarStyle('default', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBarStyle('default', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBarStyle('light-content', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBarStyle('light-content', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setNetworkActivityIndicatorVisible(true);
+          }}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setNetworkActivityIndicatorVisible(false);
+          }}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(false)</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
   },
+});
+
+const StatusBarStaticAndroidExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(true);
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(false);
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(false)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBackgroundColor('#ff00ff', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBackgroundColor('#ff00ff', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBackgroundColor('#00ff00', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBackgroundColor('#00ff00', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setTranslucent(true);
+            StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.4)', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setTranslucent(true) and setBackgroundColor('rgba(0, 0, 0, 0.4)', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setTranslucent(false);
+            StatusBar.setBackgroundColor('black', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setTranslucent(false) and setBackgroundColor('black', true)</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const examples = [{
+  title: 'StatusBar hidden',
+  render() {
+    return <StatusBarHiddenExample />;
+  },
+}, {
+  title: 'StatusBar style',
+  render() {
+    return <StatusBarStyleExample />;
+  },
+  platform: 'ios',
+}, {
+  title: 'StatusBar network activity indicator',
+  render() {
+    return <StatusBarNetworkActivityExample />;
+  },
+  platform: 'ios',
+}, {
+  title: 'StatusBar background color',
+  render() {
+    return <StatusBarBackgroundColorExample />;
+  },
+  platform: 'android',
+}, {
+  title: 'StatusBar background color',
+  render() {
+    return <StatusBarTranslucentExample />;
+  },
+  platform: 'android',
 }, {
   title: 'StatusBar static API',
   render() {
-    return <StatusBarStaticExample />;
+    return <StatusBarStaticIOSExample />;
   },
+  platform: 'ios',
+}, {
+  title: 'StatusBar static API',
+  render() {
+    return <StatusBarStaticAndroidExample />;
+  },
+  platform: 'android',
+}, {
+  title: 'StatusBar dimensions',
+  render() {
+    return (
+      <View>
+        <Text>Height: {StatusBar.currentHeight} pts</Text>
+      </View>
+    );
+  },
+  platform: 'android',
 }];
 
+exports.examples = examples;
+
 var styles = StyleSheet.create({
   wrapper: {
     borderRadius: 5,

Examples/UIExplorer/TextInputExample.android.js

@@ -410,11 +410,19 @@ exports.examples = [
     title: 'Passwords',
     render: function() {
       return (
-        <TextInput
-          defaultValue="iloveturtles"
-          password={true}
-          style={styles.singleLine}
-        />
+        <View>
+          <TextInput
+            defaultValue="iloveturtles"
+            secureTextEntry={true}
+            style={styles.singleLine}
+          />
+          <TextInput 
+            secureTextEntry={true}
+            style={[styles.singleLine, {color: 'red'}]}
+            placeholder="color is supported too"
+            placeholderTextColor="red"
+          />
+        </View>
       );
     }
   },

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -29,6 +29,7 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		13B6C1A31C34225900D3FAF5 /* RCTURLUtilsTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */; };
+		13BCE84F1C9C209600DD7AAD /* RCTComponentPropsTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13BCE84E1C9C209600DD7AAD /* RCTComponentPropsTests.m */; };
 		13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DB03471B5D2ED500C27245 /* RCTJSONTests.m */; };
 		13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */; };
 		143BC5A11B21E45C00462512 /* UIExplorerSnapshotTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */; };
@@ -204,6 +205,7 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = UIExplorer/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = UIExplorer/main.m; sourceTree = "<group>"; };
 		13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTURLUtilsTests.m; sourceTree = "<group>"; };
+		13BCE84E1C9C209600DD7AAD /* RCTComponentPropsTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTComponentPropsTests.m; sourceTree = "<group>"; };
 		13CC9D481AEED2B90020D1C2 /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
 		13DB03471B5D2ED500C27245 /* RCTJSONTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTJSONTests.m; sourceTree = "<group>"; };
 		13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMethodArgumentTests.m; sourceTree = "<group>"; };
@@ -431,6 +433,7 @@
 				1393D0371B68CD1300E1B601 /* RCTModuleMethodTests.m */,
 				138D6A161B53CD440074A87E /* RCTShadowViewTests.m */,
 				1497CFAB1B21F5E400C1F8F2 /* RCTUIManagerTests.m */,
+				13BCE84E1C9C209600DD7AAD /* RCTComponentPropsTests.m */,
 				143BC57E1B21E18100462512 /* Info.plist */,
 				14D6D7101B220EB3001FB087 /* libOCMock.a */,
 				14D6D7011B220AE3001FB087 /* OCMock */,
@@ -883,6 +886,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				1497CFB01B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m in Sources */,
+				13BCE84F1C9C209600DD7AAD /* RCTComponentPropsTests.m in Sources */,
 				144D21241B2204C5006DB32B /* RCTImageUtilTests.m in Sources */,
 				1393D0381B68CD1300E1B601 /* RCTModuleMethodTests.m in Sources */,
 				1300627F1B59179B0043FE5A /* RCTGzipTests.m in Sources */,
@@ -1024,7 +1028,7 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited)";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = "-ObjC";
-				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.internal.uiexplorer.local;
+				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.react.uiapp;
 				PRODUCT_NAME = UIExplorer;
 				TARGETED_DEVICE_FAMILY = "1,2";
 				WARNING_CFLAGS = (
@@ -1050,7 +1054,7 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited)";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = "-ObjC";
-				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.internal.uiexplorer.local;
+				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.react.uiapp;
 				PRODUCT_NAME = UIExplorer;
 				TARGETED_DEVICE_FAMILY = "1,2";
 				WARNING_CFLAGS = (

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -24,15 +24,22 @@
 @end
 
 @implementation AppDelegate
-
 - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
   _bridge = [[RCTBridge alloc] initWithDelegate:self
                                   launchOptions:launchOptions];
-
+  
+  // Appetizer.io params check
+  NSDictionary *initProps = nil;
+  NSString *_routeUri = [[NSUserDefaults standardUserDefaults] stringForKey:@"route"];
+  if (_routeUri) {
+    initProps = @{@"exampleFromAppetizeParams":
+                    [NSString stringWithFormat:@"rnuiexplorer://example/%@Example", _routeUri]};
+  }
+  
   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge
                                                    moduleName:@"UIExplorerApp"
-                                            initialProperties:nil];
+                                            initialProperties:initProps];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [UIViewController new];

Examples/UIExplorer/UIExplorerApp.android.js

@@ -31,19 +31,46 @@ const {
 const {
   RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
-const UIExplorerActions = require('./UIExplorerActions');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerList = require('./UIExplorerList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
 const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
+const URIActionMap = require('./URIActionMap');
 
 var DRAWER_WIDTH_LEFT = 56;
 
+type Props = {
+  exampleFromAppetizeParams: string,
+};
+
+type State = {
+  initialExampleUri: ?string,
+};
+
 class UIExplorerApp extends React.Component {
+  _handleOpenInitialExample: Function;
+  state: State;
+  constructor(props: Props) {
+    super(props);
+    this._handleOpenInitialExample = this._handleOpenInitialExample.bind(this);
+    this.state = {
+      initialExampleUri: props.exampleFromAppetizeParams,
+    };
+  }
+
   componentWillMount() {
     BackAndroid.addEventListener('hardwareBackPress', this._handleBackButtonPress.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);
+  }
+
   render() {
     return (
       <NavigationRootContainer
@@ -51,10 +78,21 @@ class UIExplorerApp extends React.Component {
         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) {
       return null;
@@ -71,7 +109,8 @@ class UIExplorerApp extends React.Component {
           this._overrideBackPressForDrawerLayout = false;
         }}
         ref={(drawer) => { this.drawer = drawer; }}
-        renderNavigationView={this._renderDrawerContent.bind(this, onNavigate)}>
+        renderNavigationView={this._renderDrawerContent.bind(this, onNavigate)}
+        statusBarBackgroundColor="#589c90">
         {this._renderNavigation(navigationState, onNavigate)}
       </DrawerLayoutAndroid>
     );
@@ -79,15 +118,17 @@ class UIExplorerApp extends React.Component {
 
   _renderDrawerContent(onNavigate) {
     return (
-      <UIExplorerExampleList
-        list={UIExplorerList}
-        displayTitleRow={true}
-        disableSearch={true}
-        onNavigate={(action) => {
-          this.drawer && this.drawer.closeDrawer();
-          onNavigate(action);
-        }}
-      />
+      <View style={styles.drawerContentWrapper}>
+        <UIExplorerExampleList
+          list={UIExplorerList}
+          displayTitleRow={true}
+          disableSearch={true}
+          onNavigate={(action) => {
+            this.drawer && this.drawer.closeDrawer();
+            onNavigate(action);
+          }}
+        />
+      </View>
     );
   }
 
@@ -113,9 +154,6 @@ class UIExplorerApp extends React.Component {
       const ExampleComponent = UIExplorerExampleList.makeRenderable(ExampleModule);
       return (
         <View style={styles.container}>
-          <StatusBar
-            backgroundColor="#589c90"
-          />
           <ToolbarAndroid
             logo={require('image!launcher_icon')}
             navIcon={require('image!ic_menu_black_24dp')}
@@ -131,9 +169,6 @@ class UIExplorerApp extends React.Component {
     }
     return (
       <View style={styles.container}>
-        <StatusBar
-          backgroundColor="#589c90"
-        />
         <ToolbarAndroid
           logo={require('image!launcher_icon')}
           navIcon={require('image!ic_menu_black_24dp')}
@@ -181,6 +216,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#E9EAED',
     height: 56,
   },
+  drawerContentWrapper: {
+    paddingTop: StatusBar.currentHeight,
+    backgroundColor: 'white',
+  },
 });
 
 AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);

Examples/UIExplorer/UIExplorerApp.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.
  *
@@ -17,65 +24,39 @@
 'use strict';
 
 const React = require('react-native');
-const UIExplorerActions = require('./UIExplorerActions');
 const UIExplorerList = require('./UIExplorerList.ios');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
 const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
+const URIActionMap = require('./URIActionMap');
 
 const {
-  Alert,
-  Animated,
   AppRegistry,
   NavigationExperimental,
   SnapshotViewIOS,
   StyleSheet,
-  Text,
-  TouchableHighlight,
   View,
 } = React;
 
 const {
   CardStack: NavigationCardStack,
   Header: NavigationHeader,
-  Reducer: NavigationReducer,
   RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
-import type { Value } from 'Animated';
-
 import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
 
 import type { UIExplorerNavigationState } from './UIExplorerNavigationReducer';
 
 import type { UIExplorerExample } from './UIExplorerList.ios';
 
-function PathActionMap(path: string): ?Object {
-  // Warning! Hacky parsing for example code. Use a library for this!
-  const exampleParts = path.split('/example/');
-  const exampleKey = exampleParts[1];
-  if (exampleKey) {
-    if (!UIExplorerList.Modules[exampleKey]) {
-      Alert.alert(`${exampleKey} example could not be found!`);
-      return null;
-    }
-    return UIExplorerActions.ExampleAction(exampleKey);
-  }
-  return null;
-}
+type Props = {
+  exampleFromAppetizeParams: string,
+};
 
-function URIActionMap(uri: ?string): ?Object {
-  // Warning! Hacky parsing for example code. Use a library for this!
-  if (!uri) {
-    return null;
-  }
-  const parts = uri.split('rnuiexplorer:/');
-  if (!parts[1]) {
-    return null;
-  }
-  const path = parts[1];
-  return PathActionMap(path);
-}
+type State = {
+  initialExampleUri: ?string,
+};
 
 class UIExplorerApp extends React.Component {
   _navigationRootRef: ?NavigationRootContainer;
@@ -83,10 +64,29 @@ class UIExplorerApp extends React.Component {
   _renderOverlay: Function;
   _renderScene: Function;
   _renderCard: Function;
+  _renderTitleComponent: Function;
+  _handleOpenInitialExample: 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._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);
   }
   render() {
     return (
@@ -99,6 +99,15 @@ class UIExplorerApp extends React.Component {
       />
     );
   }
+  _handleOpenInitialExample() {
+    if (this.state.initialExampleUri) {
+      const exampleAction = URIActionMap(this.state.initialExampleUri);
+      if (exampleAction && this._navigationRootRef) {
+        this._navigationRootRef.handleNavigation(exampleAction);
+      }
+    }
+    this.setState({initialExampleUri: null});
+  }
   _renderNavigation(navigationState: UIExplorerNavigationState, onNavigate: Function) {
     if (!navigationState) {
       return null;
@@ -128,12 +137,19 @@ class UIExplorerApp extends React.Component {
     return (
       <NavigationHeader
         {...props}
-        key={'header_' + props.scene.navigationState.key}
-        getTitle={UIExplorerStateTitleMap}
+        renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
+  _renderTitleComponent(props: NavigationSceneRendererProps): ReactElement {
+    return (
+      <NavigationHeader.Title>
+        {UIExplorerStateTitleMap(props.scene.navigationState)}
+      </NavigationHeader.Title>
+    );
+  }
+
   _renderScene(props: NavigationSceneRendererProps): ?ReactElement {
     const state = props.scene.navigationState;
     if (state.key === 'AppList') {
@@ -165,7 +181,7 @@ const styles = StyleSheet.create({
   },
   exampleContainer: {
     flex: 1,
-    paddingTop: 60,
+    paddingTop: NavigationHeader.HEIGHT,
   },
 });
 

Examples/UIExplorer/UIExplorerExampleList.js

@@ -157,7 +157,7 @@ class UIExplorerExampleList extends React.Component {
   }
 }
 
-function makeRenderable(example: any): ReactClass<any, any, any> {
+function makeRenderable(example: any): ReactClass<any> {
   return example.examples ?
     createExamplePage(null, example) :
     example;

Examples/UIExplorer/UIExplorerList.android.js

@@ -15,12 +15,18 @@
  */
 'use strict';
 
+const React = require('react-native');
+
 export type UIExplorerExample = {
   key: string;
   module: React.Component;
 };
 
 var ComponentExamples: Array<UIExplorerExample> = [
+  {
+    key: 'SliderExample',
+    module: require('./SliderExample'),
+  },
   {
     key: 'ImageExample',
     module: require('./ImageExample'),
@@ -29,6 +35,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'ListViewExample',
     module: require('./ListViewExample'),
   },
+  {
+    key: 'ModalExample',
+    module: require('./ModalExample'),
+  },
   {
     key: 'PickerAndroidExample',
     module: require('./PickerAndroidExample'),

Examples/UIExplorer/UIExplorerList.ios.js

@@ -50,8 +50,8 @@ var ComponentExamples: Array<UIExplorerExample> = [
     module: require('./ListViewPagingExample'),
   },
   {
-    key: 'MapViewExample',
-    module: require('./MapViewExample'),
+     key: 'MapViewExample',
+     module: require('./MapViewExample'),
   },
   {
     key: 'ModalExample',
@@ -90,8 +90,8 @@ var ComponentExamples: Array<UIExplorerExample> = [
     module: require('./SegmentedControlIOSExample'),
   },
   {
-    key: 'SliderIOSExample',
-    module: require('./SliderIOSExample'),
+    key: 'SliderExample',
+    module: require('./SliderExample'),
   },
   {
     key: 'StatusBarExample',

Examples/UIExplorer/UIExplorerNavigationReducer.js

@@ -36,8 +36,12 @@ export type UIExplorerNavigationState = {
 };
 
 const UIExplorerStackReducer = StackReducer({
-  getPushedReducerForAction: (action) => {
+  getPushedReducerForAction: (action, lastState) => {
     if (action.type === 'UIExplorerExampleAction' && UIExplorerList.Modules[action.openExample]) {
+      if (lastState.children.find(child => child.key === action.openExample)) {
+        // The example is already open, we should avoid pushing examples twice
+        return null;
+      }
       return (state) => state || {key: action.openExample};
     }
     return null;

Examples/UIExplorer/UIExplorerPage.js

@@ -37,9 +37,9 @@ var UIExplorerPage = React.createClass({
     var ContentWrapper;
     var wrapperProps = {};
     if (this.props.noScroll) {
-      ContentWrapper = (View: ReactClass<any, any, any>);
+      ContentWrapper = (View: ReactClass<any>);
     } else {
-      ContentWrapper = (ScrollView: ReactClass<any, any, any>);
+      ContentWrapper = (ScrollView: ReactClass<any>);
       wrapperProps.automaticallyAdjustContentInsets = !this.props.title;
       wrapperProps.keyboardShouldPersistTaps = true;
       wrapperProps.keyboardDismissMode = 'interactive';

Examples/UIExplorer/UIExplorerUnitTests/RCTBridgeTests.m

@@ -107,12 +107,36 @@ RCT_EXPORT_MODULE()
 
 @end
 
+// Define a module that is not explicitly registered with RCT_EXPORT_MODULE
+@interface UnregisteredTestModule : NSObject <RCTBridgeModule>
+
+@property (nonatomic, assign) BOOL testMethodCalled;
+
+@end
+
+@implementation UnregisteredTestModule
+
+@synthesize methodQueue = _methodQueue;
+
++ (NSString *)moduleName
+{
+  return @"UnregisteredTestModule";
+}
+
+RCT_EXPORT_METHOD(testMethod)
+{
+  _testMethodCalled = YES;
+}
+
+@end
+
 @interface RCTBridgeTests : XCTestCase <RCTBridgeModule>
 {
   RCTBridge *_bridge;
   __weak TestExecutor *_jsExecutor;
 
   BOOL _testMethodCalled;
+  UnregisteredTestModule *_unregisteredTestModule;
 }
 @end
 
@@ -126,8 +150,9 @@ RCT_EXPORT_MODULE(TestModule)
 {
   [super setUp];
 
+  _unregisteredTestModule = [UnregisteredTestModule new];
   _bridge = [[RCTBridge alloc] initWithBundleURL:nil
-                                  moduleProvider:^{ return @[self]; }
+                                  moduleProvider:^{ return @[self, _unregisteredTestModule]; }
                                    launchOptions:nil];
 
   _bridge.executorClass = [TestExecutor class];
@@ -211,6 +236,37 @@ RCT_EXPORT_MODULE(TestModule)
   });
 }
 
+- (void)testCallUnregisteredModuleMethod
+{
+  NSString *injectedStuff;
+  RUN_RUNLOOP_WHILE(!(injectedStuff = _jsExecutor.injectedStuff[@"__fbBatchedBridgeConfig"]));
+  XCTAssertNotNil(injectedStuff);
+  
+  __block NSNumber *testModuleID = nil;
+  __block NSNumber *testMethodID = nil;
+  
+  NSArray *remoteModuleConfig = RCTJSONParse(injectedStuff, NULL)[@"remoteModuleConfig"];
+  [remoteModuleConfig enumerateObjectsUsingBlock:^(id moduleConfig, NSUInteger i, __unused BOOL *stop) {
+    if ([moduleConfig isKindOfClass:[NSArray class]] && [moduleConfig[0] isEqualToString:@"UnregisteredTestModule"]) {
+      testModuleID = @(i);
+      testMethodID = @([moduleConfig[1] indexOfObject:@"testMethod"]);
+      *stop = YES;
+    }
+  }];
+  
+  XCTAssertNotNil(testModuleID);
+  XCTAssertNotNil(testMethodID);
+  
+  NSArray *args = @[];
+  NSArray *buffer = @[@[testModuleID], @[testMethodID], @[args]];
+  
+  [_bridge.batchedBridge handleBuffer:buffer];
+  
+  dispatch_sync(_unregisteredTestModule.methodQueue, ^{
+    XCTAssertTrue(_unregisteredTestModule.testMethodCalled);
+  });
+}
+
 - (void)DISABLED_testBadArgumentsCount
 {
   //NSArray *bufferWithMissingArgument = @[@[@1], @[@0], @[@[@1234, @5678, @"stringy", @{@"a": @1}/*, @42*/]], @[], @1234567];

Examples/UIExplorer/UIExplorerUnitTests/RCTComponentPropsTests.m

@@ -0,0 +1,181 @@
+/**
+ * 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.
+ */
+
+#import <XCTest/XCTest.h>
+
+#import "RCTUIManager.h"
+#import "RCTViewManager.h"
+#import "RCTView.h"
+
+#define RUN_RUNLOOP_WHILE(CONDITION) \
+{ \
+  NSDate *timeout = [NSDate dateWithTimeIntervalSinceNow:5]; \
+  while ((CONDITION)) { \
+    [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; \
+    if ([timeout timeIntervalSinceNow] <= 0) { \
+      XCTFail(@"Runloop timed out before condition was met"); \
+      break; \
+    } \
+  } \
+}
+
+@interface RCTUIManager ()
+
+- (void)createView:(NSNumber *)reactTag
+          viewName:(NSString *)viewName
+           rootTag:(NSNumber *)rootTag
+             props:(NSDictionary *)props;
+
+- (void)updateView:(nonnull NSNumber *)reactTag
+          viewName:(NSString *)viewName
+             props:(NSDictionary *)props;
+
+@end
+
+@interface RCTPropsTestView : UIView
+
+@property (nonatomic, assign) NSInteger integerProp;
+@property (nonatomic, strong) id objectProp;
+@property (nonatomic, assign) CGPoint structProp;
+@property (nonatomic, copy) NSString *customProp;
+
+@end
+
+@implementation RCTPropsTestView
+@end
+
+@interface RCTPropsTestViewManager : RCTViewManager
+@end
+
+@implementation RCTPropsTestViewManager
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  RCTPropsTestView *view = [RCTPropsTestView new];
+  view.integerProp = 57;
+  view.objectProp = @9;
+  view.structProp = CGPointMake(5, 6);
+  view.customProp = @"Hello";
+  return view;
+}
+
+RCT_EXPORT_VIEW_PROPERTY(integerProp, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(objectProp, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(structProp, CGPoint)
+RCT_CUSTOM_VIEW_PROPERTY(customProp, NSString, RCTPropsTestView)
+{
+  view.customProp = json ? [RCTConvert NSString:json] : defaultView.customProp;
+}
+
+@end
+
+@interface RCTComponentPropsTests : XCTestCase
+
+@end
+
+@implementation RCTComponentPropsTests
+{
+  RCTBridge *_bridge;
+}
+
+- (void)setUp
+{
+  [super setUp];
+
+  _bridge = [[RCTBridge alloc] initWithBundleURL:nil
+                                  moduleProvider:nil
+                                   launchOptions:nil];
+}
+
+- (void)testSetProps
+{
+  __block RCTPropsTestView *view;
+  RCTUIManager *uiManager = _bridge.uiManager;
+  NSDictionary *props = @{@"integerProp": @58,
+                          @"objectProp": @10,
+                          @"structProp": @{@"x": @7, @"y": @8},
+                          @"customProp": @"Goodbye"};
+
+  dispatch_async(uiManager.methodQueue, ^{
+    [uiManager createView:@2 viewName:@"RCTPropsTestView" rootTag:nil props:props];
+    [uiManager addUIBlock:^(__unused RCTUIManager *_uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+      view = (RCTPropsTestView *)viewRegistry[@2];
+      XCTAssertEqual(view.integerProp, 58);
+      XCTAssertEqualObjects(view.objectProp, @10);
+      XCTAssertTrue(CGPointEqualToPoint(view.structProp, CGPointMake(7, 8)));
+      XCTAssertEqualObjects(view.customProp, @"Goodbye");
+    }];
+    [uiManager setNeedsLayout];
+  });
+
+  RUN_RUNLOOP_WHILE(view == nil);
+}
+
+- (void)testResetProps
+{
+  __block RCTPropsTestView *view;
+  RCTUIManager *uiManager = _bridge.uiManager;
+  NSDictionary *props = @{@"integerProp": @58,
+                          @"objectProp": @10,
+                          @"structProp": @{@"x": @7, @"y": @8},
+                          @"customProp": @"Goodbye"};
+
+  NSDictionary *resetProps = @{@"integerProp": [NSNull null],
+                               @"objectProp": [NSNull null],
+                               @"structProp": [NSNull null],
+                               @"customProp": [NSNull null]};
+
+  dispatch_async(uiManager.methodQueue, ^{
+    [uiManager createView:@2 viewName:@"RCTPropsTestView" rootTag:nil props:props];
+    [uiManager updateView:@2 viewName:@"RCTPropsTestView" props:resetProps];
+    [uiManager addUIBlock:^(__unused RCTUIManager *_uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+      view = (RCTPropsTestView *)viewRegistry[@2];
+      XCTAssertEqual(view.integerProp, 57);
+      XCTAssertEqualObjects(view.objectProp, @9);
+      XCTAssertTrue(CGPointEqualToPoint(view.structProp, CGPointMake(5, 6)));
+      XCTAssertEqualObjects(view.customProp, @"Hello");
+    }];
+    [uiManager setNeedsLayout];
+  });
+
+  RUN_RUNLOOP_WHILE(view == nil);
+}
+
+- (void)testResetBackgroundColor
+{
+  __block RCTView *view;
+  RCTUIManager *uiManager = _bridge.uiManager;
+  NSDictionary *props = @{@"backgroundColor": @0xffffffff};
+  NSDictionary *resetProps = @{@"backgroundColor": [NSNull null]};
+
+  dispatch_async(uiManager.methodQueue, ^{
+    [uiManager createView:@2 viewName:@"RCTView" rootTag:nil props:props];
+    [uiManager addUIBlock:^(__unused RCTUIManager *_uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+      view = (RCTView *)viewRegistry[@2];
+      XCTAssertEqualObjects(view.backgroundColor, [RCTConvert UIColor:@0xffffffff]);
+    }];
+    [uiManager updateView:@2 viewName:@"RCTView" props:resetProps];
+    [uiManager addUIBlock:^(__unused RCTUIManager *_uiManager, __unused NSDictionary<NSNumber *,UIView *> *viewRegistry) {
+      view = (RCTView *)viewRegistry[@2];
+      XCTAssertNil(view.backgroundColor);
+    }];
+    [uiManager setNeedsLayout];
+  });
+
+  RUN_RUNLOOP_WHILE(view == nil);
+}
+
+@end

Examples/UIExplorer/UIExplorerUnitTests/RCTEventDispatcherTests.m

@@ -17,6 +17,7 @@
 
 #import <OCMock/OCMock.h>
 #import "RCTEventDispatcher.h"
+#import "RCTBridge+Private.h"
 
 @interface RCTTestEvent : NSObject  <RCTEvent>
 @property (atomic, assign, readwrite) BOOL canCoalesce;
@@ -29,14 +30,19 @@
 
 @synthesize viewTag = _viewTag;
 @synthesize eventName = _eventName;
+@synthesize coalescingKey = _coalescingKey;
 
-- (instancetype)initWithViewTag:(NSNumber *)viewTag eventName:(NSString *)eventName body:(NSDictionary<NSString *, id> *)body
+- (instancetype)initWithViewTag:(NSNumber *)viewTag
+                      eventName:(NSString *)eventName
+                           body:(NSDictionary<NSString *, id> *)body
+                  coalescingKey:(uint16_t)coalescingKey
 {
   if (self = [super init]) {
     _viewTag = viewTag;
     _eventName = eventName;
     _body = body;
     _canCoalesce = YES;
+    _coalescingKey = coalescingKey;
   }
   return self;
 }
@@ -77,7 +83,8 @@
 {
   [super setUp];
 
-  _bridge = [OCMockObject mockForClass:[RCTBridge class]];
+  _bridge = [OCMockObject mockForClass:[RCTBatchedBridge class]];
+
   _eventDispatcher = [RCTEventDispatcher new];
   [_eventDispatcher setValue:_bridge forKey:@"bridge"];
 
@@ -85,7 +92,8 @@
   _body = @{ @"foo": @"bar" };
   _testEvent = [[RCTTestEvent alloc] initWithViewTag:nil
                                            eventName:_eventName
-                                                body:_body];
+                                                body:_body
+                                       coalescingKey:0];
 
   _JSMethod = [[_testEvent class] moduleDotMethod];
 }
@@ -100,59 +108,79 @@
   [_bridge verify];
 }
 
-- (void)testNonCoalescingEventsAreImmediatelyDispatched
+- (void)testNonCoalescingEventIsImmediatelyDispatched
 {
   _testEvent.canCoalesce = NO;
-  [[_bridge expect] enqueueJSCall:_JSMethod
-                             args:[_testEvent arguments]];
+
+  [[_bridge expect] dispatchBlock:OCMOCK_ANY queue:RCTJSThread];
 
   [_eventDispatcher sendEvent:_testEvent];
 
   [_bridge verify];
 }
 
-- (void)testCoalescedEventShouldBeDispatchedOnFrameUpdate
+- (void)testCoalescingEventIsImmediatelyDispatched
 {
+  _testEvent.canCoalesce = YES;
+
+  [[_bridge expect] dispatchBlock:OCMOCK_ANY queue:RCTJSThread];
+
+  [_eventDispatcher sendEvent:_testEvent];
+
+  [_bridge verify];
+}
+
+- (void)testMultipleEventsResultInOnlyOneDispatchAfterTheFirstOne
+{
+  [[_bridge expect] dispatchBlock:OCMOCK_ANY queue:RCTJSThread];
+  [_eventDispatcher sendEvent:_testEvent];
+  [_eventDispatcher sendEvent:_testEvent];
+  [_eventDispatcher sendEvent:_testEvent];
+  [_eventDispatcher sendEvent:_testEvent];
   [_eventDispatcher sendEvent:_testEvent];
   [_bridge verify];
+}
+
+- (void)testRunningTheDispatchedBlockResultInANewOneBeingEnqueued
+{
+  __block dispatch_block_t eventsEmittingBlock;
+  [[_bridge expect] dispatchBlock:[OCMArg checkWithBlock:^(dispatch_block_t block) {
+    eventsEmittingBlock = block;
+    return YES;
+  }] queue:RCTJSThread];
+  [_eventDispatcher sendEvent:_testEvent];
+  [_bridge verify];
+
+
+  // eventsEmittingBlock would be called when js is no longer busy, which will result in emitting events
   [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
                              args:[_testEvent arguments]];
-
-  [(id<RCTFrameUpdateObserver>)_eventDispatcher didUpdateFrame:nil];
-
+  eventsEmittingBlock();
   [_bridge verify];
-}
 
-- (void)testNonCoalescingEventForcesColescedEventsToBeImmediatelyDispatched
-{
-  RCTTestEvent *nonCoalescingEvent = [[RCTTestEvent alloc] initWithViewTag:nil
-                                                                 eventName:_eventName
-                                                                      body:@{}];
-  nonCoalescingEvent.canCoalesce = NO;
+
+  [[_bridge expect] dispatchBlock:OCMOCK_ANY queue:RCTJSThread];
   [_eventDispatcher sendEvent:_testEvent];
-
-  [[_bridge expect] enqueueJSCall:[[_testEvent class] moduleDotMethod]
-                             args:[_testEvent arguments]];
-  [[_bridge expect] enqueueJSCall:[[nonCoalescingEvent class] moduleDotMethod]
-                             args:[nonCoalescingEvent arguments]];
-
-  [_eventDispatcher sendEvent:nonCoalescingEvent];
   [_bridge verify];
 }
 
 - (void)testBasicCoalescingReturnsLastEvent
 {
-  RCTTestEvent *ignoredEvent = [[RCTTestEvent alloc] initWithViewTag:nil
-                                                           eventName:_eventName
-                                                                body:@{ @"other": @"body" }];
-
-  [_eventDispatcher sendEvent:ignoredEvent];
-  [_eventDispatcher sendEvent:_testEvent];
-
+  __block dispatch_block_t eventsEmittingBlock;
+  [[_bridge expect] dispatchBlock:[OCMArg checkWithBlock:^(dispatch_block_t block) {
+    eventsEmittingBlock = block;
+    return YES;
+  }] queue:RCTJSThread];
   [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
                              args:[_testEvent arguments]];
 
-  [(id<RCTFrameUpdateObserver>)_eventDispatcher didUpdateFrame:nil];
+  RCTTestEvent *ignoredEvent = [[RCTTestEvent alloc] initWithViewTag:nil
+                                                           eventName:_eventName
+                                                                body:@{ @"other": @"body" }
+                                                       coalescingKey:0];
+  [_eventDispatcher sendEvent:ignoredEvent];
+  [_eventDispatcher sendEvent:_testEvent];
+  eventsEmittingBlock();
 
   [_bridge verify];
 }
@@ -161,19 +189,60 @@
 {
   NSString *firstEventName = RCTNormalizeInputEventName(@"firstEvent");
   RCTTestEvent *firstEvent = [[RCTTestEvent alloc] initWithViewTag:nil
-                                                           eventName:firstEventName
-                                                                body:_body];
-
-  [_eventDispatcher sendEvent:firstEvent];
-  [_eventDispatcher sendEvent:_testEvent];
+                                                         eventName:firstEventName
+                                                              body:_body
+                                                     coalescingKey:0];
 
+  __block dispatch_block_t eventsEmittingBlock;
+  [[_bridge expect] dispatchBlock:[OCMArg checkWithBlock:^(dispatch_block_t block) {
+    eventsEmittingBlock = block;
+    return YES;
+  }] queue:RCTJSThread];
   [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
                              args:[firstEvent arguments]];
-
   [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
                              args:[_testEvent arguments]];
 
-  [(id<RCTFrameUpdateObserver>)_eventDispatcher didUpdateFrame:nil];
+
+  [_eventDispatcher sendEvent:firstEvent];
+  [_eventDispatcher sendEvent:_testEvent];
+  eventsEmittingBlock();
+
+  [_bridge verify];
+}
+
+- (void)testSameEventTypesWithDifferentCoalesceKeysDontCoalesce
+{
+  NSString *eventName = RCTNormalizeInputEventName(@"firstEvent");
+  RCTTestEvent *firstEvent = [[RCTTestEvent alloc] initWithViewTag:nil
+                                                         eventName:eventName
+                                                              body:_body
+                                                     coalescingKey:0];
+  RCTTestEvent *secondEvent = [[RCTTestEvent alloc] initWithViewTag:nil
+                                                         eventName:eventName
+                                                              body:_body
+                                                     coalescingKey:1];
+
+  __block dispatch_block_t eventsEmittingBlock;
+  [[_bridge expect] dispatchBlock:[OCMArg checkWithBlock:^(dispatch_block_t block) {
+    eventsEmittingBlock = block;
+    return YES;
+  }] queue:RCTJSThread];
+  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
+                             args:[firstEvent arguments]];
+  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
+                             args:[secondEvent arguments]];
+
+
+  [_eventDispatcher sendEvent:firstEvent];
+  [_eventDispatcher sendEvent:secondEvent];
+  [_eventDispatcher sendEvent:firstEvent];
+  [_eventDispatcher sendEvent:secondEvent];
+  [_eventDispatcher sendEvent:secondEvent];
+  [_eventDispatcher sendEvent:firstEvent];
+  [_eventDispatcher sendEvent:firstEvent];
+
+  eventsEmittingBlock();
 
   [_bridge verify];
 }

Examples/UIExplorer/UIExplorerUnitTests/RCTShadowViewTests.m

@@ -15,9 +15,11 @@
 #import <XCTest/XCTest.h>
 
 #import "RCTShadowView.h"
+#import "RCTRootShadowView.h"
+
 
 @interface RCTShadowViewTests : XCTestCase
-@property (nonatomic, strong) RCTShadowView *parentView;
+@property (nonatomic, strong) RCTRootShadowView *parentView;
 @end
 
 @implementation RCTShadowViewTests
@@ -25,7 +27,7 @@
 - (void)setUp
 {
   [super setUp];
-  
+
   self.parentView = [self _shadowViewWithStyle:^(css_style_t *style) {
     style->flex_direction = CSS_FLEX_DIRECTION_COLUMN;
     style->dimensions[0] = 440;
@@ -90,7 +92,7 @@
   [self.parentView insertReactSubview:mainView atIndex:1];
   [self.parentView insertReactSubview:footerView atIndex:2];
 
-  [self.parentView collectRootUpdatedFrames];
+  [self.parentView collectViewsWithUpdatedFrames];
 
   XCTAssertTrue(CGRectEqualToRect([self.parentView measureLayoutRelativeToAncestor:self.parentView], CGRectMake(0, 0, 440, 440)));
   XCTAssertTrue(UIEdgeInsetsEqualToEdgeInsets([self.parentView paddingAsInsets], UIEdgeInsetsMake(10, 10, 10, 10)));
@@ -156,7 +158,7 @@
   RCTShadowView *view = [self _shadowViewWithStyle:styleBlock];
   [self.parentView insertReactSubview:view atIndex:0];
   view.intrinsicContentSize = contentSize;
-  [self.parentView collectRootUpdatedFrames];
+  [self.parentView collectViewsWithUpdatedFrames];
   CGRect actualRect = [view measureLayoutRelativeToAncestor:self.parentView];
   XCTAssertTrue(CGRectEqualToRect(expectedRect, actualRect),
                 @"Expected layout to be %@, got %@",
@@ -164,9 +166,9 @@
                 NSStringFromCGRect(actualRect));
 }
 
-- (RCTShadowView *)_shadowViewWithStyle:(void(^)(css_style_t *style))styleBlock
+- (RCTRootShadowView *)_shadowViewWithStyle:(void(^)(css_style_t *style))styleBlock
 {
-  RCTShadowView *shadowView = [RCTShadowView new];
+  RCTRootShadowView *shadowView = [RCTRootShadowView new];
 
   css_style_t style = shadowView.cssNode->style;
   styleBlock(&style);

Examples/UIExplorer/URIActionMap.js

@@ -0,0 +1,54 @@
+/**
+ * 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-native');
+const UIExplorerActions = require('./UIExplorerActions');
+// $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS?
+const UIExplorerList = require('./UIExplorerList');
+
+const {
+  Alert,
+} = React;
+
+function PathActionMap(path: string): ?Object {
+  // Warning! Hacky parsing for example code. Use a library for this!
+  const exampleParts = path.split('/example/');
+  const exampleKey = exampleParts[1];
+  if (exampleKey) {
+    if (!UIExplorerList.Modules[exampleKey]) {
+      Alert.alert(`${exampleKey} example could not be found!`);
+      return null;
+    }
+    return UIExplorerActions.ExampleAction(exampleKey);
+  }
+  return null;
+}
+
+function URIActionMap(uri: ?string): ?Object {
+  // Warning! Hacky parsing for example code. Use a library for this!
+  if (!uri) {
+    return null;
+  }
+  const parts = uri.split('rnuiexplorer:/');
+  if (!parts[1]) {
+    return null;
+  }
+  const path = parts[1];
+  return PathActionMap(path);
+}
+
+module.exports = URIActionMap;

Examples/UIExplorer/VibrationExample.js

@@ -27,20 +27,64 @@ var {
 exports.framework = 'React';
 exports.title = 'Vibration';
 exports.description = 'Vibration API';
-exports.examples = [{
-  title: 'Vibration.vibrate()',
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.wrapper}
-        onPress={() => Vibration.vibrate()}>
-        <View style={styles.button}>
-          <Text>Vibrate</Text>
-        </View>
-      </TouchableHighlight>
-    );
+exports.examples = [
+  {
+    title: 'Vibration.vibrate()',
+    render() {
+      return (
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => Vibration.vibrate()}>
+          <View style={styles.button}>
+            <Text>Vibrate</Text>
+          </View>
+        </TouchableHighlight>
+      );
+    },
   },
-}];
+  {
+    title: 'Vibration.vibrate([0, 500, 200, 500])',
+    render() {
+      return (
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => Vibration.vibrate([0, 500, 200, 500])}>
+          <View style={styles.button}>
+            <Text>Vibrate once</Text>
+          </View>
+        </TouchableHighlight>
+      );
+    },
+  },
+  {
+    title: 'Vibration.vibrate([0, 500, 200, 500], true)',
+    render() {
+      return (
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => Vibration.vibrate([0, 500, 200, 500], true)}>
+          <View style={styles.button}>
+            <Text>Vibrate until cancel</Text>
+          </View>
+        </TouchableHighlight>
+      );
+    },
+  },
+  {
+    title: 'Vibration.cancel()',
+    render() {
+      return (
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => Vibration.cancel()}>
+          <View style={styles.button}>
+            <Text>Cancel</Text>
+          </View>
+        </TouchableHighlight>
+      );
+    },
+  },
+];
 
 var styles = StyleSheet.create({
   wrapper: {

Examples/UIExplorer/XHRExample.ios.js

@@ -146,7 +146,8 @@ class FormUploader extends React.Component {
 
   _fetchRandomPhoto() {
     CameraRoll.getPhotos(
-      {first: PAGE_SIZE},
+      {first: PAGE_SIZE}
+    ).then(
       (data) => {
         if (!this._isMounted) {
           return;

Examples/UIExplorer/android/app/build.gradle

@@ -1,5 +1,87 @@
 apply plugin: 'com.android.application'
 
+import com.android.build.OutputFile
+
+/**
+ * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
+ * and bundleReleaseJsAndAssets).
+ * These basically call `react-native bundle` with the correct arguments during the Android build
+ * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
+ * bundle directly from the development server. Below you can see all the possible configurations
+ * and their defaults. If you decide to add a configuration block, make sure to add it before the
+ * `apply from: "react.gradle"` line.
+ *
+ * project.ext.react = [
+ *   // the name of the generated asset file containing your JS bundle
+ *   bundleAssetName: "index.android.bundle",
+ *
+ *   // the entry file for bundle generation
+ *   entryFile: "index.android.js",
+ *
+ *   // whether to bundle JS and assets in debug mode
+ *   bundleInDebug: false,
+ *
+ *   // whether to bundle JS and assets in release mode
+ *   bundleInRelease: true,
+ *
+ *   // whether to bundle JS and assets in another build variant (if configured).
+ *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
+ *   // The configuration property is in the format 'bundleIn${productFlavor}${buildType}'
+ *   // bundleInFreeDebug: true,
+ *   // bundleInPaidRelease: true,
+ *   // bundleInBeta: true,
+ *
+ *   // the root of your project, i.e. where "package.json" lives
+ *   root: "../../",
+ *
+ *   // where to put the JS bundle asset in debug mode
+ *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
+ *
+ *   // where to put the JS bundle asset in release mode
+ *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in debug mode
+ *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in release mode
+ *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
+ *
+ *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
+ *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
+ *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
+ *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
+ *   // for example, you might want to remove it from here.
+ *   inputExcludes: ["android/**", "ios/**"]
+ * ]
+ */
+
+project.ext.react = [
+    bundleAssetName: "UIExplorerApp.android.bundle",
+    entryFile: file("../../UIExplorerApp.android.js"),
+    root: "../../../../",
+    inputExcludes: ["android/**", "./**"]
+]
+
+apply from: "react.gradle"
+
+/**
+ * Set this to true to create three separate APKs instead of one:
+ *   - A universal APK that works on all devices
+ *   - An APK that only works on ARM devices
+ *   - An APK that only works on x86 devices
+ * The advantage is the size of the APK is reduced by about 4MB.
+ * Upload all the APKs to the Play Store and people will download
+ * the correct one based on the CPU architecture of their device.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Run Proguard to shrink the Java bytecode in release builds.
+ */
+def enableProguardInReleaseBuilds = false
+
 android {
     compileSdkVersion 23
     buildToolsVersion "23.0.1"
@@ -14,10 +96,40 @@ android {
             abiFilters "armeabi-v7a", "x86"
         }
     }
+    signingConfigs {
+        release {
+            storeFile file(MYAPP_RELEASE_STORE_FILE)
+            storePassword MYAPP_RELEASE_STORE_PASSWORD
+            keyAlias MYAPP_RELEASE_KEY_ALIAS
+            keyPassword MYAPP_RELEASE_KEY_PASSWORD
+        }
+    }
+    splits {
+        abi {
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false
+            reset()
+            include "armeabi-v7a", "x86"
+        }
+    }
     buildTypes {
         release {
-            minifyEnabled false
+            minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+            signingConfig signingConfigs.release
+        }
+    }
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
+            def versionCodes = ["armeabi-v7a":1, "x86":2]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+            }
         }
     }
 }

Examples/UIExplorer/android/app/gradle.properties

@@ -1 +1,5 @@
 android.useDeprecatedNdk=true
+MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
+MYAPP_RELEASE_KEY_ALIAS=my-key-alias
+MYAPP_RELEASE_STORE_PASSWORD=*****
+MYAPP_RELEASE_KEY_PASSWORD=*****

Examples/UIExplorer/android/app/react.gradle

@@ -0,0 +1,96 @@
+import org.apache.tools.ant.taskdefs.condition.Os
+
+def config = project.hasProperty("react") ? project.react : [];
+
+def bundleAssetName = config.bundleAssetName ?: "index.android.bundle"
+def entryFile = config.entryFile ?: "index.android.js"
+
+// because elvis operator
+def elvisFile(thing) {
+    return thing ? file(thing) : null;
+}
+
+def reactRoot = elvisFile(config.root) ?: file("../../")
+def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"]
+
+void runBefore(String dependentTaskName, Task task) {
+    Task dependentTask = tasks.findByPath(dependentTaskName);
+    if (dependentTask != null) {
+        dependentTask.dependsOn task
+    }
+}
+
+gradle.projectsEvaluated {
+    // Grab all build types and product flavors
+    def buildTypes = android.buildTypes.collect { type -> type.name }
+    def productFlavors = android.productFlavors.collect { flavor -> flavor.name }
+
+    // When no product flavors defined, use empty
+    if (!productFlavors) productFlavors.add('')
+
+    productFlavors.each { productFlavorName ->
+        buildTypes.each { buildTypeName ->
+            // Create variant and source names
+            def sourceName = "${buildTypeName}"
+            def targetName = "${sourceName.capitalize()}"
+            if (productFlavorName) {
+                sourceName = "${productFlavorName}${targetName}"
+            }
+
+            // React js bundle directories
+            def jsBundleDirConfigName = "jsBundleDir${targetName}"
+            def jsBundleDir = elvisFile(config."$jsBundleDirConfigName") ?:
+                    file("$buildDir/intermediates/assets/${sourceName}")
+
+            def resourcesDirConfigName = "jsBundleDir${targetName}"
+            def resourcesDir = elvisFile(config."${resourcesDirConfigName}") ?:
+                    file("$buildDir/intermediates/res/merged/${sourceName}")
+            def jsBundleFile = file("$jsBundleDir/$bundleAssetName")
+
+            // Bundle task name for variant
+            def bundleJsAndAssetsTaskName = "bundle${targetName}JsAndAssets"
+
+            def currentBundleTask = tasks.create(
+                    name: bundleJsAndAssetsTaskName,
+                    type: Exec) {
+                group = "react"
+                description = "bundle JS and assets for ${targetName}."
+
+                // Create dirs if they are not there (e.g. the "clean" task just ran)
+                doFirst {
+                    jsBundleDir.mkdirs()
+                    resourcesDir.mkdirs()
+                }
+
+                // Set up inputs and outputs so gradle can cache the result
+                inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
+                outputs.dir jsBundleDir
+                outputs.dir resourcesDir
+
+                // Set up the call to the react-native cli
+                workingDir reactRoot
+
+                // Set up dev mode
+                def devEnabled = !targetName.toLowerCase().contains("release")
+                if (Os.isFamily(Os.FAMILY_WINDOWS)) {
+                    commandLine "cmd", "/c", "node", "./local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}",
+                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
+                } else {
+                    commandLine "node", "./local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}",
+                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
+                }
+
+                enabled config."bundleIn${targetName}" ?: targetName.toLowerCase().contains("release")
+            }
+
+            // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process
+            currentBundleTask.dependsOn("merge${targetName}Resources")
+            currentBundleTask.dependsOn("merge${targetName}Assets")
+
+            runBefore("processArmeabi-v7a${targetName}Resources", currentBundleTask)
+            runBefore("processX86${targetName}Resources", currentBundleTask)
+            runBefore("processUniversal${targetName}Resources", currentBundleTask)
+            runBefore("process${targetName}Resources", currentBundleTask)
+        }
+    }
+}

Examples/UIExplorer/android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,13 @@
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW" />
+        <category android:name="android.intent.category.DEFAULT" />
+        <category android:name="android.intent.category.BROWSABLE" />
+        <!-- Accepts URIs that begin with "rnuiexplorer://example” -->
+        <data android:scheme="rnuiexplorer" android:host="example" />
+      </intent-filter>
     </activity>
     <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
   </application>

Examples/UIExplorer/android/app/src/main/java/UIExplorerActivity.java

@@ -23,7 +23,32 @@ import java.util.Arrays;
 import java.util.List;
 import javax.annotation.Nullable;
 
+import android.os.Bundle;
+
 public class UIExplorerActivity extends ReactActivity {
+  private final String PARAM_ROUTE = "route";
+  private Bundle mInitialProps = null;
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+      // Get remote param before calling super which uses it
+      Bundle bundle = getIntent().getExtras();
+      if (bundle != null && bundle.containsKey(PARAM_ROUTE)) {
+          String routeUri = new StringBuilder("rnuiexplorer://example/")
+            .append(bundle.getString(PARAM_ROUTE))
+            .append("Example")
+            .toString();
+          mInitialProps = new Bundle();
+          mInitialProps.putString("exampleFromAppetizeParams", routeUri);
+      }
+      super.onCreate(savedInstanceState);
+  }
+
+  @Override
+  protected Bundle getLaunchOptions() {
+      return mInitialProps;
+  }
+
   @Override
   protected String getMainComponentName() {
       return "UIExplorerApp";

Examples/UIExplorer/createExamplePage.js

@@ -29,7 +29,7 @@ var invariant = require('fbjs/lib/invariant');
 import type { Example, ExampleModule } from 'ExampleTypes';
 
 var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
-  : ReactClass<any, any, any> {
+  : ReactClass<any> {
   invariant(!!exampleModule.examples, 'The module must have examples');
 
   var ExamplePage = React.createClass({

Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -17,10 +17,20 @@ var invariant = require('fbjs/lib/invariant');
 var processColor = require('processColor');
 
 var ActionSheetIOS = {
+  /**
+   * Display an iOS action sheet. The `options` object must contain one or more
+   * of:
+   *
+   * - `options` (array of strings) - a list of button titles (required)
+   * - `cancelButtonIndex` (int) - index of cancel button in `options`
+   * - `destructiveButtonIndex` (int) - index of destructive button in `options`
+   * - `title` (string) - a title to show above the action sheet
+   * - `message` (string) - a message to show below the title
+   */
   showActionSheetWithOptions(options: Object, callback: Function) {
     invariant(
       typeof options === 'object' && options !== null,
-      'Options must a valid object'
+      'Options must be a valid object'
     );
     invariant(
       typeof callback === 'function',
@@ -50,7 +60,7 @@ var ActionSheetIOS = {
   ) {
     invariant(
       typeof options === 'object' && options !== null,
-      'Options must a valid object'
+      'Options must be a valid object'
     );
     invariant(
       typeof failureCallback === 'function',

Libraries/ActionSheetIOS/RCTActionSheetManager.m

@@ -61,6 +61,7 @@ RCT_EXPORT_METHOD(showActionSheetWithOptions:(NSDictionary *)options
   }
 
   NSString *title = [RCTConvert NSString:options[@"title"]];
+  NSString *message = [RCTConvert NSString:options[@"message"]];
   NSArray<NSString *> *buttons = [RCTConvert NSStringArray:options[@"options"]];
   NSInteger destructiveButtonIndex = options[@"destructiveButtonIndex"] ? [RCTConvert NSInteger:options[@"destructiveButtonIndex"]] : -1;
   NSInteger cancelButtonIndex = options[@"cancelButtonIndex"] ? [RCTConvert NSInteger:options[@"cancelButtonIndex"]] : -1;
@@ -113,7 +114,7 @@ RCT_EXPORT_METHOD(showActionSheetWithOptions:(NSDictionary *)options
   {
     UIAlertController *alertController =
     [UIAlertController alertControllerWithTitle:title
-                                        message:nil
+                                        message:message
                                  preferredStyle:UIAlertControllerStyleActionSheet];
 
     NSInteger index = 0;

Libraries/Animated/src/AnimatedImplementation.js

@@ -18,7 +18,9 @@ var React = require('React');
 var Set = require('Set');
 var SpringConfig = require('SpringConfig');
 var ViewStylePropTypes = require('ViewStylePropTypes');
+var NativeAnimatedHelper = require('NativeAnimatedHelper');
 
+var findNodeHandle = require('findNodeHandle');
 var flattenStyle = require('flattenStyle');
 var invariant = require('fbjs/lib/invariant');
 var requestAnimationFrame = require('fbjs/lib/requestAnimationFrame');
@@ -28,20 +30,50 @@ import type { InterpolationConfigType } from 'Interpolation';
 type EndResult = {finished: bool};
 type EndCallback = (result: EndResult) => void;
 
+var NativeAnimatedAPI = NativeAnimatedHelper.API;
+
 // Note(vjeux): this would be better as an interface but flow doesn't
 // support them yet
 class Animated {
   __attach(): void {}
-  __detach(): void {}
+  __detach(): void {
+    if (this.__isNative && this.__nativeTag != null) {
+      NativeAnimatedAPI.dropAnimatedNode(this.__nativeTag);
+      this.__nativeTag = undefined;
+    }
+  }
   __getValue(): any {}
   __getAnimatedValue(): any { return this.__getValue(); }
   __addChild(child: Animated) {}
   __removeChild(child: Animated) {}
   __getChildren(): Array<Animated> { return []; }
+
+  /* Methods and props used by native Animated impl */
+  __isNative: bool;
+  __nativeTag: ?number;
+  __makeNative() {
+    if (!this.__isNative) {
+      throw new Error('This node cannot be made a "native" animated node');
+    }
+  }
+  __getNativeTag(): number {
+    NativeAnimatedHelper.assertNativeAnimatedModule();
+    invariant(this.__isNative, 'Attempt to get native tag from node not marked as "native"');
+    if (this.__nativeTag == null) {
+      var nativeTag: number = NativeAnimatedHelper.generateNewNodeTag();
+      NativeAnimatedAPI.createAnimatedNode(nativeTag, this.__getNativeConfig());
+      this.__nativeTag = nativeTag;
+    }
+    return this.__nativeTag;
+  }
+  __getNativeConfig(): Object {
+    throw new Error('This JS animated node type cannot be used as native animated node');
+  }
 }
 
 type AnimationConfig = {
   isInteraction?: bool;
+  useNativeDriver?: bool;
 };
 
 // Important note: start() and stop() will only be called at most once.
@@ -50,20 +82,37 @@ type AnimationConfig = {
 class Animation {
   __active: bool;
   __isInteraction: bool;
+  __nativeTag: number;
   __onEnd: ?EndCallback;
   start(
     fromValue: number,
     onUpdate: (value: number) => void,
     onEnd: ?EndCallback,
     previousAnimation: ?Animation,
+    animatedValue: AnimatedValue
   ): void {}
   stop(): void {}
+  _getNativeAnimationConfig(): any {
+    // Subclasses that have corresponding animation implementation done in native
+    // should override this method
+    throw new Error('This animation type cannot be offloaded to native');
+  }
   // Helper function for subclasses to make sure onEnd is only called once.
-  __debouncedOnEnd(result: EndResult) {
+  __debouncedOnEnd(result: EndResult): void {
     var onEnd = this.__onEnd;
     this.__onEnd = null;
     onEnd && onEnd(result);
   }
+  __startNativeAnimation(animatedValue: AnimatedValue): void {
+    animatedValue.__makeNative();
+    this.__nativeTag = NativeAnimatedHelper.generateNewAnimationTag();
+    NativeAnimatedAPI.startAnimatingNode(
+      this.__nativeTag,
+      animatedValue.__getNativeTag(),
+      this._getNativeAnimationConfig(),
+      this.__debouncedOnEnd.bind(this)
+    );
+  }
 }
 
 class AnimatedWithChildren extends Animated {
@@ -74,11 +123,26 @@ class AnimatedWithChildren extends Animated {
     this._children = [];
   }
 
+  __makeNative() {
+    if (!this.__isNative) {
+      this.__isNative = true;
+      for (var child of this._children) {
+        child.__makeNative();
+        NativeAnimatedAPI.connectAnimatedNodes(this.__getNativeTag(), child.__getNativeTag());
+      }
+    }
+  }
+
   __addChild(child: Animated): void {
     if (this._children.length === 0) {
       this.__attach();
     }
     this._children.push(child);
+    if (this.__isNative) {
+      // Only accept "native" animated nodes as children
+      child.__makeNative();
+      NativeAnimatedAPI.connectAnimatedNodes(this.__getNativeTag(), child.__getNativeTag());
+    }
   }
 
   __removeChild(child: Animated): void {
@@ -87,6 +151,9 @@ class AnimatedWithChildren extends Animated {
       console.warn('Trying to remove a child that doesn\'t exist');
       return;
     }
+    if (this.__isNative && child.__isNative) {
+      NativeAnimatedAPI.disconnectAnimatedNodes(this.__getNativeTag(), child.__getNativeTag());
+    }
     this._children.splice(index, 1);
     if (this._children.length === 0) {
       this.__detach();
@@ -130,6 +197,7 @@ function _flush(rootNode: AnimatedValue): void {
     }
   }
   findAnimatedStyles(rootNode);
+  /* $FlowFixMe */
   animatedStyles.forEach(animatedStyle => animatedStyle.update());
 }
 
@@ -159,6 +227,7 @@ class TimingAnimation extends Animation {
   _onUpdate: (value: number) => void;
   _animationFrame: any;
   _timeout: any;
+  _useNativeDriver: bool;
 
   constructor(
     config: TimingAnimationConfigSingle,
@@ -169,12 +238,28 @@ class TimingAnimation extends Animation {
     this._duration = config.duration !== undefined ? config.duration : 500;
     this._delay = config.delay !== undefined ? config.delay : 0;
     this.__isInteraction = config.isInteraction !== undefined ? config.isInteraction : true;
+    this._useNativeDriver = !!config.useNativeDriver;
+  }
+
+  _getNativeAnimationConfig(): any {
+    var frameDuration = 1000.0 / 60.0;
+    var frames = [];
+    for (var dt = 0.0; dt <= this._duration; dt += frameDuration) {
+      frames.push(this._easing(dt / this._duration));
+    }
+    return {
+      type: 'frames',
+      frames,
+      toValue: this._toValue,
+    };
   }
 
   start(
     fromValue: number,
     onUpdate: (value: number) => void,
     onEnd: ?EndCallback,
+    previousAnimation: ?Animation,
+    animatedValue: AnimatedValue
   ): void {
     this.__active = true;
     this._fromValue = fromValue;
@@ -187,7 +272,11 @@ class TimingAnimation extends Animation {
         this.__debouncedOnEnd({finished: true});
       } else {
         this._startTime = Date.now();
-        this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
+        if (this._useNativeDriver) {
+          this.__startNativeAnimation(animatedValue);
+        } else {
+          this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
+        }
       }
     };
     if (this._delay) {
@@ -524,6 +613,7 @@ var _uniqueId = 1;
  */
 class AnimatedValue extends AnimatedWithChildren {
   _value: number;
+  _startingValue: number;
   _offset: number;
   _animation: ?Animation;
   _tracking: ?Animated;
@@ -531,7 +621,7 @@ class AnimatedValue extends AnimatedWithChildren {
 
   constructor(value: number) {
     super();
-    this._value = value;
+    this._startingValue = this._value = value;
     this._offset = 0;
     this._animation = null;
     this._listeners = {};
@@ -539,6 +629,7 @@ class AnimatedValue extends AnimatedWithChildren {
 
   __detach() {
     this.stopAnimation();
+    super.__detach();
   }
 
   __getValue(): number {
@@ -555,6 +646,9 @@ class AnimatedValue extends AnimatedWithChildren {
       this._animation = null;
     }
     this._updateValue(value);
+    if (this.__isNative) {
+      NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value);
+    }
   }
 
   /**
@@ -639,6 +733,7 @@ class AnimatedValue extends AnimatedWithChildren {
         callback && callback(result);
       },
       previousAnimation,
+      this
     );
   }
 
@@ -665,6 +760,13 @@ class AnimatedValue extends AnimatedWithChildren {
       this._listeners[key]({value: this.__getValue()});
     }
   }
+
+  __getNativeConfig(): Object {
+    return {
+      type: 'value',
+      value: this._startingValue,
+    };
+  }
 }
 
 type ValueXYListenerCallback = (value: {x: number; y: number}) => void;
@@ -1007,7 +1109,11 @@ class AnimatedStyle extends AnimatedWithChildren {
     for (var key in this._style) {
       var value = this._style[key];
       if (value instanceof Animated) {
-        style[key] = value.__getValue();
+        if (!value.__isNative) {
+          // We cannot use value of natively driven nodes this way as the value we have access from JS
+          // may not be up to date
+          style[key] = value.__getValue();
+        }
       } else {
         style[key] = value;
       }
@@ -1043,10 +1149,37 @@ class AnimatedStyle extends AnimatedWithChildren {
       }
     }
   }
+
+  __makeNative() {
+    super.__makeNative();
+    for (var key in this._style) {
+      var value = this._style[key];
+      if (value instanceof Animated) {
+        value.__makeNative();
+      }
+    }
+  }
+
+  __getNativeConfig(): Object {
+    var styleConfig = {};
+    for (let styleKey in this._style) {
+      if (this._style[styleKey] instanceof Animated) {
+        styleConfig[styleKey] = this._style[styleKey].__getNativeTag();
+      }
+      // Non-animated styles are set using `setNativeProps`, no need
+      // to pass those as a part of the node config
+    }
+    NativeAnimatedHelper.validateStyles(styleConfig);
+    return {
+      type: 'style',
+      style: styleConfig,
+    };
+  }
 }
 
 class AnimatedProps extends Animated {
   _props: Object;
+  _animatedView: any;
   _callback: () => void;
 
   constructor(
@@ -1070,7 +1203,11 @@ class AnimatedProps extends Animated {
     for (var key in this._props) {
       var value = this._props[key];
       if (value instanceof Animated) {
-        props[key] = value.__getValue();
+        if (!value.__isNative) {
+          // We cannot use value of natively driven nodes this way as the value we have access from JS
+          // may not be up to date
+          props[key] = value.__getValue();
+        }
       } else {
         props[key] = value;
       }
@@ -1099,17 +1236,73 @@ class AnimatedProps extends Animated {
   }
 
   __detach(): void {
+    if (this.__isNative && this._animatedView) {
+      this.__disconnectAnimatedView();
+    }
     for (var key in this._props) {
       var value = this._props[key];
       if (value instanceof Animated) {
         value.__removeChild(this);
       }
     }
+    super.__detach();
   }
 
   update(): void {
     this._callback();
   }
+
+  __makeNative(): void {
+    if (!this.__isNative) {
+      this.__isNative = true;
+      for (var key in this._props) {
+        var value = this._props[key];
+        if (value instanceof Animated) {
+          value.__makeNative();
+        }
+      }
+      if (this._animatedView) {
+        this.__connectAnimatedView();
+      }
+    }
+  }
+
+  setNativeView(animatedView: any): void {
+    invariant(this._animatedView === undefined, 'Animated view already set.');
+    this._animatedView = animatedView;
+    if (this.__isNative) {
+      this.__connectAnimatedView();
+    }
+  }
+
+  __connectAnimatedView(): void {
+    invariant(this.__isNative, 'Expected node to be marked as "native"');
+    var nativeViewTag: ?number = findNodeHandle(this._animatedView);
+    invariant(nativeViewTag != null, 'Unable to locate attached view in the native tree');
+    NativeAnimatedAPI.connectAnimatedNodeToView(this.__getNativeTag(), nativeViewTag);
+  }
+
+  __disconnectAnimatedView(): void {
+    invariant(this.__isNative, 'Expected node to be marked as "native"');
+    var nativeViewTag: ?number = findNodeHandle(this._animatedView);
+    invariant(nativeViewTag != null, 'Unable to locate attached view in the native tree');
+    NativeAnimatedAPI.disconnectAnimatedNodeFromView(this.__getNativeTag(), nativeViewTag);
+  }
+
+  __getNativeConfig(): Object {
+    var propsConfig = {};
+    for (let propKey in this._props) {
+      var value = this._props[propKey];
+      if (value instanceof Animated) {
+        propsConfig[propKey] = value.__getNativeTag();
+      }
+    }
+    NativeAnimatedHelper.validateProps(propsConfig);
+    return {
+      type: 'props',
+      props: propsConfig,
+    };
+  }
 }
 
 function createAnimatedComponent(Component: any): any {
@@ -1130,6 +1323,10 @@ function createAnimatedComponent(Component: any): any {
       this.attachProps(this.props);
     }
 
+    componentDidMount() {
+      this._propsAnimated.setNativeView(this.refs[refName]);
+    }
+
     attachProps(nextProps) {
       var oldPropsAnimated = this._propsAnimated;
 
@@ -1141,8 +1338,15 @@ function createAnimatedComponent(Component: any): any {
       // forceUpdate.
       var callback = () => {
         if (this.refs[refName].setNativeProps) {
-          var value = this._propsAnimated.__getAnimatedValue();
-          this.refs[refName].setNativeProps(value);
+          if (!this._propsAnimated.__isNative) {
+            this.refs[refName].setNativeProps(
+              this._propsAnimated.__getAnimatedValue()
+            );
+          } else {
+            throw new Error('Attempting to run JS driven animation on animated '
+              + 'node that has been moved to "native" earlier by starting an '
+              + 'animation with `useNativeDriver: true`');
+          }
         } else {
           this.forceUpdate();
         }
@@ -1153,6 +1357,11 @@ function createAnimatedComponent(Component: any): any {
         callback,
       );
 
+
+      if (this.refs && this.refs[refName]) {
+        this._propsAnimated.setNativeView(this.refs[refName]);
+      }
+
       // When you call detach, it removes the element from the parent list
       // of children. If it goes to 0, then the parent also detaches itself
       // and so on.
@@ -1231,6 +1440,7 @@ class AnimatedTracking extends Animated {
 
   __detach(): void {
     this._parent.__removeChild(this);
+    super.__detach();
   }
 
   update(): void {
@@ -1535,7 +1745,7 @@ var event = function(
  *    componentDidMount() {
  *      Animated.timing(          // Uses easing functions
  *        this.state.fadeAnim,    // The value to drive
- *        {toValue: 1},           // Configuration
+ *        {toValue: 1}            // Configuration
  *      ).start();                // Don't forget start!
  *    }
  *    render() {

Libraries/Animated/src/Easing.js

@@ -104,17 +104,9 @@ class Easing {
     x1: number,
     y1: number,
     x2: number,
-    y2: number,
-    epsilon?: ?number,
+    y2: number
   ): (t: number) => number {
-    if (epsilon === undefined) {
-      // epsilon determines the precision of the solved values
-      // a good approximation is:
-      var duration = 500; // duration of animation in milliseconds.
-      epsilon = (1000 / 60 / duration) / 4;
-    }
-
-    return _bezier(x1, y1, x2, y2, epsilon);
+    return _bezier(x1, y1, x2, y2);
   }
 
   static in(

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -0,0 +1,119 @@
+/**
+ * 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 NativeAnimatedHelper
+ * @flow
+ */
+'use strict';
+
+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 */
+
+type EndResult = {finished: bool};
+type EndCallback = (result: EndResult) => void;
+
+/**
+ * Simple wrappers around NativeANimatedModule to provide flow and autocmplete support for
+ * the native module methods
+ */
+var API = {
+  createAnimatedNode: function(tag: number, config: Object): void {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.createAnimatedNode(tag, config);
+  },
+  connectAnimatedNodes: function(parentTag: number, childTag: number): void {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.connectAnimatedNodes(parentTag, childTag);
+  },
+  disconnectAnimatedNodes: function(parentTag: number, childTag: number): void {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.disconnectAnimatedNodes(parentTag, childTag);
+  },
+  startAnimatingNode: function(animationTag: number, nodeTag: number, config: Object, endCallback: EndCallback) {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.startAnimatingNode(nodeTag, config, endCallback);
+  },
+  setAnimatedNodeValue: function(nodeTag: number, value: number): void {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.setAnimatedNodeValue(nodeTag, value);
+  },
+  connectAnimatedNodeToView: function(nodeTag: number, viewTag: number): void {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.connectAnimatedNodeToView(nodeTag, viewTag);
+  },
+  disconnectAnimatedNodeFromView: function(nodeTag: number, viewTag: number): void {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.disconnectAnimatedNodeFromView(nodeTag, viewTag);
+  },
+  dropAnimatedNode: function(tag: number): void {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.dropAnimatedNode(tag);
+  },
+};
+
+/**
+ * Properties allowed by the native animated implementation.
+ *
+ * In general native animated implementation should support any numeric property that doesn't need
+ * to be updated through the shadow view hierarchy (all non-layout properties). This list is limited
+ * to the properties that will perform best when animated off the JS thread.
+ */
+var PROPS_WHITELIST = {
+  style: {
+    opacity: true,
+
+    /* legacy android transform properties */
+    scaleX: true,
+    scaleY: true,
+    rotation: true,
+    translateX: true,
+    translateY: true,
+  },
+};
+
+function validateProps(params: Object): void {
+  for (var key in params) {
+    if (!PROPS_WHITELIST.hasOwnProperty(key)) {
+      throw new Error(`Property '${key}' is not supported by native animated module`);
+    }
+  }
+}
+
+function validateStyles(styles: Object): void {
+  var STYLES_WHITELIST = PROPS_WHITELIST.style || {};
+  for (var key in styles) {
+    if (!STYLES_WHITELIST.hasOwnProperty(key)) {
+      throw new Error(`Style property '${key}' is not supported by native animated module`);
+    }
+  }
+}
+
+function generateNewNodeTag(): number {
+  return __nativeAnimatedNodeTagCount++;
+}
+
+function generateNewAnimationTag(): number {
+  return __nativeAnimationTagCount++;
+}
+
+function assertNativeAnimatedModule(): void {
+  invariant(NativeAnimatedModule, 'Native animated module is not available');
+}
+
+module.exports = {
+  API,
+  validateProps,
+  validateStyles,
+  generateNewNodeTag,
+  generateNewAnimationTag,
+  assertNativeAnimatedModule,
+};

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

@@ -0,0 +1,96 @@
+/* eslint-disable */
+
+jest.dontMock('bezier');
+var bezier = require('bezier');
+
+var identity = function (x) { return x; };
+
+function assertClose (a, b, precision) {
+  expect(a).toBeCloseTo(b, 3);
+}
+
+function makeAssertCloseWithPrecision (precision) {
+  return function (a, b, message) {
+    assertClose(a, b, message, precision);
+  };
+}
+
+function allEquals (be1, be2, samples, assertion) {
+  if (!assertion) assertion = assertClose;
+  for (var i=0; i<=samples; ++i) {
+    var x = i / samples;
+    assertion(be1(x), be2(x), 'comparing '+be1+' and '+be2+' for value '+x);
+  }
+}
+
+function repeat (n) {
+  return function (f) {
+    for (var i=0; i<n; ++i) f(i);
+  };
+}
+
+describe('bezier', function(){
+  it('should be a function', function(){
+    expect(typeof bezier === 'function').toBe(true);
+  });
+  it('should creates an object', function(){
+    expect(typeof bezier(0, 0, 1, 1) === 'function').toBe(true);
+  });
+  it('should fail with wrong arguments', function () {
+    expect(function () { bezier(0.5, 0.5, -5, 0.5); }).toThrow();
+    expect(function () { bezier(0.5, 0.5, 5, 0.5); }).toThrow();
+    expect(function () { bezier(-2, 0.5, 0.5, 0.5); }).toThrow();
+    expect(function () { bezier(2, 0.5, 0.5, 0.5); }).toThrow();
+  });
+  describe('linear curves', function () {
+    it('should be linear', function () {
+      allEquals(bezier(0, 0, 1, 1), bezier(1, 1, 0, 0), 100);
+      allEquals(bezier(0, 0, 1, 1), identity, 100);
+    });
+  });
+  describe('common properties', function () {
+    it('should be the right value at extremes', function () {
+      repeat(10)(function () {
+        var a = Math.random(), b = 2*Math.random()-0.5, c = Math.random(), d = 2*Math.random()-0.5;
+        var easing = bezier(a, b, c, d);
+        expect(easing(0)).toBe(0);
+        expect(easing(1)).toBe(1);
+      });
+    });
+
+    it('should approach the projected value of its x=y projected curve', function () {
+      repeat(10)(function () {
+        var a = Math.random(), b = Math.random(), c = Math.random(), d = Math.random();
+        var easing = bezier(a, b, c, d);
+        var projected = bezier(b, a, d, c);
+        var composed = function (x) { return projected(easing(x)); };
+        allEquals(identity, composed, 100, makeAssertCloseWithPrecision(0.05));
+      });
+    });
+  });
+  describe('two same instances', function () {
+    it('should be strictly equals', function () {
+      repeat(10)(function () {
+        var a = Math.random(), b = 2*Math.random()-0.5, c = Math.random(), d = 2*Math.random()-0.5;
+        allEquals(bezier(a, b, c, d), bezier(a, b, c, d), 100, 0);
+      });
+    });
+  });
+  describe('symetric curves', function () {
+    it('should have a central value y~=0.5 at x=0.5', function () {
+      repeat(10)(function () {
+        var a = Math.random(), b = 2*Math.random()-0.5, c = 1-a, d = 1-b;
+        var easing = bezier(a, b, c, d);
+        assertClose(easing(0.5), 0.5, easing+'(0.5) should be 0.5');
+      });
+    });
+    it('should be symetrical', function () {
+      repeat(10)(function () {
+        var a = Math.random(), b = 2*Math.random()-0.5, c = 1-a, d = 1-b;
+        var easing = bezier(a, b, c, d);
+        var sym = function (x) { return 1 - easing(1-x); };
+        allEquals(easing, sym, 100);
+      });
+    });
+  });
+});

Libraries/Animated/src/bezier.js

@@ -1,82 +1,106 @@
 /**
- * https://github.com/arian/cubic-bezier
- *
- * MIT License
- *
- * Copyright (c) 2013 Arian Stolwijk
- *
- * Permission is hereby granted, free of charge, to any person obtaining
- * a copy of this software and associated documentation files (the
- * "Software"), to deal in the Software without restriction, including
- * without limitation the rights to use, copy, modify, merge, publish,
- * distribute, sublicense, and/or sell copies of the Software, and to
- * permit persons to whom the Software is furnished to do so, subject to
- * the following conditions:
- *
- * The above copyright notice and this permission notice shall be
- * included in all copies or substantial portions of the Software.
- *
- * 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 NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS 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.
+ * https://github.com/gre/bezier-easing
+ * BezierEasing - use bezier curve for transition easing function
+ * by Gaëtan Renaudeau 2014 - 2015 – MIT License
  *
  * @providesModule bezier
- * @nolint
  */
 
-module.exports = function(x1, y1, x2, y2, epsilon){
+ // These values are established by empiricism with tests (tradeoff: performance VS precision)
+ var NEWTON_ITERATIONS = 4;
+ var NEWTON_MIN_SLOPE = 0.001;
+ var SUBDIVISION_PRECISION = 0.0000001;
+ var SUBDIVISION_MAX_ITERATIONS = 10;
 
-  var curveX = function(t){
-    var v = 1 - t;
-    return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;
-  };
+ var kSplineTableSize = 11;
+ var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
 
-  var curveY = function(t){
-    var v = 1 - t;
-    return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;
-  };
+ var float32ArraySupported = typeof Float32Array === 'function';
 
-  var derivativeCurveX = function(t){
-    var v = 1 - t;
-    return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (-t * t * t + 2 * v * t) * x2;
-  };
+ function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+ function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+ function C (aA1)      { return 3.0 * aA1; }
 
-  return function(t){
+ // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+ function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
 
-    var x = t, t0, t1, t2, x2, d2, i;
+ // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+ function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
 
-    // First try a few iterations of Newton's method -- normally very fast.
-    for (t2 = x, i = 0; i < 8; i++){
-      x2 = curveX(t2) - x;
-      if (Math.abs(x2) < epsilon) { return curveY(t2); }
-      d2 = derivativeCurveX(t2);
-      if (Math.abs(d2) < 1e-6) { break; }
-      t2 = t2 - x2 / d2;
+ function binarySubdivide (aX, aA, aB, mX1, mX2) {
+   var currentX, currentT, i = 0;
+   do {
+     currentT = aA + (aB - aA) / 2.0;
+     currentX = calcBezier(currentT, mX1, mX2) - aX;
+     if (currentX > 0.0) {
+       aB = currentT;
+     } else {
+       aA = currentT;
+     }
+   } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+   return currentT;
+ }
+
+ function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
+  for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+    var currentSlope = getSlope(aGuessT, mX1, mX2);
+    if (currentSlope === 0.0) {
+      return aGuessT;
     }
+    var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
+  }
+  return aGuessT;
+ }
 
-    t0 = 0;
-    t1 = 1;
-    t2 = x;
+ module.exports = function bezier (mX1, mY1, mX2, mY2) {
+   if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { // eslint-disable-line yoda
+     throw new Error('bezier x values must be in [0, 1] range');
+   }
 
-    if (t2 < t0) { return curveY(t0); }
-    if (t2 > t1) { return curveY(t1); }
+   // Precompute samples table
+   var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+   if (mX1 !== mY1 || mX2 !== mY2) {
+     for (var i = 0; i < kSplineTableSize; ++i) {
+       sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+     }
+   }
 
-    // Fallback to the bisection method for reliability.
-    while (t0 < t1){
-      x2 = curveX(t2);
-      if (Math.abs(x2 - x) < epsilon) { return curveY(t2); }
-      if (x > x2) { t0 = t2; }
-      else { t1 = t2; }
-      t2 = (t1 - t0) * 0.5 + t0;
-    }
+   function getTForX (aX) {
+     var intervalStart = 0.0;
+     var currentSample = 1;
+     var lastSample = kSplineTableSize - 1;
 
-    // Failure
-    return curveY(t2);
+     for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+       intervalStart += kSampleStepSize;
+     }
+     --currentSample;
 
-  };
+     // Interpolate to provide an initial guess for t
+     var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+     var guessForT = intervalStart + dist * kSampleStepSize;
 
-};
+     var initialSlope = getSlope(guessForT, mX1, mX2);
+     if (initialSlope >= NEWTON_MIN_SLOPE) {
+       return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+     } else if (initialSlope === 0.0) {
+       return guessForT;
+     } else {
+       return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+     }
+   }
+
+   return function BezierEasing (x) {
+     if (mX1 === mY1 && mX2 === mY2) {
+       return x; // linear
+     }
+     // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+     if (x === 0) {
+       return 0;
+     }
+     if (x === 1) {
+       return 1;
+     }
+     return calcBezier(getTForX(x), mY1, mY2);
+   };
+ };

Libraries/AppRegistry/AppRegistry.js

@@ -25,7 +25,7 @@ if (__DEV__) {
 
 var runnables = {};
 
-type ComponentProvider = () => ReactClass<any, any, any>;
+type ComponentProvider = () => ReactClass<any>;
 
 type AppConfig = {
   appKey: string;

Libraries/AppStateIOS/AppStateIOS.ios.js

@@ -35,8 +35,9 @@ var _eventHandlers = {
  *  - `active` - The app is running in the foreground
  *  - `background` - The app is running in the background. The user is either
  *     in another app or on the home screen
- *  - `inactive` - This is a transition state that currently never happens for
- *     typical React Native apps.
+ *  - `inactive` - This is a state that occurs when transitioning between
+ *  	 foreground & background, and during periods of inactivity such as
+ *  	 entering the Multitasking view or in the event of an incoming call
  *
  * For more information, see
  * [Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html)

Libraries/CameraRoll/CameraRoll.js

@@ -135,9 +135,9 @@ class CameraRoll {
       'CameraRoll.saveImageWithTag tag must be a valid string.'
     );
     if (arguments.length > 1) {
-      console.warn("CameraRoll.saveImageWithTag(tag, success, error) is deprecated.  Use the returned Promise instead");
-      let successCallback = arguments[1];
-      let errorCallback = arguments[2] || ( () => {} );
+      console.warn('CameraRoll.saveImageWithTag(tag, success, error) is deprecated.  Use the returned Promise instead');
+      const successCallback = arguments[1];
+      const errorCallback = arguments[2] || ( () => {} );
       RCTCameraRollManager.saveImageWithTag(tag).then(successCallback, errorCallback);
       return;
     }
@@ -157,10 +157,10 @@ class CameraRoll {
       getPhotosParamChecker({params}, 'params', 'CameraRoll.getPhotos');
     }
     if (arguments.length > 1) {
-      console.warn("CameraRoll.getPhotos(tag, success, error) is deprecated.  Use the returned Promise instead");
+      console.warn('CameraRoll.getPhotos(tag, success, error) is deprecated.  Use the returned Promise instead');
       let successCallback = arguments[1];
       if (__DEV__) {
-        let callback = arguments[1];
+        const callback = arguments[1];
         successCallback = (response) => {
           getPhotosReturnChecker(
             {response},
@@ -170,7 +170,7 @@ class CameraRoll {
           callback(response);
         };
       }
-      let errorCallback = arguments[2] || ( () => {} );
+      const errorCallback = arguments[2] || ( () => {} );
       RCTCameraRollManager.getPhotos(params).then(successCallback, errorCallback);
     }
     // TODO: Add the __DEV__ check back in to verify the Promise result

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -10,9 +10,12 @@
  */
 'use strict';
 
+var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
+var Platform = require('Platform');
 var React = require('React');
 var ReactPropTypes = require('ReactPropTypes');
+var StatusBar = require('StatusBar');
 var StyleSheet = require('StyleSheet');
 var UIManager = require('UIManager');
 var View = require('View');
@@ -25,12 +28,6 @@ var requireNativeComponent = require('requireNativeComponent');
 var RK_DRAWER_REF = 'drawerlayout';
 var INNERVIEW_REF = 'innerView';
 
-var DrawerLayoutValidAttributes = {
-  drawerWidth: true,
-  drawerPosition: true,
-  drawerLockMode: true
-};
-
 var DRAWER_STATES = [
   'Idle',
   'Dragging',
@@ -99,8 +96,8 @@ var DrawerLayoutAndroid = React.createClass({
     /**
      * Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
      * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-     * - locked closed, meaning that the drawer will stay closed and not respond to gestures.
-     * - locked open, meaning that the drawer will stay opened and not respond to gestures.
+     * - locked-closed, meaning that the drawer will stay closed and not respond to gestures.
+     * - locked-open, meaning that the drawer will stay opened and not respond to gestures.
      * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
      */
     drawerLockMode: ReactPropTypes.oneOf([
@@ -132,21 +129,52 @@ var DrawerLayoutAndroid = React.createClass({
      * The navigation view that will be rendered to the side of the screen and can be pulled in.
      */
     renderNavigationView: ReactPropTypes.func.isRequired,
+
+    /**
+     * Make the drawer take the entire screen and draw the background of the
+     * status bar to allow it to open over the status bar. It will only have an
+     * effect on API 21+.
+     */
+    statusBarBackgroundColor: ColorPropType,
   },
 
   mixins: [NativeMethodsMixin],
 
+  getInitialState: function() {
+    return {statusBarBackgroundColor: undefined};
+  },
+
   getInnerViewNode: function() {
     return this.refs[INNERVIEW_REF].getInnerViewNode();
   },
 
+  componentDidMount: function() {
+    this._updateStatusBarBackground();
+  },
+
+  componentDidReceiveProps: function() {
+    this._updateStatusBarBackground();
+  },
+
   render: function() {
+    var drawStatusBar = Platform.Version >= 21 && this.props.statusBarBackgroundColor;
     var drawerViewWrapper =
       <View style={[styles.drawerSubview, {width: this.props.drawerWidth}]} collapsable={false}>
         {this.props.renderNavigationView()}
+        {drawStatusBar && <View style={styles.drawerStatusBar} />}
       </View>;
     var childrenWrapper =
       <View ref={INNERVIEW_REF} style={styles.mainSubview} collapsable={false}>
+        {drawStatusBar &&
+        <StatusBar
+          translucent
+          backgroundColor={this.state.statusBarBackgroundColor}
+        />}
+        {drawStatusBar &&
+        <View style={[
+          styles.statusBar,
+          {backgroundColor: this.props.statusBarBackgroundColor}
+        ]} />}
         {this.props.children}
       </View>;
     return (
@@ -156,7 +184,7 @@ var DrawerLayoutAndroid = React.createClass({
         drawerWidth={this.props.drawerWidth}
         drawerPosition={this.props.drawerPosition}
         drawerLockMode={this.props.drawerLockMode}
-        style={styles.base}
+        style={[styles.base, this.props.style]}
         onDrawerSlide={this._onDrawerSlide}
         onDrawerOpen={this._onDrawerOpen}
         onDrawerClose={this._onDrawerClose}
@@ -213,11 +241,29 @@ var DrawerLayoutAndroid = React.createClass({
   _getDrawerLayoutHandle: function() {
     return React.findNodeHandle(this.refs[RK_DRAWER_REF]);
   },
+
+  // Update the StatusBar component background color one frame after creating the
+  // status bar background View to avoid a white flicker that happens because
+  // the StatusBar background becomes transparent before the status bar View
+  // from this component has rendered.
+  _updateStatusBarBackground: function() {
+    if (Platform.Version >= 21 && this.props.statusBarBackgroundColor) {
+      // Check if the value is not already transparent to avoid an extra render.
+      if (this.state.statusBarBackgroundColor !== 'transparent') {
+        requestAnimationFrame(() => {
+          this.setState({statusBarBackgroundColor: 'transparent'});
+        });
+      }
+    } else {
+      this.setState({statusBarBackgroundColor: undefined});
+    }
+  },
 });
 
 var styles = StyleSheet.create({
   base: {
     flex: 1,
+    elevation: 16,
   },
   mainSubview: {
     position: 'absolute',
@@ -230,6 +276,18 @@ var styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     bottom: 0,
+    backgroundColor: 'white',
+  },
+  statusBar: {
+    height: StatusBar.currentHeight,
+  },
+  drawerStatusBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: StatusBar.currentHeight,
+    backgroundColor: 'rgba(0, 0, 0, 0.251)',
   },
 });
 

Libraries/Components/MapView/MapView.js

@@ -16,8 +16,6 @@ const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const Image = require('Image');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
-const RCTMapConfig = require('UIManager').RCTMap;
-const RCTMapConstants = RCTMapConfig && RCTMapConfig.Constants;
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
@@ -310,6 +308,21 @@ const MapView = React.createClass({
     active: React.PropTypes.bool,
   },
 
+  statics: {
+    /**
+     * Standard iOS MapView pin color constants, to be used with the
+     * `annotation.tintColor` property. On iOS 8 and earlier these are the
+     * only supported values when using regular pins. On iOS 9 and later
+     * you are not obliged to use these, but they are useful for matching
+     * the standard iOS look and feel.
+     */
+    PinColors: {
+      RED: '#ff3b30',
+      GREEN: '#4cd964',
+      PURPLE: '#c969e0',
+    },
+  },
+
   render: function() {
     let children = [], {annotations, overlays, followUserLocation} = this.props;
     annotations = annotations && annotations.map((annotation: Object) => {
@@ -491,20 +504,6 @@ const styles = StyleSheet.create({
   },
 });
 
-/**
- * Standard iOS MapView pin color constants, to be used with the
- * `annotation.tintColor` property. On iOS 8 and earlier these are the
- * only supported values when using regular pins. On iOS 9 and later
- * you are not obliged to use these, but they are useful for matching
- * the standard iOS look and feel.
- */
-const PinColors = RCTMapConstants && RCTMapConstants.PinColors;
-MapView.PinColors = PinColors && {
-  RED: PinColors.RED,
-  GREEN: PinColors.GREEN,
-  PURPLE: PinColors.PURPLE,
-};
-
 const RCTMap = requireNativeComponent('RCTMap', MapView, {
   nativeOnly: {
     onAnnotationDragStateChange: true,

Libraries/Components/RefreshControl/RefreshControl.js

@@ -11,9 +11,10 @@
  */
 'use strict';
 
-const React = require('React');
-const Platform = require('Platform');
 const ColorPropType = require('ColorPropType');
+const NativeMethodsMixin = require('NativeMethodsMixin');
+const Platform = require('Platform');
+const React = require('React');
 const View = require('View');
 
 const requireNativeComponent = require('requireNativeComponent');
@@ -25,15 +26,57 @@ if (Platform.OS === 'android') {
 }
 
 /**
- * This component is used inside a ScrollView to add pull to refresh
+ * This component is used inside a ScrollView or ListView to add pull to refresh
  * functionality. When the ScrollView is at `scrollY: 0`, swiping down
  * triggers an `onRefresh` event.
+ *
+ * ### Usage example
+ *
+ * ``` js
+ * class RefreshableList extends Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = {
+ *       refreshing: false,
+ *     };
+ *   }
+ *
+ *   _onRefresh() {
+ *     this.setState({refreshing: true});
+ *     fetchData().then(() => {
+ *       this.setState({refreshing: false});
+ *     });
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <ListView
+ *         refreshControl={
+ *           <RefreshControl
+ *             refreshing={this.state.refreshing}
+ *             onRefresh={this._onRefresh.bind(this)}
+ *           />
+ *         }
+ *         ...
+ *       >
+ *       ...
+ *       </ListView>
+ *     );
+ *   }
+ *   ...
+ * }
+ * ```
+ *
+ * __Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
+ * in the `onRefresh` function otherwise the refresh indicator will stop immediatly.
  */
 const RefreshControl = React.createClass({
   statics: {
     SIZE: RefreshLayoutConsts.SIZE,
   },
 
+  mixins: [NativeMethodsMixin],
+
   propTypes: {
     ...View.propTypes,
     /**
@@ -76,8 +119,24 @@ const RefreshControl = React.createClass({
     size: React.PropTypes.oneOf(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE),
   },
 
+  _nativeRef: {},
+
   render() {
-    return <NativeRefreshControl {...this.props} />;
+    return (
+      <NativeRefreshControl
+        {...this.props}
+        ref={ref => this._nativeRef = ref}
+        onRefresh={this._onRefresh}
+      />
+    );
+  },
+
+  _onRefresh() {
+    this.props.onRefresh && this.props.onRefresh();
+
+    if (this._nativeRef) {
+      this._nativeRef.setNativeProps({refreshing: this.props.refreshing});
+    }
   },
 });
 

Libraries/Components/ScrollResponder.js

@@ -202,7 +202,6 @@ var ScrollResponderMixin = {
    * a touch has already started.
    */
   scrollResponderHandleResponderReject: function() {
-    warning(false, "ScrollView doesn't take rejection well - scrolls anyway");
   },
 
   /**

Libraries/Components/ScrollView/ScrollView.js

@@ -11,26 +11,23 @@
  */
 '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 ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var ScrollResponder = require('ScrollResponder');
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var View = require('View');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 
-var deepDiffer = require('deepDiffer');
 var deprecatedPropType = require('deprecatedPropType');
 var dismissKeyboard = require('dismissKeyboard');
 var flattenStyle = require('flattenStyle');
-var insetsDiffer = require('insetsDiffer');
 var invariant = require('fbjs/lib/invariant');
-var pointsDiffer = require('pointsDiffer');
 var requireNativeComponent = require('requireNativeComponent');
 var processDecelerationRate = require('processDecelerationRate');
 var PropTypes = React.PropTypes;
@@ -134,8 +131,8 @@ var ScrollView = React.createClass({
      * shortcuts `"normal"` and `"fast"` which match the underlying iOS settings
      * for `UIScrollViewDecelerationRateNormal` and
      * `UIScrollViewDecelerationRateFast` respectively.
-     *   - Normal: 0.998 (the default)
-     *   - Fast: 0.9
+     *   - normal: 0.998 (the default)
+     *   - fast: 0.99
      * @platform ios
      */
     decelerationRate: PropTypes.oneOfType([
@@ -231,11 +228,14 @@ var ScrollView = React.createClass({
     scrollEnabled: PropTypes.bool,
     /**
      * This controls how often the scroll event will be fired while scrolling
-     * (in events per seconds). A higher number yields better accuracy for code
+     * (as a time interval in ms). A lower number yields better accuracy for code
      * that is tracking the scroll position, but can lead to scroll performance
      * problems due to the volume of information being send over the bridge.
-     * The default value is zero, which means the scroll event will be sent
-     * only once each time the view is scrolled.
+     * You will not notice a difference between values set between 1-16 as the
+     * JS run loop is synced to the screen refresh rate. If you do not need precise
+     * scroll position tracking, set this value higher to limit the information
+     * being sent across the bridge. The default value is zero, which results in
+     * the scroll event being sent only once each time the view is scrolled.
      * @platform ios
      */
     scrollEventThrottle: PropTypes.number,
@@ -252,13 +252,6 @@ var ScrollView = React.createClass({
      * @platform ios
      */
     scrollsToTop: PropTypes.bool,
-    /**
-     * When true, momentum events will be sent from Android
-     * This is internal and set automatically by the framework if you have
-     * onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView
-     * @platform android
-     */
-    sendMomentumEvents: PropTypes.bool,
     /**
      * When true, shows a horizontal scroll indicator.
      */
@@ -326,6 +319,15 @@ var ScrollView = React.createClass({
       PropTypes.func,
       'Use the `refreshControl` prop instead.'
     ),
+
+    /**
+     * Sometimes a scrollview takes up more space than its content fills. When this is
+     * the case, this prop will fill the rest of the scrollview with a color to avoid setting
+     * a background and creating unnecessary overdraw. This is an advanced optimization
+     * that is not needed in the general case.
+     * @platform android
+     */
+    endFillColor: ColorPropType,
   },
 
   mixins: [ScrollResponder.Mixin],
@@ -396,7 +398,7 @@ var ScrollView = React.createClass({
 
   handleScroll: function(e: Object) {
     if (__DEV__) {
-      if (this.props.onScroll && !this.props.scrollEventThrottle) {
+      if (this.props.onScroll && !this.props.scrollEventThrottle && Platform.OS === 'ios') {
         console.log(
           'You specified `onScroll` on a <ScrollView> but not ' +
           '`scrollEventThrottle`. You will only receive one event. ' +
@@ -431,7 +433,7 @@ var ScrollView = React.createClass({
       invariant(
         childLayoutProps.length === 0,
         'ScrollView child layout (' + JSON.stringify(childLayoutProps) +
-          ') must by applied through the contentContainerStyle prop.'
+          ') must be applied through the contentContainerStyle prop.'
       );
     }
 
@@ -555,41 +557,13 @@ var styles = StyleSheet.create({
   },
 });
 
-var validAttributes = {
-  ...ReactNativeViewAttributes.UIView,
-  alwaysBounceHorizontal: true,
-  alwaysBounceVertical: true,
-  automaticallyAdjustContentInsets: true,
-  bounces: true,
-  centerContent: true,
-  contentInset: {diff: insetsDiffer},
-  contentOffset: {diff: pointsDiffer},
-  decelerationRate: true,
-  horizontal: true,
-  indicatorStyle: true,
-  keyboardDismissMode: true,
-  keyboardShouldPersistTaps: true,
-  maximumZoomScale: true,
-  minimumZoomScale: true,
-  pagingEnabled: true,
-  removeClippedSubviews: true,
-  scrollEnabled: true,
-  scrollIndicatorInsets: {diff: insetsDiffer},
-  scrollsToTop: true,
-  showsHorizontalScrollIndicator: true,
-  showsVerticalScrollIndicator: true,
-  snapToInterval: true,
-  snapToAlignment: true,
-  stickyHeaderIndices: {diff: deepDiffer},
-  scrollEventThrottle: true,
-  zoomScale: true,
-};
-
 if (Platform.OS === 'android') {
-  var AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView);
+  var nativeOnlyProps = { nativeOnly : { 'sendMomentumEvents' : true } };
+  var AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
   var AndroidHorizontalScrollView = requireNativeComponent(
     'AndroidHorizontalScrollView',
-    ScrollView
+    ScrollView,
+    nativeOnlyProps
   );
 } else if (Platform.OS === 'ios') {
   var RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView);

Libraries/Components/ScrollView/processDecelerationRate.js

@@ -10,18 +10,11 @@
  */
 'use strict';
 
-var ScrollViewConsts = require('UIManager').RCTScrollView.Constants;
-
 function processDecelerationRate(decelerationRate) {
-  var ScrollViewDecelerationRateNormal = ScrollViewConsts && ScrollViewConsts.DecelerationRate.normal;
-  var ScrollViewDecelerationRateFast = ScrollViewConsts && ScrollViewConsts.DecelerationRate.fast;
-
-  if (typeof decelerationRate === 'string') {
-    if (decelerationRate === 'fast') {
-      return ScrollViewDecelerationRateFast;
-    } else if (decelerationRate === 'normal') {
-      return ScrollViewDecelerationRateNormal;
-    }
+  if (decelerationRate === 'normal') {
+    decelerationRate = 0.998;
+  } else if (decelerationRate === 'fast') {
+    decelerationRate = 0.99;
   }
   return decelerationRate;
 }

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -31,6 +31,23 @@ type Event = Object;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
+ *
+ * #### Programmatically changing selected index
+ *
+ * The selected index can be changed on the fly by assigning the
+ * selectIndex prop to a state variable, then changing that variable.
+ * Note that the state variable would need to be updated as the user
+ * selects a value and changes the index, as shown in the example below.
+ *
+ * ````
+ * <SegmentedControlIOS
+ *   values={['One', 'Two']}
+ *   selectedIndex={this.state.selectedIndex}
+ *   onChange={(event) => {
+ *     this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
+ *   }}
+ * />
+ * ````
  */
 var SegmentedControlIOS = React.createClass({
   mixins: [NativeMethodsMixin],
@@ -43,7 +60,7 @@ var SegmentedControlIOS = React.createClass({
     values: PropTypes.arrayOf(PropTypes.string),
 
     /**
-     * The index in `props.values` of the segment to be pre-selected
+     * The index in `props.values` of the segment to be (pre)selected.  
      */
     selectedIndex: PropTypes.number,
 

Libraries/Components/Slider/Slider.js

@@ -0,0 +1,194 @@
+/**
+ * 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 Slider
+ * @flow
+ */
+'use strict';
+
+var Image = require('Image');
+var NativeMethodsMixin = require('NativeMethodsMixin');
+var Platform = require('Platform');
+var PropTypes = require('ReactPropTypes');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var View = require('View');
+
+var requireNativeComponent = require('requireNativeComponent');
+
+type Event = Object;
+
+/**
+ * A component used to select a single value from a range of values.
+ */
+var Slider = React.createClass({
+  mixins: [NativeMethodsMixin],
+
+  propTypes: {
+    ...View.propTypes,
+
+    /**
+     * Used to style and layout the `Slider`.  See `StyleSheet.js` and
+     * `ViewStylePropTypes.js` for more info.
+     */
+    style: View.propTypes.style,
+
+    /**
+     * Initial value of the slider. The value should be between minimumValue
+     * and maximumValue, which default to 0 and 1 respectively.
+     * Default value is 0.
+     *
+     * *This is not a controlled component*, you don't need to update the
+     * value during dragging.
+     */
+    value: PropTypes.number,
+
+    /**
+     * Step value of the slider. The value should be
+     * between 0 and (maximumValue - minimumValue).
+     * Default value is 0.
+     */
+    step: PropTypes.number,
+
+    /**
+     * Initial minimum value of the slider. Default value is 0.
+     */
+    minimumValue: PropTypes.number,
+
+    /**
+     * Initial maximum value of the slider. Default value is 1.
+     */
+    maximumValue: PropTypes.number,
+
+    /**
+     * The color used for the track to the left of the button. Overrides the
+     * default blue gradient image.
+     * @platform ios
+     */
+    minimumTrackTintColor: PropTypes.string,
+
+    /**
+     * The color used for the track to the right of the button. Overrides the
+     * default blue gradient image.
+     * @platform ios
+     */
+    maximumTrackTintColor: PropTypes.string,
+
+    /**
+     * If true the user won't be able to move the slider.
+     * Default value is false.
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Assigns a single image for the track. Only static images are supported.
+     * The center pixel of the image will be stretched to fill the track.
+     * @platform ios
+     */
+    trackImage: Image.propTypes.source,
+
+    /**
+     * Assigns a minimum track image. Only static images are supported. The
+     * rightmost pixel of the image will be stretched to fill the track.
+     * @platform ios
+     */
+    minimumTrackImage: Image.propTypes.source,
+
+    /**
+     * Assigns a maximum track image. Only static images are supported. The
+     * leftmost pixel of the image will be stretched to fill the track.
+     * @platform ios
+     */
+    maximumTrackImage: Image.propTypes.source,
+
+    /**
+     * Sets an image for the thumb. Only static images are supported.
+     * @platform ios
+     */
+    thumbImage: Image.propTypes.source,
+
+    /**
+     * Callback continuously called while the user is dragging the slider.
+     */
+    onValueChange: PropTypes.func,
+
+    /**
+     * Callback called when the user finishes changing the value (e.g. when
+     * the slider is released).
+     */
+    onSlidingComplete: PropTypes.func,
+
+    /**
+     * Used to locate this view in UI automation tests.
+     */
+    testID: PropTypes.string,
+  },
+
+  getDefaultProps: function() : any {
+    return {
+      disabled: false,
+      value: 0,
+      minimumValue: 0,
+      maximumValue: 1,
+      step: 0
+    };
+  },
+
+  render: function() {
+    let {style, onValueChange, onSlidingComplete, ...props} = this.props;
+    props.style = [styles.slider, style];
+
+    props.onValueChange = onValueChange && ((event: Event) => {
+      let userEvent = true;
+      if (Platform.OS === 'android') {
+        // On Android there's a special flag telling us the user is
+        // dragging the slider.
+        userEvent = event.nativeEvent.fromUser;
+      }
+      onValueChange && userEvent && onValueChange(event.nativeEvent.value);
+    });
+
+    props.onChange = props.onValueChange;
+
+    props.onSlidingComplete = onSlidingComplete && ((event: Event) => {
+      onSlidingComplete && onSlidingComplete(event.nativeEvent.value);
+    });
+
+    return <RCTSlider 
+      {...props}
+      enabled={!this.props.disabled}
+      onStartShouldSetResponder={() => true}
+      onResponderTerminationRequest={() => false}
+    />;
+  }
+});
+
+let styles;
+if (Platform.OS === 'ios') {
+  styles = StyleSheet.create({
+    slider: {
+      height: 40,
+    },
+  });
+} else {
+  styles = StyleSheet.create({
+    slider: {},
+  });
+}
+
+let options = {};
+if (Platform.OS === 'android') {
+  options = {
+    nativeOnly: {
+      enabled: true,
+    }
+  };
+}
+const RCTSlider = requireNativeComponent('RCTSlider', Slider, options);
+
+module.exports = Slider;

Libraries/Components/SliderIOS/SliderIOS.ios.js

@@ -22,6 +22,12 @@ var requireNativeComponent = require('requireNativeComponent');
 
 type Event = Object;
 
+/**
+ * **Note:** SliderIOS is deprecated and will be removed in the future. Use the cross-platform
+ * Slider as a drop-in replacement with the same API.
+ *
+ * An iOS-specific component used to select a single value from a range of values.
+ */
 var SliderIOS = React.createClass({
   mixins: [NativeMethodsMixin],
 
@@ -120,6 +126,11 @@ var SliderIOS = React.createClass({
   },
 
   render: function() {
+    console.warn(
+      'SliderIOS is deprecated and will be removed in ' +
+      'future versions of React Native. Use the cross-platform Slider ' +
+      'as a drop-in replacement.');
+    
     let {style, onValueChange, onSlidingComplete, ...props} = this.props;
     props.style = [styles.slider, style];
 
@@ -131,7 +142,11 @@ var SliderIOS = React.createClass({
       onSlidingComplete && onSlidingComplete(event.nativeEvent.value);
     });
 
-    return <RCTSlider {...props}/>;
+    return <RCTSlider
+      {...props}
+      onStartShouldSetResponder={() => true}
+      onResponderTerminationRequest={() => false}
+    />;
   }
 });
 

Libraries/Components/StatusBar/StatusBar.js

@@ -39,8 +39,37 @@ type DefaultProps = {
  */
 function mergePropsStack(propsStack: Array<Object>, defaultValues: Object): Object {
   return propsStack.reduce((prev, cur) => {
-    return Object.assign(prev, cur);
-  }, defaultValues);
+    for (let prop in cur) {
+      if (cur[prop] != null) {
+        prev[prop] = cur[prop];
+      }
+    }
+    return prev;
+  }, Object.assign({}, defaultValues));
+}
+
+/**
+ * Returns an object to insert in the props stack from the props
+ * and the transition/animation info.
+ */
+function createStackEntry(props: any): any {
+  return {
+    backgroundColor: props.backgroundColor != null ? {
+      value: props.backgroundColor,
+      animated: props.animated,
+    } : null,
+    barStyle: props.barStyle != null ? {
+      value: props.barStyle,
+      animated: props.animated,
+    } : null,
+    translucent: props.translucent,
+    hidden: props.hidden != null ? {
+      value: props.hidden,
+      animated: props.animated,
+      transition: props.showHideTransition,
+    } : null,
+    networkActivityIndicatorVisible: props.networkActivityIndicatorVisible,
+  };
 }
 
 /**
@@ -74,26 +103,41 @@ function mergePropsStack(propsStack: Array<Object>, defaultValues: Object): Obje
  *
  * For cases where using a component is not ideal, there is also an imperative
  * API exposed as static functions on the component. It is however not recommended
- * to use the static API and the compoment for the same prop because any value
+ * to use the static API and the component for the same prop because any value
  * set by the static API will get overriden by the one set by the component in
  * the next render.
  */
 const StatusBar = React.createClass({
   statics: {
     _propsStack: [],
-    _defaultProps: {
+    _defaultProps: createStackEntry({
+      animated: false,
+      showHideTransition: 'fade',
       backgroundColor: 'black',
       barStyle: 'default',
       translucent: false,
       hidden: false,
       networkActivityIndicatorVisible: false,
-    },
+    }),
+    // Timer for updating the native module values at the end of the frame.
+    _updateImmediate: null,
+    // The current merged values from the props stack.
+    _currentValues: null,
+
+    // TODO(janic): Provide a real API to deal with status bar height. See the
+    // discussion in #6195.
+    /**
+     * The current height of the status bar on the device.
+     *
+     * @platform android
+     */
+    currentHeight: StatusBarManager.HEIGHT,
 
     // Provide an imperative API as static functions of the component.
     // See the corresponding prop for more detail.
     setHidden(hidden: boolean, animation?: StatusBarAnimation) {
       animation = animation || 'none';
-      StatusBar._defaultProps.hidden = hidden;
+      StatusBar._defaultProps.hidden.value = hidden;
       if (Platform.OS === 'ios') {
         StatusBarManager.setHidden(hidden, animation);
       } else if (Platform.OS === 'android') {
@@ -107,7 +151,7 @@ const StatusBar = React.createClass({
         return;
       }
       animated = animated || false;
-      StatusBar._defaultProps.barStyle = style;
+      StatusBar._defaultProps.barStyle.value = style;
       StatusBarManager.setStyle(style, animated);
     },
 
@@ -126,7 +170,7 @@ const StatusBar = React.createClass({
         return;
       }
       animated = animated || false;
-      StatusBar._defaultProps.backgroundColor = color;
+      StatusBar._defaultProps.backgroundColor.value = color;
       StatusBarManager.setColor(processColor(color), animated);
     },
 
@@ -197,27 +241,31 @@ const StatusBar = React.createClass({
     };
   },
 
+  _stackEntry: null,
+
   componentDidMount() {
     // Every time a StatusBar component is mounted, we push it's prop to a stack
     // and always update the native status bar with the props from the top of then
     // stack. This allows having multiple StatusBar components and the one that is
     // added last or is deeper in the view hierachy will have priority.
-    StatusBar._propsStack.push(this.props);
+    this._stackEntry = createStackEntry(this.props);
+    StatusBar._propsStack.push(this._stackEntry);
     this._updatePropsStack();
   },
 
   componentWillUnmount() {
     // When a StatusBar is unmounted, remove itself from the stack and update
     // the native bar with the next props.
-    const index = StatusBar._propsStack.indexOf(this.props);
+    const index = StatusBar._propsStack.indexOf(this._stackEntry);
     StatusBar._propsStack.splice(index, 1);
 
     this._updatePropsStack();
   },
 
-  componentDidUpdate(oldProps: Object) {
-    const index = StatusBar._propsStack.indexOf(oldProps);
-    StatusBar._propsStack[index] = this.props;
+  componentDidUpdate() {
+    const index = StatusBar._propsStack.indexOf(this._stackEntry);
+    this._stackEntry = createStackEntry(this.props);
+    StatusBar._propsStack[index] = this._stackEntry;
 
     this._updatePropsStack();
   },
@@ -226,34 +274,51 @@ const StatusBar = React.createClass({
    * Updates the native status bar with the props from the stack.
    */
   _updatePropsStack() {
-    const mergedProps = mergePropsStack(StatusBar._propsStack, StatusBar._defaultProps);
+    // Send the update to the native module only once at the end of the frame.
+    clearImmediate(StatusBar._updateImmediate);
+    StatusBar._updateImmediate = setImmediate(() => {
+      const oldProps = StatusBar._currentValues;
+      const mergedProps = mergePropsStack(StatusBar._propsStack, StatusBar._defaultProps);
 
-    if (Platform.OS === 'ios') {
-      if (mergedProps.barStyle !== undefined) {
-        StatusBarManager.setStyle(mergedProps.barStyle, this.props.animated);
+      // Update the props that have changed using the merged values from the props stack.
+      if (Platform.OS === 'ios') {
+        if (!oldProps || oldProps.barStyle.value !== mergedProps.barStyle.value) {
+          StatusBarManager.setStyle(
+            mergedProps.barStyle.value,
+            mergedProps.barStyle.animated,
+          );
+        }
+        if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
+          StatusBarManager.setHidden(
+            mergedProps.hidden.value,
+            mergedProps.hidden.animated ?
+              mergedProps.hidden.transition :
+              'none',
+          );
+        }
+
+        if (!oldProps || oldProps.networkActivityIndicatorVisible !== mergedProps.networkActivityIndicatorVisible) {
+          StatusBarManager.setNetworkActivityIndicatorVisible(
+            mergedProps.networkActivityIndicatorVisible
+          );
+        }
+      } else if (Platform.OS === 'android') {
+        if (!oldProps || oldProps.backgroundColor.value !== mergedProps.backgroundColor.value) {
+          StatusBarManager.setColor(
+            processColor(mergedProps.backgroundColor.value),
+            mergedProps.backgroundColor.animated,
+          );
+        }
+        if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
+          StatusBarManager.setHidden(mergedProps.hidden.value);
+        }
+        if (!oldProps || oldProps.translucent !== mergedProps.translucent) {
+          StatusBarManager.setTranslucent(mergedProps.translucent);
+        }
       }
-      if (mergedProps.hidden !== undefined) {
-        StatusBarManager.setHidden(
-          mergedProps.hidden,
-          this.props.animated ? this.props.showHideTransition : 'none'
-        );
-      }
-      if (mergedProps.networkActivityIndicatorVisible !== undefined) {
-        StatusBarManager.setNetworkActivityIndicatorVisible(
-          mergedProps.networkActivityIndicatorVisible
-        );
-      }
-    } else if (Platform.OS === 'android') {
-      if (mergedProps.backgroundColor !== undefined) {
-        StatusBarManager.setColor(processColor(mergedProps.backgroundColor), this.props.animated);
-      }
-      if (mergedProps.hidden !== undefined) {
-        StatusBarManager.setHidden(mergedProps.hidden);
-      }
-      if (mergedProps.translucent !== undefined) {
-        StatusBarManager.setTranslucent(mergedProps.translucent);
-      }
-    }
+      // Update the current prop values.
+      StatusBar._currentValues = mergedProps;
+    });
   },
 
   render(): ?ReactElement {

Libraries/Components/Switch/Switch.js

@@ -1,5 +1,10 @@
 /**
- * Copyright 2004-present Facebook. All Rights Reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule Switch
  * @flow
@@ -21,7 +26,15 @@ type DefaultProps = {
 };
 
 /**
- * Universal two-state toggle component.
+ * Renders a boolean input.
+ *
+ * This is a controlled component that requires an `onValueChange` callback that
+ * updates the `value` prop in order for the component to reflect user actions.
+ * If the `value` prop is not updated, the component will continue to render
+ * the supplied `value` prop instead of the expected result of any user actions.
+ *
+ * @keyword checkbox
+ * @keyword toggle
  */
 var Switch = React.createClass({
   propTypes: {

Libraries/Components/SwitchAndroid/SwitchAndroid.android.js

@@ -20,7 +20,9 @@ var requireNativeComponent = require('requireNativeComponent');
 var SWITCH = 'switch';
 
 /**
- * Standard Android two-state toggle component
+ * @deprecated
+ *
+ * Use <Switch> instead for cross-platform compatibility.
  */
 var SwitchAndroid = React.createClass({
   mixins: [NativeMethodsMixin],

Libraries/Components/SwitchIOS/SwitchIOS.ios.js

@@ -32,11 +32,9 @@ type DefaultProps = {
 type Event = Object;
 
 /**
- * Use `SwitchIOS` to render a boolean input on iOS.  This is
- * a controlled component, so you must hook in to the `onValueChange` callback
- * and update the `value` prop in order for the component to update, otherwise
- * the user's change will be reverted immediately to reflect `props.value` as the
- * source of truth.
+ * @deprecated
+ *
+ * Use <Switch> instead for cross-platform compatibility.
  */
 var SwitchIOS = React.createClass({
   mixins: [NativeMethodsMixin],

Libraries/Components/TextInput/TextInput.js

@@ -68,7 +68,17 @@ type Event = Object;
  *   />
  * ```
  *
- * Note that some props are only available with `multiline={true/false}`:
+ * Note that some props are only available with `multiline={true/false}`.
+ * Additionally, border styles that apply to only one side of the element
+ * (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if
+ * `multiline=false`. To achieve the same effect, you can wrap your `TextInput`
+ * in a `View`:
+ *
+ * ```
+ *  <View style={{ borderBottomColor: '#000000', borderBottomWidth: 1, }}>
+ *    <TextInput {...props} />
+ *  </View>
+ * ```
  */
 var TextInput = React.createClass({
   statics: {
@@ -274,7 +284,6 @@ var TextInput = React.createClass({
     clearTextOnFocus: PropTypes.bool,
     /**
      * If true, all text will automatically be selected on focus
-     * @platform ios
      */
     selectTextOnFocus: PropTypes.bool,
     /**
@@ -514,6 +523,7 @@ var TextInput = React.createClass({
         underlineColorAndroid={this.props.underlineColorAndroid}
         children={children}
         editable={this.props.editable}
+        selectTextOnFocus={this.props.selectTextOnFocus}
       />;
 
     return (

Libraries/Components/Touchable/Touchable.js

@@ -599,18 +599,22 @@ var TouchableMixin = {
    * @sideeffects
    */
   _receiveSignal: function(signal, e) {
+    var responderID = this.state.touchable.responderID;
     var curState = this.state.touchable.touchState;
     var nextState = Transitions[curState] && Transitions[curState][signal];
+    if (!responderID && signal === Signals.RESPONDER_RELEASE) {
+      return;
+    }
     if (!nextState) {
       throw new Error(
         'Unrecognized signal `' + signal + '` or state `' + curState +
-        '` for Touchable responder `' + this.state.touchable.responderID + '`'
+        '` for Touchable responder `' + responderID + '`'
       );
     }
     if (nextState === States.ERROR) {
       throw new Error(
         'Touchable cannot transition from `' + curState + '` to `' + signal +
-        '` for responder `' + this.state.touchable.responderID + '`'
+        '` for responder `' + responderID + '`'
       );
     }
     if (curState !== nextState) {

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -44,6 +44,8 @@ var TouchableView = requireNativeComponent('RCTView', null, {
   }
 });
 
+type Event = Object;
+
 var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 
 /**
@@ -138,23 +140,23 @@ var TouchableNativeFeedback = React.createClass({
    * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
    * defined on your component.
    */
-  touchableHandleActivePressIn: function() {
-    this.props.onPressIn && this.props.onPressIn();
+  touchableHandleActivePressIn: function(e: Event) {
+    this.props.onPressIn && this.props.onPressIn(e);
     this._dispatchPressedStateChange(true);
     this._dispatchHotspotUpdate(this.pressInLocation.locationX, this.pressInLocation.locationY);
   },
 
-  touchableHandleActivePressOut: function() {
-    this.props.onPressOut && this.props.onPressOut();
+  touchableHandleActivePressOut: function(e: Event) {
+    this.props.onPressOut && this.props.onPressOut(e);
     this._dispatchPressedStateChange(false);
   },
 
-  touchableHandlePress: function() {
-    this.props.onPress && this.props.onPress();
+  touchableHandlePress: function(e: Event) {
+    this.props.onPress && this.props.onPress(e);
   },
 
-  touchableHandleLongPress: function() {
-    this.props.onLongPress && this.props.onLongPress();
+  touchableHandleLongPress: function(e: Event) {
+    this.props.onLongPress && this.props.onLongPress(e);
   },
 
   touchableGetPressRectOffset: function() {

Libraries/Components/View/View.js

@@ -227,35 +227,38 @@ const View = React.createClass({
     onLayout: PropTypes.func,
 
     /**
-     * In the absence of `auto` property, `none` is much like `CSS`'s `none`
-     * value. `box-none` is as if you had applied the `CSS` class:
+     * Controls whether the View can be the target of touch events.
      *
+     *   - 'auto': The View can be the target of touch events.
+     *   - 'none': The View is never the target of touch events.
+     *   - 'box-none': The View is never the target of touch events but it's
+     *     subviews can be. It behaves like if the view had the following classes
+     *     in CSS:
      * ```
      * .box-none {
-     *   pointer-events: none;
+     * 		pointer-events: none;
      * }
      * .box-none * {
-     *   pointer-events: all;
+     * 		pointer-events: all;
      * }
      * ```
-     *
-     * `box-only` is the equivalent of
-     *
+     *   - 'box-only': The view can be the target of touch events but it's
+     *     subviews cannot be. It behaves like if the view had the following classes
+     *     in CSS:
      * ```
      * .box-only {
-     *   pointer-events: all;
+     * 		pointer-events: all;
      * }
      * .box-only * {
-     *   pointer-events: none;
+     * 		pointer-events: none;
      * }
      * ```
-     *
-     * But since `pointerEvents` does not affect layout/appearance, and we are
-     * already deviating from the spec by adding additional modes, we opt to not
-     * include `pointerEvents` on `style`. On some platforms, we would need to
-     * implement it as a `className` anyways. Using `style` or not is an
-     * implementation detail of the platform.
      */
+    // Since `pointerEvents` does not affect layout/appearance, and we are
+    // already deviating from the spec by adding additional modes, we opt to not
+    // include `pointerEvents` on `style`. On some platforms, we would need to
+    // implement it as a `className` anyways. Using `style` or not is an
+    // implementation detail of the platform.
     pointerEvents: PropTypes.oneOf([
       'box-none',
       'none',

Libraries/Components/WebView/WebView.android.js

@@ -11,6 +11,7 @@
 'use strict';
 
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
+var ProgressBarAndroid = require('ProgressBarAndroid');
 var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var StyleSheet = require('StyleSheet');
@@ -33,6 +34,15 @@ var WebViewState = keyMirror({
   ERROR: null,
 });
 
+var defaultRenderLoading = () => (
+  <View style={styles.loadingView}>
+    <ProgressBarAndroid
+      style={styles.loadingProgressBar}
+      styleAttr="Inverse"
+    />
+  </View>
+);
+
 /**
  * Renders a native WebView.
  */
@@ -137,6 +147,12 @@ var WebView = React.createClass({
      * Used to locate this view in end-to-end tests.
      */
     testID: PropTypes.string,
+
+    /**
+     * Determines whether HTML5 audio & videos require the user to tap before they can
+     * start playing. The default value is `false`.
+     */
+    mediaPlaybackRequiresUserAction: PropTypes.bool,
   },
 
   getInitialState: function() {
@@ -164,7 +180,7 @@ var WebView = React.createClass({
     var otherView = null;
 
    if (this.state.viewState === WebViewState.LOADING) {
-      otherView = this.props.renderLoading && this.props.renderLoading();
+      otherView = (this.props.renderLoading || defaultRenderLoading)();
     } else if (this.state.viewState === WebViewState.ERROR) {
       var errorEvent = this.state.lastErrorEvent;
       otherView = this.props.renderError && this.props.renderError(
@@ -212,6 +228,7 @@ var WebView = React.createClass({
         onLoadingFinish={this.onLoadingFinish}
         onLoadingError={this.onLoadingError}
         testID={this.props.testID}
+        mediaPlaybackRequiresUserAction={this.props.mediaPlaybackRequiresUserAction}
       />;
 
     return (
@@ -300,6 +317,14 @@ var styles = StyleSheet.create({
     height: 0,
     flex: 0, // disable 'flex:1' when hiding a View
   },
+  loadingView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingProgressBar: {
+    height: 20,
+  },
 });
 
 module.exports = WebView;

Libraries/Components/WebView/WebView.ios.js

@@ -39,16 +39,16 @@ var WebViewState = keyMirror({
   ERROR: null,
 });
 
-var NavigationType = {
-  click: RCTWebViewManager.NavigationType.LinkClicked,
-  formsubmit: RCTWebViewManager.NavigationType.FormSubmitted,
-  backforward: RCTWebViewManager.NavigationType.BackForward,
-  reload: RCTWebViewManager.NavigationType.Reload,
-  formresubmit: RCTWebViewManager.NavigationType.FormResubmitted,
-  other: RCTWebViewManager.NavigationType.Other,
-};
+const NavigationType = keyMirror({
+  click: true,
+  formsubmit: true,
+  backforward: true,
+  reload: true,
+  formresubmit: true,
+  other: true,
+});
 
-var JSNavigationScheme = RCTWebViewManager.JSNavigationScheme;
+const JSNavigationScheme = 'react-js-navigation';
 
 type ErrorEvent = {
   domain: any;
@@ -179,8 +179,8 @@ var WebView = React.createClass({
      * shortcuts `"normal"` and `"fast"` which match the underlying iOS settings
      * for `UIScrollViewDecelerationRateNormal` and
      * `UIScrollViewDecelerationRateFast` respectively.
-     *   - Normal: 0.998
-     *   - Fast: 0.9 (the default for iOS WebView)
+     *   - normal: 0.998
+     *   - fast: 0.99 (the default for iOS WebView)
      * @platform ios
      */
     decelerationRate: ScrollView.propTypes.decelerationRate,
@@ -233,6 +233,12 @@ var WebView = React.createClass({
      * @platform ios
      */
     allowsInlineMediaPlayback: PropTypes.bool,
+
+    /**
+     * Determines whether HTML5 audio & videos require the user to tap before they can
+     * start playing. The default value is `false`.
+     */
+    mediaPlaybackRequiresUserAction: PropTypes.bool,
   },
 
   getInitialState: function() {
@@ -311,6 +317,7 @@ var WebView = React.createClass({
         onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
         scalesPageToFit={this.props.scalesPageToFit}
         allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
+        mediaPlaybackRequiresUserAction={this.props.mediaPlaybackRequiresUserAction}
       />;
 
     return (

Libraries/CustomComponents/ListView/ListView.js

@@ -1,5 +1,10 @@
 /**
- * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * Facebook, Inc. ("Facebook") owns all right, title and interest, including
  * all intellectual property and other proprietary rights, in and to the React
@@ -215,6 +220,12 @@ var ListView = React.createClass({
      * @platform ios
      */
     stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number),
+    /**
+     * Flag indicating whether empty section headers should be rendered. In the future release
+     * empty section headers will be rendered by default, and the flag will be deprecated.
+     * If empty sections are not desired to be rendered their indices should be excluded from sectionID object.
+     */
+    enableEmptySections: PropTypes.bool,
   },
 
   /**
@@ -223,7 +234,7 @@ var ListView = React.createClass({
   getMetrics: function() {
     return {
       contentLength: this.scrollProperties.contentLength,
-      totalRows: this.props.dataSource.getRowCount(),
+      totalRows: (this.props.enableEmptySections ? this.props.dataSource.getRowAndSectionCount() : this.props.dataSource.getRowCount()),
       renderedRows: this.state.curRenderedRowsCount,
       visibleRows: Object.keys(this._visibleRows).length,
     };
@@ -309,7 +320,7 @@ var ListView = React.createClass({
               state.curRenderedRowsCount,
               props.initialListSize
             ),
-            props.dataSource.getRowCount()
+            props.enableEmptySections ? props.dataSource.getRowAndSectionCount() : props.dataSource.getRowCount()
           ),
         };
       }, () => this._renderMoreRowsIfNeeded());
@@ -342,7 +353,19 @@ var ListView = React.createClass({
       var sectionID = dataSource.sectionIdentities[sectionIdx];
       var rowIDs = allRowIDs[sectionIdx];
       if (rowIDs.length === 0) {
-        continue;
+        if (this.props.enableEmptySections === undefined) {
+          var warning = require('fbjs/lib/warning');
+          warning(false, 'In next release empty section headers will be rendered.'
+                  + ' In this release you can use \'enableEmptySections\' flag to render empty section headers.');
+          continue;
+        } else {
+          var invariant = require('fbjs/lib/invariant');
+          invariant(
+            this.props.enableEmptySections,
+            'In next release \'enableEmptySections\' flag will be deprecated, empty section headers will always be rendered.'
+            + ' If empty section headers are not desirable their indices should be excluded from sectionIDs object.'
+            + ' In this release \'enableEmptySections\' may only have value \'true\' to allow empty section headers rendering.');
+        }
       }
 
       if (this.props.renderSectionHeader) {
@@ -483,7 +506,7 @@ var ListView = React.createClass({
     if (this.props.onEndReached &&
         this.scrollProperties.contentLength !== this._sentEndForContentLength &&
         this._getDistanceFromEnd(this.scrollProperties) < this.props.onEndReachedThreshold &&
-        this.state.curRenderedRowsCount === this.props.dataSource.getRowCount()) {
+        this.state.curRenderedRowsCount === (this.props.enableEmptySections ? this.props.dataSource.getRowAndSectionCount() : this.props.dataSource.getRowCount())) {
       this._sentEndForContentLength = this.scrollProperties.contentLength;
       this.props.onEndReached(event);
       return true;
@@ -494,7 +517,7 @@ var ListView = React.createClass({
   _renderMoreRowsIfNeeded: function() {
     if (this.scrollProperties.contentLength === null ||
       this.scrollProperties.visibleLength === null ||
-      this.state.curRenderedRowsCount === this.props.dataSource.getRowCount()) {
+      this.state.curRenderedRowsCount === (this.props.enableEmptySections ? this.props.dataSource.getRowAndSectionCount() : this.props.dataSource.getRowCount())) {
       this._maybeCallOnEndReached();
       return;
     }
@@ -509,7 +532,7 @@ var ListView = React.createClass({
     this.setState((state, props) => {
       var rowsToRender = Math.min(
         state.curRenderedRowsCount + props.pageSize,
-        props.dataSource.getRowCount()
+        (props.enableEmptySections ? props.dataSource.getRowAndSectionCount() : props.dataSource.getRowCount())
       );
       this._prevRenderedRowsCount = state.curRenderedRowsCount;
       return {

Libraries/CustomComponents/ListView/ListViewDataSource.js

@@ -186,6 +186,11 @@ class ListViewDataSource {
       typeof this._sectionHeaderHasChanged === 'function',
       'Must provide a sectionHeaderHasChanged function with section data.'
     );
+    invariant(
+      !sectionIdentities || !rowIdentities || sectionIdentities.length === rowIdentities.length,
+      'row and section ids lengths must be the same'
+    );
+
     var newSource = new ListViewDataSource({
       getRowData: this._getRowData,
       getSectionHeaderData: this._getSectionHeaderData,
@@ -221,6 +226,10 @@ class ListViewDataSource {
     return this._cachedRowCount;
   }
 
+  getRowAndSectionCount(): number {
+   return (this._cachedRowCount + this.sectionIdentities.length);
+  }
+
   /**
    * Returns if the row is dirtied and needs to be rerendered
    */

Libraries/CustomComponents/NavigationExperimental/NavigationAnimatedValueSubscription.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ *
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
+ *
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @providesModule NavigationAnimatedValueSubscription
+ * @flow
+ */
+'use strict';
+
+import type  {
+  NavigationAnimatedValue
+} from 'NavigationTypeDefinition';
+
+class NavigationAnimatedValueSubscription {
+  _value: NavigationAnimatedValue;
+  _token: string;
+
+  constructor(value: NavigationAnimatedValue, callback: Function) {
+    this._value = value;
+    this._token = value.addListener(callback);
+  }
+
+  remove(): void {
+    this._value.removeListener(this._token);
+  }
+}
+
+module.exports = NavigationAnimatedValueSubscription;

Libraries/CustomComponents/NavigationExperimental/NavigationCard.js

@@ -1,5 +1,10 @@
 /**
- * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * Facebook, Inc. ("Facebook") owns all right, title and interest, including
  * all intellectual property and other proprietary rights, in and to the React
@@ -28,36 +33,26 @@
 'use strict';
 
 const Animated = require('Animated');
+const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
+const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
 const NavigationContainer = require('NavigationContainer');
-const NavigationLinearPanResponder = require('NavigationLinearPanResponder');
+const NavigationPagerPanResponder = require('NavigationPagerPanResponder');
+const NavigationPagerStyleInterpolator = require('NavigationPagerStyleInterpolator');
 const NavigationPropTypes = require('NavigationPropTypes');
-const React = require('React');
+const React = require('react-native');
 const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
 
-const {Directions} = NavigationLinearPanResponder;
-
 import type  {
-  NavigationAnimatedValue,
-  NavigationLayout,
-  NavigationPosition,
+  NavigationPanPanHandlers,
   NavigationSceneRenderer,
   NavigationSceneRendererProps,
 } from 'NavigationTypeDefinition';
 
-import type {
-  NavigationGestureDirection
-} from 'NavigationLinearPanResponder';
-
-type State = {
-  hash: string,
-  height: number,
-  width: number,
-};
-
 type Props = NavigationSceneRendererProps & {
-  direction: NavigationGestureDirection,
+  style: any,
+  panHandlers: ?NavigationPanPanHandlers,
   renderScene: NavigationSceneRenderer,
 };
 
@@ -65,78 +60,18 @@ const {PropTypes} = React;
 
 const propTypes = {
   ...NavigationPropTypes.SceneRenderer,
-  direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]),
+  style: PropTypes.any,
+  panHandlers: NavigationPropTypes.panHandlers,
   renderScene: PropTypes.func.isRequired,
 };
 
-const defaultProps = {
-  direction: Directions.HORIZONTAL,
-};
-
-class AmimatedValueSubscription {
-  _value: NavigationAnimatedValue;
-  _token: string;
-
-  constructor(value: NavigationAnimatedValue, callback: Function) {
-    this._value = value;
-    this._token = value.addListener(callback);
-  }
-
-  remove() {
-    this._value.removeListener(this._token);
-  }
-}
-
-/**
- * Class that provides the required information for the
- * `NavigationLinearPanResponder`. This class must implement
- * the interface `NavigationLinearPanResponderDelegate`.
- */
-class PanResponderDelegate {
-  _props : Props;
-
-  constructor(props: Props) {
-    this._props = props;
-  }
-
-  getDirection(): NavigationGestureDirection {
-    return this._props.direction;
-  }
-
-  getIndex(): number {
-    return this._props.navigationState.index;
-  }
-
-  getLayout(): NavigationLayout {
-    return this._props.layout;
-  }
-
-  getPosition(): NavigationPosition {
-    return this._props.position;
-  }
-
-  onNavigate(action: {type: string}): void {
-    this._props.onNavigate && this._props.onNavigate(action);
-  }
-}
-
 /**
  * Component that renders the scene as card for the <NavigationCardStack />.
  */
-class NavigationCard extends React.Component {
+class NavigationCard extends React.Component<any, Props, any> {
   props: Props;
-  state: State;
-  _calculateState: (t: NavigationLayout) => State;
-  _layoutListeners: Array<AmimatedValueSubscription>;
 
-  constructor(props: Props, context: any) {
-    super(props, context);
-
-    this.state = this._calculateState(props.layout);
-    this._layoutListeners = [];
-  }
-
-  shouldComponentUpdate(nextProps: Object, nextState: Object): boolean {
+  shouldComponentUpdate(nextProps: Props, nextState: any): boolean {
     return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
       this,
       nextProps,
@@ -144,130 +79,32 @@ class NavigationCard extends React.Component {
     );
   }
 
-  componentWillMount(): void {
-    this._calculateState = this._calculateState.bind(this);
-  }
-
-  componentDidMount(): void {
-    this._applyLayout(this.props.layout);
-  }
-
-  componentWillUnmount(): void {
-    this._layoutListeners.forEach(subscription => subscription.remove);
-  }
-
-  componentWillReceiveProps(nextProps: Props): void {
-    this._applyLayout(nextProps.layout);
-  }
-
   render(): ReactElement {
-    const {
-      direction,
-      layout,
-      navigationState,
-      onNavigate,
-      position,
-      scene,
-      scenes,
+    let {
+      style,
+      panHandlers,
+      renderScene,
+      ...props,
     } = this.props;
 
-    const {
-      height,
-      width,
-    } = this.state;
-
-    const index = scene.index;
-    const isVertical = direction === 'vertical';
-    const inputRange = [index - 1, index, index + 1];
-    const animatedStyle = {
-
-      opacity: position.interpolate({
-        inputRange,
-        outputRange: [1, 1, 0.3],
-      }),
-
-      transform: [
-        {
-          scale: position.interpolate({
-            inputRange,
-            outputRange: [1, 1, 0.95],
-          }),
-        },
-        {
-          translateX: isVertical ? 0 :
-            position.interpolate({
-              inputRange,
-              outputRange: [width, 0, -10],
-            }),
-        },
-        {
-          translateY: !isVertical ? 0 :
-            position.interpolate({
-              inputRange,
-              outputRange: [height, 0, -10],
-            }),
-        },
-      ],
-    };
-
-    let panHandlers = null;
-    if (navigationState.index === index) {
-      const delegate = new PanResponderDelegate(this.props);
-      const panResponder = new NavigationLinearPanResponder(delegate);
-      panHandlers = panResponder.panHandlers;
+    if (style === undefined) {
+      // fall back to default style.
+      style = NavigationCardStackStyleInterpolator.forHorizontal(props);
+    }
+    if (panHandlers === undefined) {
+      // fall back to default pan handlers.
+      panHandlers = NavigationCardStackPanResponder.forHorizontal(props);
     }
-
-    const sceneProps = {
-      layout,
-      navigationState,
-      onNavigate,
-      position,
-      scene,
-      scenes,
-    };
 
     return (
-      <Animated.View
-        {...panHandlers}
-        style={[styles.main, animatedStyle]}>
-        {this.props.renderScene(sceneProps)}
+      <Animated.View {...panHandlers} style={[styles.main, style]}>
+        {renderScene(props)}
       </Animated.View>
     );
   }
-
-  _calculateState(layout: NavigationLayout): State {
-    const width = layout.width.__getValue();
-    const height = layout.height.__getValue();
-    const hash = 'layout-' + width + '-' + height;
-    const state = {
-      height,
-      width,
-      hash,
-    };
-    return state;
-  }
-
-  _applyLayout(layout: NavigationLayout) {
-    this._layoutListeners.forEach(subscription => subscription.remove);
-
-    this._layoutListeners.length = 0;
-
-    const callback = this._applyLayout.bind(this, layout);
-
-    this._layoutListeners.push(
-      new AmimatedValueSubscription(layout.width, callback),
-      new AmimatedValueSubscription(layout.height, callback),
-    );
-
-    const nextState = this._calculateState(layout);
-    if (nextState.hash !== this.state.hash) {
-      this.setState(nextState);
-    }
-  }
 }
 
 NavigationCard.propTypes = propTypes;
-NavigationCard.defaultProps = defaultProps;
 
 const styles = StyleSheet.create({
   main: {
@@ -284,4 +121,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = NavigationContainer.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;

Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js

@@ -1,5 +1,10 @@
 /**
- * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * Facebook, Inc. ("Facebook") owns all right, title and interest, including
  * all intellectual property and other proprietary rights, in and to the React
@@ -27,11 +32,11 @@
  */
 'use strict';
 
-const Animated = require('Animated');
 const NavigationAnimatedView = require('NavigationAnimatedView');
 const NavigationCard = require('NavigationCard');
+const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
 const NavigationContainer = require('NavigationContainer');
-const NavigationLinearPanResponder = require('NavigationLinearPanResponder');
+const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
 const NavigationPropTypes = require('NavigationPropTypes');
 const React = require('React');
 const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
@@ -40,11 +45,9 @@ const StyleSheet = require('StyleSheet');
 const emptyFunction = require('fbjs/lib/emptyFunction');
 
 const {PropTypes} = React;
-const {Directions} = NavigationLinearPanResponder;
+const {Directions} = NavigationCardStackPanResponder;
 
 import type {
-  NavigationAnimatedValue,
-  NavigationAnimationSetter,
   NavigationParentState,
   NavigationSceneRenderer,
   NavigationSceneRendererProps,
@@ -52,7 +55,7 @@ import type {
 
 import type {
   NavigationGestureDirection,
-} from 'NavigationLinearPanResponder';
+} from 'NavigationCardStackPanResponder';
 
 type Props = {
   direction: NavigationGestureDirection,
@@ -61,32 +64,41 @@ type Props = {
   renderScene: NavigationSceneRenderer,
 };
 
-const propTypes = {
-  direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]),
-  navigationState: NavigationPropTypes.navigationParentState.isRequired,
-  renderOverlay: PropTypes.func,
-  renderScene: PropTypes.func.isRequired,
-};
-
-const defaultProps = {
-  direction: Directions.HORIZONTAL,
-  renderOverlay: emptyFunction.thatReturnsNull,
-};
-
 /**
- * A controlled navigation view that renders a list of cards.
+ * A controlled navigation view that renders a stack of cards.
+ *
+ *     +------------+
+ *   +-+            |
+ * +-+ |            |
+ * | | |            |
+ * | | |  Focused   |
+ * | | |   Card     |
+ * | | |            |
+ * +-+ |            |
+ *   +-+            |
+ *     +------------+
  */
 class NavigationCardStack extends React.Component {
   _renderScene : NavigationSceneRenderer;
-  _setTiming: NavigationAnimationSetter;
+
+  static propTypes = {
+    direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]),
+    navigationState: NavigationPropTypes.navigationParentState.isRequired,
+    renderOverlay: PropTypes.func,
+    renderScene: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    direction: Directions.HORIZONTAL,
+    renderOverlay: emptyFunction.thatReturnsNull,
+  };
 
   constructor(props: Props, context: any) {
     super(props, context);
   }
 
-  componentWillMount() {
+  componentWillMount(): void {
     this._renderScene = this._renderScene.bind(this);
-    this._setTiming = this._setTiming.bind(this);
   }
 
   shouldComponentUpdate(nextProps: Object, nextState: Object): boolean {
@@ -103,40 +115,34 @@ class NavigationCardStack extends React.Component {
         navigationState={this.props.navigationState}
         renderOverlay={this.props.renderOverlay}
         renderScene={this._renderScene}
-        setTiming={this._setTiming}
         style={[styles.animatedView, this.props.style]}
       />
     );
   }
 
   _renderScene(props: NavigationSceneRendererProps): ReactElement {
+    const isVertical = this.props.direction === 'vertical';
+
+    const style = isVertical ?
+      NavigationCardStackStyleInterpolator.forVertical(props) :
+      NavigationCardStackStyleInterpolator.forHorizontal(props);
+
+    const panHandlers = isVertical ?
+      NavigationCardStackPanResponder.forVertical(props) :
+      NavigationCardStackPanResponder.forHorizontal(props);
+
     return (
       <NavigationCard
         {...props}
-        direction={this.props.direction}
-        key={'card_' + props.scene.navigationState.key}
+        key={'card_' + props.scene.key}
+        panHandlers={panHandlers}
         renderScene={this.props.renderScene}
+        style={style}
       />
     );
   }
-
-  _setTiming(
-    position: NavigationAnimatedValue,
-    navigationState: NavigationParentState,
-  ): void {
-    Animated.timing(
-      position,
-      {
-        duration: 500,
-        toValue: navigationState.index,
-      }
-    ).start();
-  }
 }
 
-NavigationCardStack.propTypes = propTypes;
-NavigationCardStack.defaultProps = defaultProps;
-
 const styles = StyleSheet.create({
   animatedView: {
     flex: 1,

Libraries/CustomComponents/NavigationExperimental/NavigationCardStackPanResponder.js

@@ -0,0 +1,224 @@
+/**
+ * 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 NavigationCardStackPanResponder
+ * @flow
+ * @typechecks
+ */
+'use strict';
+
+const Animated = require('Animated');
+const NavigationAbstractPanResponder = require('NavigationAbstractPanResponder');
+
+const clamp = require('clamp');
+
+import type {
+  NavigationPanPanHandlers,
+  NavigationSceneRendererProps,
+} from 'NavigationTypeDefinition';
+
+/**
+ * The duration of the card animation in milliseconds.
+ */
+const ANIMATION_DURATION = 250;
+
+/**
+ * The threshold to invoke the `onNavigate` action.
+ * For instance, `1 / 3` means that moving greater than 1 / 3 of the width of
+ * the view will navigate.
+ */
+const POSITION_THRESHOLD = 1 / 3;
+
+/**
+ * The threshold (in pixels) to start the gesture action.
+ */
+const RESPOND_THRESHOLD = 15;
+
+/**
+ * The threshold (in pixels) to finish the gesture action.
+ */
+const DISTANCE_THRESHOLD = 100;
+
+/**
+ * Primitive gesture directions.
+ */
+const Directions = {
+  'HORIZONTAL': 'horizontal',
+  'VERTICAL': 'vertical',
+};
+
+export type NavigationGestureDirection =  'horizontal' | 'vertical';
+
+/**
+ * Primitive gesture actions.
+ */
+const Actions = {
+  // The gesture to navigate backward.
+  // This is done by swiping from the left to the right or from the top to the
+  // bottom.
+  BACK: {type: 'back'},
+};
+
+/**
+ * Pan responder that handles gesture for a card in the cards stack.
+ *
+ *     +------------+
+ *   +-+            |
+ * +-+ |            |
+ * | | |            |
+ * | | |  Focused   |
+ * | | |   Card     |
+ * | | |            |
+ * +-+ |            |
+ *   +-+            |
+ *     +------------+
+ */
+class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {
+
+  _isResponding: boolean;
+  _isVertical: boolean;
+  _props: NavigationSceneRendererProps;
+  _startValue: number;
+
+  constructor(
+    direction: NavigationGestureDirection,
+    props: NavigationSceneRendererProps,
+  ) {
+    super();
+    this._isResponding = false;
+    this._isVertical = direction === Directions.VERTICAL;
+    this._props = props;
+    this._startValue = 0;
+  }
+
+  onMoveShouldSetPanResponder(event: any, gesture: any): boolean {
+    const props = this._props;
+
+    if (props.navigationState.index !== props.scene.index) {
+      return false;
+    }
+
+    const layout = props.layout;
+    const isVertical = this._isVertical;
+    const axis = isVertical ? 'dy' : 'dx';
+    const index = props.navigationState.index;
+    const distance = isVertical ?
+      layout.height.__getValue() :
+      layout.width.__getValue();
+
+    return (
+      Math.abs(gesture[axis]) > RESPOND_THRESHOLD &&
+      distance > 0 &&
+      index > 0
+    );
+  }
+
+  onPanResponderGrant(): void {
+    this._isResponding = false;
+    this._props.position.stopAnimation((value: number) => {
+      this._isResponding = true;
+      this._startValue = value;
+    });
+  }
+
+  onPanResponderMove(event: any, gesture: any): void {
+    if (!this._isResponding) {
+      return;
+    }
+
+    const props = this._props;
+    const layout = props.layout;
+    const isVertical = this._isVertical;
+    const axis = isVertical ? 'dy' : 'dx';
+    const index = props.navigationState.index;
+    const distance = isVertical ?
+      layout.height.__getValue() :
+      layout.width.__getValue();
+
+    const value = clamp(
+      index - 1,
+      this._startValue - (gesture[axis] / distance),
+      index
+    );
+
+    props.position.setValue(value);
+  }
+
+  onPanResponderRelease(event: any, gesture: any): void {
+    if (!this._isResponding) {
+      return;
+    }
+
+    this._isResponding = false;
+
+    const props = this._props;
+    const isVertical = this._isVertical;
+    const axis = isVertical ? 'dy' : 'dx';
+    const index = props.navigationState.index;
+    const distance = gesture[axis];
+
+    props.position.stopAnimation((value: number) => {
+      this._reset();
+       if (distance > DISTANCE_THRESHOLD  || value <= index - POSITION_THRESHOLD) {
+        props.onNavigate(Actions.BACK);
+      }
+    });
+  }
+
+  onPanResponderTerminate(): void {
+    this._isResponding = false;
+    this._reset();
+  }
+
+  _reset(): void {
+    const props = this._props;
+    Animated.timing(
+      props.position,
+      {
+        toValue: props.navigationState.index,
+        duration: ANIMATION_DURATION,
+      }
+    ).start();
+  }
+}
+
+function createPanHandlers(
+  direction: NavigationGestureDirection,
+  props: NavigationSceneRendererProps,
+): NavigationPanPanHandlers {
+  const responder = new NavigationCardStackPanResponder(direction, props);
+  return responder.panHandlers;
+}
+
+function forHorizontal(
+  props: NavigationSceneRendererProps,
+): NavigationPanPanHandlers {
+  return createPanHandlers(Directions.HORIZONTAL, props);
+}
+
+function forVertical(
+  props: NavigationSceneRendererProps,
+): NavigationPanPanHandlers {
+  return createPanHandlers(Directions.VERTICAL, props);
+}
+
+module.exports = {
+  // constants
+  ANIMATION_DURATION,
+  DISTANCE_THRESHOLD,
+  POSITION_THRESHOLD,
+  RESPOND_THRESHOLD,
+
+  // enums
+  Actions,
+  Directions,
+
+  // methods.
+  forHorizontal,
+  forVertical,
+};

Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js

@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
+ *
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @providesModule NavigationCardStackStyleInterpolator
+ * @flow
+ */
+'use strict';
+
+import type  {
+  NavigationSceneRendererProps,
+} from 'NavigationTypeDefinition';
+
+/**
+ * Utility that builds the style for the card in the cards stack.
+ *
+ *     +------------+
+ *   +-+            |
+ * +-+ |            |
+ * | | |            |
+ * | | |  Focused   |
+ * | | |   Card     |
+ * | | |            |
+ * +-+ |            |
+ *   +-+            |
+ *     +------------+
+ */
+
+function forHorizontal(props: NavigationSceneRendererProps): Object {
+  const {
+    layout,
+    position,
+    scene,
+  } = props;
+
+  const index = scene.index;
+  const inputRange = [index - 1, index, index + 1];
+  const width = layout.initWidth;
+
+  const opacity = position.interpolate({
+    inputRange,
+    outputRange: [1, 1, 0.3],
+  });
+
+  const scale = position.interpolate({
+    inputRange,
+    outputRange: [1, 1, 0.95],
+  });
+
+  const translateY = 0;
+  const translateX = position.interpolate({
+    inputRange,
+    outputRange: [width, 0, -10],
+  });
+
+  return {
+    opacity,
+    transform: [
+      { scale },
+      { translateX },
+      { translateY },
+    ],
+  };
+}
+
+function forVertical(props: NavigationSceneRendererProps): Object {
+  const {
+    layout,
+    position,
+    scene,
+  } = props;
+
+  const index = scene.index;
+  const inputRange = [index - 1, index, index + 1];
+  const height = layout.initHeight;
+
+  const opacity = position.interpolate({
+    inputRange,
+    outputRange: [1, 1, 0.3],
+  });
+
+  const scale = position.interpolate({
+    inputRange,
+    outputRange: [1, 1, 0.95],
+  });
+
+  const translateX = 0;
+  const translateY = position.interpolate({
+    inputRange,
+    outputRange: [height, 0, -10],
+  });
+
+  return {
+    opacity,
+    transform: [
+      { scale },
+      { translateX },
+      { translateY },
+    ],
+  };
+}
+
+module.exports = {
+  forHorizontal,
+  forVertical,
+};

Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

@@ -1,5 +1,10 @@
 /**
- * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * Facebook, Inc. ("Facebook") owns all right, title and interest, including
  * all intellectual property and other proprietary rights, in and to the React
@@ -27,136 +32,219 @@
  */
 'use strict';
 
-const Animated = require('Animated');
-const Image = require('Image');
-const NavigationContainer = require('NavigationContainer');
-const NavigationPropTypes = require('NavigationPropTypes');
-const NavigationRootContainer = require('NavigationRootContainer');
 const React = require('react-native');
-const StyleSheet = require('StyleSheet');
-const Text = require('Text');
-const TouchableOpacity = require('TouchableOpacity');
-const View = require('View');
+const NavigationContainer = require('NavigationContainer');
+const NavigationHeaderTitle = require('NavigationHeaderTitle');
+const NavigationHeaderBackButton = require('NavigationHeaderBackButton');
+const NavigationPropTypes = require('NavigationPropTypes');
+const NavigationHeaderStyleInterpolator = require('NavigationHeaderStyleInterpolator');
+const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
+
+const {
+  Animated,
+  Platform,
+  StyleSheet,
+  View,
+} = React;
 
 import type  {
-  NavigationState,
+  NavigationSceneRenderer,
   NavigationSceneRendererProps,
+  NavigationStyleInterpolator,
 } from 'NavigationTypeDefinition';
 
-type Props = NavigationSceneRendererProps & {
-  getTitle: (navState: NavigationState) => string,
+type DefaultProps = {
+  renderLeftComponent: NavigationSceneRenderer,
+  renderRightComponent: NavigationSceneRenderer,
+  renderTitleComponent: NavigationSceneRenderer,
 };
 
+type Props = NavigationSceneRendererProps & {
+  renderLeftComponent: NavigationSceneRenderer,
+  renderRightComponent: NavigationSceneRenderer,
+  renderTitleComponent: NavigationSceneRenderer,
+  style?: any;
+};
+
+type SubViewName = 'left' | 'title' | 'right';
+
+const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
+const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
 const {PropTypes} = React;
 
-const NavigationHeaderPropTypes = {
-  ...NavigationPropTypes.SceneRenderer,
-  getTitle: PropTypes.func.isRequired,
-};
-
-class NavigationHeader extends React.Component {
-  _handleBackPress: Function;
-
+class NavigationHeader extends React.Component<DefaultProps, Props, any> {
   props: Props;
 
-  componentWillMount(): void {
-    this._handleBackPress = this._handleBackPress.bind(this);
+  static defaultProps = {
+
+    renderTitleComponent: (props: NavigationSceneRendererProps) => {
+      const {navigationState} = props;
+      const title = String(navigationState.title || '');
+      return <NavigationHeaderTitle>{title}</NavigationHeaderTitle>;
+    },
+
+    renderLeftComponent: (props: NavigationSceneRendererProps) => {
+      return props.scene.index > 0 ? <NavigationHeaderBackButton /> : null;
+    },
+
+    renderRightComponent: (props: NavigationSceneRendererProps) => {
+      return null;
+    },
+  };
+
+  static propTypes = {
+    ...NavigationPropTypes.SceneRenderer,
+    renderLeftComponent: PropTypes.func,
+    renderRightComponent: PropTypes.func,
+    renderTitleComponent: PropTypes.func,
+    style: View.propTypes.style,
+  };
+
+  shouldComponentUpdate(nextProps: Props, nextState: any): boolean {
+    return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
+      this,
+      nextProps,
+      nextState
+    );
   }
 
   render(): ReactElement {
-    var state = this.props.navigationState;
+    const { scenes, style } = this.props;
+
+    const scenesProps = scenes.map(scene => {
+      const props = NavigationPropTypes.extractSceneRendererProps(this.props);
+      props.scene = scene;
+      return props;
+    });
+
+    return (
+      <View style={[ styles.appbar, style ]}>
+        {scenesProps.map(this._renderLeft, this)}
+        {scenesProps.map(this._renderTitle, this)}
+        {scenesProps.map(this._renderRight, this)}
+      </View>
+    );
+  }
+
+  _renderLeft(props: NavigationSceneRendererProps): ?ReactElement {
+    return this._renderSubView(
+      props,
+      'left',
+      this.props.renderLeftComponent,
+      NavigationHeaderStyleInterpolator.forLeft,
+    );
+  }
+
+  _renderTitle(props: NavigationSceneRendererProps): ?ReactElement {
+    return this._renderSubView(
+      props,
+      'title',
+      this.props.renderTitleComponent,
+      NavigationHeaderStyleInterpolator.forCenter,
+    );
+  }
+
+  _renderRight(props: NavigationSceneRendererProps): ?ReactElement {
+    return this._renderSubView(
+      props,
+      'right',
+      this.props.renderRightComponent,
+      NavigationHeaderStyleInterpolator.forRight,
+    );
+  }
+
+  _renderSubView(
+    props: NavigationSceneRendererProps,
+    name: SubViewName,
+    renderer: NavigationSceneRenderer,
+    styleInterpolator: NavigationStyleInterpolator,
+  ): ?ReactElement {
+    const {
+      scene,
+      navigationState,
+    } = props;
+
+    const {
+      index,
+      isStale,
+      key,
+    } = scene;
+
+    const offset = navigationState.index - index;
+
+    if (Math.abs(offset) > 2) {
+      // Scene is far away from the active scene. Hides it to avoid unnecessary
+      // rendering.
+      return null;
+    }
+
+    const subView = renderer(props);
+    if (subView === null) {
+      return null;
+    }
+
+    const pointerEvents = offset !== 0 || isStale ? 'none' : 'auto';
     return (
       <Animated.View
+        pointerEvents={pointerEvents}
+        key={name + '_' + key}
         style={[
-          styles.header,
+          styles[name],
+          styleInterpolator(props),
         ]}>
-        {state.children.map(this._renderTitle, this)}
-        {this._renderBackButton()}
+        {subView}
       </Animated.View>
     );
   }
-
-  _renderBackButton(): ?ReactElement {
-    if (this.props.navigationState.index === 0) {
-      return null;
-    }
-    return (
-      <TouchableOpacity style={styles.backButton} onPress={this._handleBackPress}>
-        <Image source={require('./back_chevron.png')} style={styles.backButtonImage} />
-      </TouchableOpacity>
-    );
-  }
-
-  _renderTitle(childState: NavigationState, index:number): ?ReactElement {
-    return (
-      <Animated.Text
-        key={childState.key}
-        style={[
-          styles.title,
-          {
-            opacity: this.props.position.interpolate({
-              inputRange: [index - 1, index, index + 1],
-              outputRange: [0, 1, 0],
-            }),
-            left: this.props.position.interpolate({
-              inputRange: [index - 1, index + 1],
-              outputRange: [200, -200],
-            }),
-            right: this.props.position.interpolate({
-              inputRange: [index - 1, index + 1],
-              outputRange: [-200, 200],
-            }),
-          },
-        ]}>
-        {this.props.getTitle(childState)}
-      </Animated.Text>
-    );
-  }
-
-  _handleBackPress(): void {
-    this.props.onNavigate(NavigationRootContainer.getBackAction());
-  }
 }
 
-NavigationHeader.propTypes = NavigationHeaderPropTypes;
-
-NavigationHeader = NavigationContainer.create(NavigationHeader);
-
 const styles = StyleSheet.create({
-  title: {
-    textAlign: 'center',
-    marginTop: 10,
-    fontSize: 18,
-    fontWeight: '500',
-    color: '#0A0A0A',
-    position: 'absolute',
-    top: 20,
+  appbar: {
+    alignItems: 'center',
+    backgroundColor: Platform.OS === 'ios' ? '#EFEFF2' : '#FFF',
+    borderBottomColor: 'rgba(0, 0, 0, .15)',
+    borderBottomWidth: Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0,
+    elevation: 2,
+    flexDirection: 'row',
+    height: APPBAR_HEIGHT + STATUSBAR_HEIGHT,
+    justifyContent: 'flex-start',
     left: 0,
+    marginBottom: 16, // This is needed for elevation shadow
+    position: 'absolute',
     right: 0,
-  },
-  header: {
-    backgroundColor: '#EFEFF2',
-    paddingTop: 20,
     top: 0,
-    height: 64,
-    right: 0,
+  },
+
+  title: {
+    bottom: 0,
+    left: APPBAR_HEIGHT,
+    marginTop: STATUSBAR_HEIGHT,
+    position: 'absolute',
+    right: APPBAR_HEIGHT,
+    top: 0,
+  },
+
+  left: {
+    bottom: 0,
     left: 0,
-    borderBottomWidth: 0.5,
-    borderBottomColor: '#828287',
+    marginTop: STATUSBAR_HEIGHT,
     position: 'absolute',
+    top: 0,
   },
-  backButton: {
-    width: 29,
-    height: 37,
+
+  right: {
+    bottom: 0,
+    marginTop: STATUSBAR_HEIGHT,
     position: 'absolute',
-    bottom: 4,
-    left: 2,
-    padding: 8,
-  },
-  backButtonImage: {
-    width: 13,
-    height: 21,
+    right: 0,
+    top: 0,
   },
 });
 
+NavigationHeader = NavigationContainer.create(NavigationHeader);
+
+NavigationHeader.HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
+NavigationHeader.Title = NavigationHeaderTitle;
+NavigationHeader.BackButton = NavigationHeaderBackButton;
+
 module.exports = NavigationHeader;

Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ *
+ * @providesModule NavigationHeaderBackButton
+ * @flow
+*/
+'use strict';
+
+const React = require('react-native');
+const NavigationContainer = require('NavigationContainer');
+const NavigationRootContainer = require('NavigationRootContainer');
+
+const {
+  Image,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+} = React;
+
+type Props = {
+  onNavigate: Function
+}
+
+const NavigationHeaderBackButton = (props: Props) => (
+  <TouchableOpacity style={styles.buttonContainer} onPress={() => props.onNavigate(NavigationRootContainer.getBackAction())}>
+    <Image style={styles.button} source={require('./assets/back-icon.png')} />
+  </TouchableOpacity>
+);
+
+NavigationHeaderBackButton.propTypes = {
+  onNavigate: React.PropTypes.func.isRequired
+};
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    height: 24,
+    width: 24,
+    margin: Platform.OS === 'ios' ? 10 : 16,
+    resizeMode: 'contain'
+  }
+});
+
+module.exports = NavigationContainer.create(NavigationHeaderBackButton);

Libraries/CustomComponents/NavigationExperimental/NavigationHeaderStyleInterpolator.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
+ *
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @providesModule NavigationHeaderStyleInterpolator
+ * @flow
+ */
+'use strict';
+
+
+import type  {
+  NavigationSceneRendererProps,
+} from 'NavigationTypeDefinition';
+
+/**
+ * Utility that builds the style for the navigation header.
+ *
+ * +-------------+-------------+-------------+
+ * |             |             |             |
+ * |    Left     |   Title     |   Right     |
+ * |  Component  |  Component  | Component   |
+ * |             |             |             |
+ * +-------------+-------------+-------------+
+ */
+
+function forLeft(props: NavigationSceneRendererProps): Object {
+  const {position, scene} = props;
+  const {index} = scene;
+  return {
+    opacity: position.interpolate({
+      inputRange: [ index - 1, index, index + 1 ],
+      outputRange: [ 0, 1, 0 ],
+    }),
+  };
+}
+
+function forCenter(props: NavigationSceneRendererProps): Object {
+  const {position, scene} = props;
+  const {index} = scene;
+  return {
+    opacity:position.interpolate({
+      inputRange: [ index - 1, index, index + 1 ],
+      outputRange: [ 0, 1, 0 ],
+    }),
+    transform: [
+      {
+        translateX: position.interpolate({
+          inputRange: [ index - 1, index + 1 ],
+          outputRange: [ 200, -200 ],
+        }),
+      }
+    ],
+  };
+}
+
+function forRight(props: NavigationSceneRendererProps): Object {
+  const {position, scene} = props;
+  const {index} = scene;
+  return {
+    opacity: position.interpolate({
+      inputRange: [ index - 1, index, index + 1 ],
+      outputRange: [ 0, 1, 0 ],
+    }),
+  };
+}
+
+module.exports = {
+  forCenter,
+  forLeft,
+  forRight,
+};

Libraries/CustomComponents/NavigationExperimental/NavigationHeaderTitle.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ *
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
+ *
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @providesModule NavigationHeaderTitle
+ * @flow
+ */
+'use strict';
+
+const React = require('react-native');
+
+const {
+  Platform,
+  StyleSheet,
+  View,
+  Text,
+} = React;
+
+type Props = {
+  children: ReactElement;
+  style: any;
+  textStyle: any;
+}
+
+const NavigationHeaderTitle = ({ children, style, textStyle }: Props) => (
+  <View style={[ styles.title, style ]}>
+    <Text style={[ styles.titleText, textStyle ]}>{children}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  title: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 16
+  },
+
+  titleText: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '500',
+    color: 'rgba(0, 0, 0, .9)',
+    textAlign: Platform.OS === 'ios' ? 'center' : 'left'
+  }
+});
+
+NavigationHeaderTitle.propTypes = {
+  children: React.PropTypes.string.isRequired,
+  style: View.propTypes.style,
+  textStyle: Text.propTypes.style
+};
+
+module.exports = NavigationHeaderTitle;

Libraries/CustomComponents/NavigationExperimental/NavigationLegacyNavigator.js

@@ -1,5 +1,10 @@
 /**
- * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * Facebook, Inc. ("Facebook") owns all right, title and interest, including
  * all intellectual property and other proprietary rights, in and to the React
@@ -27,11 +32,415 @@
  */
 'use strict';
 
+const Animated = require('Animated');
+const NavigationAnimatedValueSubscription = require('NavigationAnimatedValueSubscription');
+const NavigationAnimatedView = require('NavigationAnimatedView');
+const NavigationCard = require('NavigationCard');
+const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
+const NavigationContext = require('NavigationContext');
+const NavigationLegacyNavigatorRouteStack = require('NavigationLegacyNavigatorRouteStack');
+const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
+const NavigationPagerPanResponder = require('NavigationPagerPanResponder');
+const NavigationPagerStyleInterpolator = require('NavigationPagerStyleInterpolator');
+const NavigatorBreadcrumbNavigationBar = require('NavigatorBreadcrumbNavigationBar');
+const NavigatorNavigationBar = require('NavigatorNavigationBar');
+const NavigatorSceneConfigs = require('NavigatorSceneConfigs');
+const React = require('react-native');
+const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
+
+import type  {
+  NavigationActionCaller,
+  NavigationAnimatedValue,
+  NavigationAnimationSetter,
+  NavigationParentState,
+  NavigationSceneRenderer,
+  NavigationSceneRendererProps,
+} from 'NavigationTypeDefinition';
+
+type Props = {
+  configureScene: any,
+  initialRoute: any,
+  initialRouteStack: any,
+  navigationBar: any,
+  navigationBarNavigator: any,
+  navigator: any,
+  onDidFocus: any,
+  onWillFocus: any,
+  renderScene: any,
+  renderScene: any,
+  style: any,
+};
+
+type State = {
+  presentedIndex: number,
+  routeStack: Array<any>,
+};
+
+const RouteStack = NavigationLegacyNavigatorRouteStack;
+
 /**
- * NavigationLegacyNavigator is meant to replace Navigator seemlessly without
- * API changes. While the APIs remain compatible with Navigator, it should
- * be built with the new Navigation API such as `NavigationAnimatedView`...etc.
+ * NavigationLegacyNavigator is meant to replace Navigator seemlessly with
+ * minimum API changes.
+ *
+ * While the APIs remain compatible with Navigator, it is built with good
+ * intention by using the new Navigation API such as
+ * `NavigationAnimatedView`...etc.
  */
-const NavigationLegacyNavigator = require('Navigator');
+class NavigationLegacyNavigator extends React.Component<any, Props, State> {
+  static BreadcrumbNavigationBar: any;
+  static NavigationBar: any;
+  static SceneConfigs: any;
+
+  _applyAnimation: NavigationAnimationSetter;
+  _navigationBarRef: any;
+  _onNavigationBarRef: (ref: any) => void;
+  _onPositionChange: (data: {value: number}) => void;
+  _positionListener: ?NavigationAnimatedValueSubscription;
+  _previousStack: NavigationLegacyNavigatorRouteStack;
+  _renderCard: NavigationSceneRenderer;
+  _renderHeader: NavigationSceneRenderer;
+  _renderScene: NavigationSceneRenderer;
+  _routeFocused: any;
+  _routeToFocus: any;
+  _onNavigate: NavigationActionCaller;
+  _stack: NavigationLegacyNavigatorRouteStack;
+  _useAnimation: boolean;
+
+  navigationContext: NavigationContext;
+  parentNavigator: any;
+  props: Props;
+  state: State;
+
+  constructor(props: Props, context: any) {
+    super(props, context);
+
+    const stack = this._getInitialRouteStack();
+
+    // Unfortunately, due to historical reasons, the `state` has been exposed
+    // as public members of the navigator, therefore we'd keep private state
+    // as private members.
+    this._previousStack = stack;
+    this._stack = stack;
+    this._useAnimation = false;
+
+    // Legacy members portred from `Navigator`.
+    this.parentNavigator = props.navigator;
+    this.navigationContext = new NavigationContext();
+
+    this.state = {
+      routeStack: stack.toArray(),
+      presentedIndex: stack.index,
+    };
+  }
+
+  jumpTo(route: any): void {
+    this._applyStack(this._stack.jumpTo(route));
+  }
+
+  jumpForward(): void {
+    this._applyStack(this._stack.jumpForward());
+  }
+
+  jumpBack(): void {
+    this._applyStack(this._stack.jumpBack());
+  }
+
+  push(route: any): void {
+    this._applyStack(this._stack.push(route));
+  }
+
+  pop(): void {
+    this._applyStack(this._stack.pop());
+  }
+
+  replaceAtIndex(route: any, index: number): void {
+    this._applyStack(this._stack.replaceAtIndex(index, route));
+  }
+
+  replace(route: any): void {
+    this.replaceAtIndex(route, this._stack.index);
+  }
+
+  replacePrevious(route: any): void {
+    this.replaceAtIndex(route, this._stack.index - 1);
+  }
+
+  popToTop(): void {
+    this._applyStack(this._stack.slice(0, 1));
+  }
+
+  popToRoute(route: any): void {
+    this._applyStack(this._stack.popToRoute(route));
+  }
+
+  replacePreviousAndPop(route: any): void {
+    this._applyStack(this._stack.replacePreviousAndPop(route));
+  }
+
+  resetTo(route: any): void {
+    this._applyStack(this._stack.resetTo(route));
+  }
+
+  immediatelyResetRouteStack(routes: Array<any>): void {
+    this._applyStack(this._stack.resetRoutes(routes), true);
+  }
+
+  getCurrentRoutes(): Array<any> {
+    return this._stack.toArray();
+  }
+
+  // Life cycle and private methods below.
+
+  shouldComponentUpdate(nextProps: Object, nextState: Object): boolean {
+    return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
+      this,
+      nextProps,
+      nextState
+    );
+  }
+
+  componentWillMount(): void {
+    this._applyAnimation = this._applyAnimation.bind(this);
+    this._onNavigate = this._onNavigate.bind(this);
+    this._onNavigationBarRef = this._onNavigationBarRef.bind(this);
+    this._onPositionChange = this._onPositionChange.bind(this);
+    this._renderCard = this._renderCard.bind(this);
+    this._renderHeader = this._renderHeader.bind(this);
+    this._renderScene = this._renderScene.bind(this);
+
+    this._willFocus();
+  }
+
+  componentDidMount(): void {
+    this._didFocus();
+  }
+
+  componentWillUnmount(): void {
+    this._positionListener && this._positionListener.remove();
+  }
+
+  componentWillUpdate(nextProps: Props, nextState: State): void {
+    this._willFocus();
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State): void {
+    if (this._useAnimation) {
+      // will play animation.
+      return;
+    }
+    this._didFocus();
+  }
+
+  render(): ReactElement {
+    return (
+      <NavigationAnimatedView
+        applyAnimation={this._applyAnimation}
+        navigationState={this._stack.toNavigationState()}
+        onNavigate={this._onNavigate}
+        renderOverlay={this._renderHeader}
+        renderScene={this._renderCard}
+        style={this.props.style}
+      />
+    );
+  }
+
+  _getInitialRouteStack(): RouteStack {
+    const {initialRouteStack, initialRoute} = this.props;
+    const routes = initialRouteStack || [initialRoute];
+    const index = initialRoute ?
+      routes.indexOf(initialRoute) :
+      routes.length - 1;
+    return new RouteStack(index, routes);
+  }
+
+  _renderHeader(props: NavigationSceneRendererProps): ?ReactElement {
+    // `_renderHeader` is always called before `_renderCard`. We should
+    // subscribe to the position here.
+    this._positionListener && this._positionListener.remove();
+    this._positionListener = new NavigationAnimatedValueSubscription(
+      props.position,
+      this._onPositionChange,
+    );
+
+    const {navigationBar, navigationBarNavigator} = this.props;
+    if (!navigationBar) {
+      return null;
+    }
+
+    return React.cloneElement(
+      navigationBar,
+      {
+        key: 'header_' + props.scene.key,
+        ref: this._onNavigationBarRef,
+        navigator: navigationBarNavigator || this,
+        navState: {...this.state},
+      }
+    );
+  }
+
+  _renderCard(props: NavigationSceneRendererProps): ReactElement {
+    const {scene} = props;
+    const {configureScene} = this.props;
+
+    // Default getters for style and pan responders.
+    let styleGetter = NavigationCardStackStyleInterpolator.forHorizontal;
+    let panResponderGetter =  NavigationCardStackPanResponder.forHorizontal;
+
+    if (configureScene) {
+      const route = RouteStack.getRouteByNavigationState(scene.navigationState);
+      const config = configureScene(route, this.state.routeStack);
+
+      if (config) {
+        const gestures = config.gestures || {};
+        if (gestures.pop && gestures.pop.direction === 'left-to-right') {
+          // pass, will use default getters.
+        } else if (gestures.pop && gestures.pop.direction === 'top-to-bottom') {
+          styleGetter = NavigationCardStackStyleInterpolator.forVertical;
+          panResponderGetter = NavigationCardStackPanResponder.forVertical;
+        } else if (
+          gestures.jumpBack &&
+          gestures.jumpForward &&
+          gestures.jumpBack.direction === 'left-to-right' &&
+          gestures.jumpForward.direction === 'right-to-left'
+        ) {
+          styleGetter = NavigationPagerStyleInterpolator.forHorizontal;
+          panResponderGetter = NavigationPagerPanResponder.forHorizontal;
+        } else if (__DEV__) {
+          console.warn('unsupported scene configuration', config);
+        }
+      }
+    }
+
+    const style = styleGetter(props);
+    const panHandlers = panResponderGetter(props);
+
+    return (
+      <NavigationCard
+        {...props}
+        key={'card_' + props.scene.key}
+        panHandlers={panHandlers}
+        renderScene={this._renderScene}
+        style={style}
+      />
+    );
+  }
+
+  _renderScene(props: NavigationSceneRendererProps): ReactElement {
+    const {navigationState} = props.scene;
+    const route = RouteStack.getRouteByNavigationState(navigationState);
+    return this.props.renderScene(route, this);
+  }
+
+  _applyStack(
+    stack: NavigationLegacyNavigatorRouteStack,
+    noAnimation: ?boolean,
+  ): void {
+    if (stack !== this._stack) {
+      this._previousStack = this._stack;
+      this._stack = stack;
+
+      this._useAnimation = noAnimation ||
+        this._previousStack.index !== stack.index;
+
+      this.setState({
+        presentedIndex: stack.index,
+        routeStack: stack.toArray(),
+      });
+    }
+  }
+
+  _onNavigationBarRef(navigationBarRef: any): void {
+    this._navigationBarRef = navigationBarRef;
+    const {navigationBar} = this.props;
+    if (navigationBar && typeof navigationBar.ref === 'function') {
+      navigationBar.ref(navigationBarRef);
+    }
+  }
+
+  _onPositionChange(data: {value: number}): void {
+    const fromIndex = this._previousStack.index;
+    const toIndex = this._stack.index;
+
+    if (
+      fromIndex !== toIndex &&
+      this._navigationBarRef &&
+      typeof this._navigationBarRef.updateProgress === 'function'
+    ) {
+      const progress = (data.value - fromIndex) / (toIndex - fromIndex);
+      this._navigationBarRef.updateProgress(progress, fromIndex, toIndex);
+    }
+
+    const diff = this._stack.index - data.value;
+    // When animation stops, the `diff` can still be very a small non-zero value
+    // (e.g. 0.00000002). Call `willFocus` when `diff` is small enough.
+    if (diff < 0.05) {
+      this._didFocus();
+    }
+  }
+
+  _applyAnimation(
+    position: NavigationAnimatedValue,
+    nextState: NavigationParentState,
+    prevState: NavigationParentState,
+  ): void {
+    const {index} = nextState;
+
+    if (!this._useAnimation) {
+      position.setValue(index);
+      return;
+    }
+
+    Animated.timing(
+      position,
+      {
+        duration: 500,
+        toValue: index,
+      }
+    ).start();
+  }
+
+  _willFocus(): void {
+    const route = this._stack.get(this._stack.index);
+    if (this._routeToFocus === route) {
+      return;
+    }
+    this._routeToFocus = route;
+    this.navigationContext.emit('willfocus', {route: route});
+    this.props.onWillFocus && this.props.onWillFocus(route);
+  }
+
+  _didFocus(): void {
+    const route = this._stack.get(this._stack.index);
+    if (this._routeFocused === route) {
+      return;
+    }
+    this._routeFocused = route;
+    this.navigationContext.emit('didfocus', {route: route});
+    this.props.onDidFocus && this.props.onDidFocus(route);
+  }
+
+  _onNavigate(action: any): void {
+    switch (action) {
+      case NavigationCardStackPanResponder.Actions.BACK:
+        this.pop();
+        break;
+      case NavigationPagerPanResponder.Actions.JUMP_BACK:
+        this.jumpBack();
+        break;
+      case NavigationPagerPanResponder.Actions.JUMP_FORWARD:
+        this.jumpForward();
+        break;
+      default:
+        if (__DEV__) {
+          console.warn('unsupported gesture action', action);
+        }
+    }
+  }
+}
+
+// Legacy static members.
+NavigationLegacyNavigator.BreadcrumbNavigationBar = NavigatorBreadcrumbNavigationBar;
+NavigationLegacyNavigator.NavigationBar = NavigatorNavigationBar;
+NavigationLegacyNavigator.SceneConfigs = NavigatorSceneConfigs;
 
 module.exports = NavigationLegacyNavigator;

Libraries/CustomComponents/NavigationExperimental/NavigationLegacyNavigatorRouteStack.js

@@ -1,5 +1,10 @@
 /**
- * Copyright 2004-present Facebook. All Rights Reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule NavigationLegacyNavigatorRouteStack
  * @flow
@@ -46,6 +51,19 @@ let _nextRouteNodeID = 0;
 class RouteNode {
   key: string;
   route: any;
+
+  /**
+   * Cast `navigationState` as `RouteNode`.
+   * Also see `RouteNode#toNavigationState`.
+   */
+  static fromNavigationState(navigationState: NavigationState): RouteNode {
+    invariant(
+      navigationState instanceof RouteNode,
+      'navigationState should be an instacne of RouteNode'
+    );
+    return navigationState;
+  }
+
   constructor(route: any) {
     // Key value gets bigger incrementally. Developer can compare the
     // keys of two routes then know which route is added to the stack
@@ -72,8 +90,7 @@ class RouteNode {
   }
 
   toNavigationState(): NavigationState {
-    const state: NavigationState = this;
-    return state;
+    return this;
   }
 }
 
@@ -84,11 +101,15 @@ let _nextRouteStackID = 0;
  * of the routes. This data structure is implemented as immutable data
  * and mutation (e.g. push, pop...etc) will yields a new instance.
  */
-class RouteStack  {
+class RouteStack {
   _index: number;
   _key: string;
   _routeNodes: Array<RouteNode>;
 
+  static getRouteByNavigationState(navigationState: NavigationState): any {
+    return RouteNode.fromNavigationState(navigationState).route;
+  }
+
   constructor(index: number, routes: Array<any>) {
     invariant(
       routes.length > 0,
@@ -97,7 +118,7 @@ class RouteStack  {
 
     invariant(
       index > -1 && index <= routes.length - 1,
-      'index out of bound'
+      'RouteStack: index out of bound'
     );
 
 
@@ -170,7 +191,7 @@ class RouteStack  {
     }
 
     for (let ii = 0, jj = this._routeNodes.length; ii < jj; ii++) {
-      let node = this._routeNodes[ii];
+      const node = this._routeNodes[ii];
       if (node.route === route) {
         return ii;
       }
@@ -213,16 +234,29 @@ class RouteStack  {
    * excluding the last index in this stack.
    */
   pop(): RouteStack {
-    invariant(
-      this._routeNodes.length > 1,
-      'should not pop routeNodes stack to empty'
-    );
+    if (this._routeNodes.length <= 1) {
+      return this;
+    }
 
     // When popping, removes the rest of the routes past the current index.
     const routeNodes = this._routeNodes.slice(0, this._index);
     return this._update(routeNodes.length - 1, routeNodes);
   }
 
+  popToRoute(route: any): RouteStack {
+    const index = this.indexOf(route);
+    invariant(
+      index > -1,
+      'Calling popToRoute for a route that doesn\'t exist!'
+    );
+    return this.slice(0, index + 1);
+  }
+
+  jumpTo(route: any): RouteStack {
+    const index = this.indexOf(route);
+    return this.jumpToIndex(index);
+  }
+
   jumpToIndex(index: number): RouteStack {
     invariant(
       index > -1 && index < this._routeNodes.length,
@@ -232,6 +266,22 @@ class RouteStack  {
     return this._update(index, this._routeNodes);
   }
 
+  jumpForward(): RouteStack {
+    const index = this._index + 1;
+    if (index >= this._routeNodes.length) {
+      return this;
+    }
+    return this._update(index, this._routeNodes);
+  }
+
+  jumpBack(): RouteStack {
+    const index = this._index - 1;
+    if (index < 0) {
+      return this;
+    }
+    return this._update(index, this._routeNodes);
+  }
+
   /**
    * Replace a route in the navigation stack.
    *
@@ -250,20 +300,59 @@ class RouteStack  {
 
     invariant(this.indexOf(route) === -1, 'route must be unique');
 
+    const size = this._routeNodes.length;
     if (index < 0) {
-      index += this._routeNodes.length;
+      index += size;
     }
 
-    invariant(
-      index > -1 && index < this._routeNodes.length,
-      'replaceAtIndex: index out of bound'
-    );
+    if (index < 0 || index >= size) {
+      return this;
+    }
 
     const routeNodes = this._routeNodes.slice(0);
     routeNodes[index] = new RouteNode(route);
     return this._update(index, routeNodes);
   }
 
+  replacePreviousAndPop(route: any): RouteStack {
+    if (this._index < 1) {
+      // stack is too small.
+      return this;
+    }
+
+    const index = this.indexOf(route);
+    invariant(
+      index === -1 || index === this._index - 1,
+      'route already exists in the stack'
+    );
+
+    return this.replaceAtIndex(this._index - 1, route).popToRoute(route);
+  }
+
+  // Reset
+
+  /**
+   * Replace the current active route with a new route, and pops out
+   * the rest routes after it.
+   */
+  resetTo(route: any): RouteStack {
+    invariant(!isRouteEmpty(route), 'Must supply route');
+    const index = this.indexOf(route);
+    if (index === this._index) {
+      // Already has this active route.
+      return this;
+    }
+    invariant(index === -1, 'route already exists in the stack');
+    const routeNodes = this._routeNodes.slice(0, this._index);
+    routeNodes.push(new RouteNode(route));
+    return this._update(routeNodes.length - 1, routeNodes);
+  }
+
+  resetRoutes(routes: Array<any>): RouteStack {
+    const index = routes.length - 1;
+    return new RouteStack(index, routes);
+  }
+
   // Iterations
   forEach(callback: IterationCallback, context: ?Object): void {
     this._routeNodes.forEach((node, index) => {

Libraries/CustomComponents/NavigationExperimental/NavigationPagerPanResponder.js

@@ -0,0 +1,222 @@
+/**
+ * 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 NavigationPagerPanResponder
+ * @flow
+ * @typechecks
+ */
+'use strict';
+
+const Animated = require('Animated');
+const NavigationAbstractPanResponder = require('NavigationAbstractPanResponder');
+const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
+
+const clamp = require('clamp');
+
+import type {
+  NavigationPanPanHandlers,
+  NavigationSceneRendererProps,
+} from 'NavigationTypeDefinition';
+
+import type {
+  NavigationGestureDirection,
+} from 'NavigationCardStackPanResponder';
+
+
+
+/**
+ * Primitive gesture directions.
+ */
+const {
+  ANIMATION_DURATION,
+  DISTANCE_THRESHOLD,
+  POSITION_THRESHOLD,
+  RESPOND_THRESHOLD,
+  Directions,
+} = NavigationCardStackPanResponder;
+
+/**
+ * Primitive gesture actions.
+ */
+const Actions = {
+  JUMP_BACK: {type: 'jump_back'},
+  JUMP_FORWARD: {type: 'jump_forward'},
+};
+
+/**
+ * Pan responder that handles gesture for a card in the cards list.
+ *
+ * +-------------+-------------+-------------+
+ * |             |             |             |
+ * |             |             |             |
+ * |             |             |             |
+ * |    Next     |   Focused   |  Previous   |
+ * |    Card     |    Card     |    Card     |
+ * |             |             |             |
+ * |             |             |             |
+ * |             |             |             |
+ * +-------------+-------------+-------------+
+ */
+class NavigationPagerPanResponder extends NavigationAbstractPanResponder {
+
+  _isResponding: boolean;
+  _isVertical: boolean;
+  _props: NavigationSceneRendererProps;
+  _startValue: number;
+
+  constructor(
+    direction: NavigationGestureDirection,
+    props: NavigationSceneRendererProps,
+  ) {
+    super();
+    this._isResponding = false;
+    this._isVertical = direction === Directions.VERTICAL;
+    this._props = props;
+    this._startValue = 0;
+  }
+
+  onMoveShouldSetPanResponder(event: any, gesture: any): boolean {
+    const props = this._props;
+
+    if (props.navigationState.index !== props.scene.index) {
+      return false;
+    }
+
+    const layout = props.layout;
+    const isVertical = this._isVertical;
+    const axis = isVertical ? 'dy' : 'dx';
+    const index = props.navigationState.index;
+    const distance = isVertical ?
+      layout.height.__getValue() :
+      layout.width.__getValue();
+
+    return (
+      Math.abs(gesture[axis]) > RESPOND_THRESHOLD &&
+      distance > 0 &&
+      index > 0
+    );
+  }
+
+  onPanResponderGrant(): void {
+    this._isResponding = false;
+    this._props.position.stopAnimation((value: number) => {
+      this._isResponding = true;
+      this._startValue = value;
+    });
+  }
+
+  onPanResponderMove(event: any, gesture: any): void {
+    if (!this._isResponding) {
+      return;
+    }
+
+    const {
+      layout,
+      navigationState,
+      position,
+      scenes,
+    } = this._props;
+
+    const isVertical = this._isVertical;
+    const axis = isVertical ? 'dy' : 'dx';
+    const index = navigationState.index;
+    const distance = isVertical ?
+      layout.height.__getValue() :
+      layout.width.__getValue();
+
+    const prevIndex = Math.max(
+      0,
+      index - 1,
+    );
+
+    const nextIndex = Math.min(
+      index + 1,
+      scenes.length - 1,
+    );
+
+    const value = clamp(
+      prevIndex,
+      this._startValue - (gesture[axis] / distance),
+      nextIndex,
+    );
+
+    position.setValue(value);
+  }
+
+  onPanResponderRelease(event: any, gesture: any): void {
+    if (!this._isResponding) {
+      return;
+    }
+
+    this._isResponding = false;
+
+    const {
+      navigationState,
+      onNavigate,
+      position,
+    } = this._props;
+
+    const isVertical = this._isVertical;
+    const axis = isVertical ? 'dy' : 'dx';
+    const index = navigationState.index;
+    const distance = gesture[axis];
+
+    position.stopAnimation((value: number) => {
+      this._reset();
+      if (
+        distance > DISTANCE_THRESHOLD  ||
+        value <= index - POSITION_THRESHOLD
+      ) {
+        onNavigate(Actions.JUMP_BACK);
+        return;
+      }
+
+      if (
+        distance < -DISTANCE_THRESHOLD ||
+        value >= index  + POSITION_THRESHOLD
+      ) {
+        onNavigate(Actions.JUMP_FORWARD);
+      }
+    });
+  }
+
+  onPanResponderTerminate(): void {
+    this._isResponding = false;
+    this._reset();
+  }
+
+  _reset(): void {
+    const props = this._props;
+    Animated.timing(
+      props.position,
+      {
+        toValue: props.navigationState.index,
+        duration: ANIMATION_DURATION,
+      }
+    ).start();
+  }
+}
+
+function createPanHandlers(
+  direction: NavigationGestureDirection,
+  props: NavigationSceneRendererProps,
+): NavigationPanPanHandlers {
+  const responder = new NavigationPagerPanResponder(direction, props);
+  return responder.panHandlers;
+}
+
+function forHorizontal(
+  props: NavigationSceneRendererProps,
+): NavigationPanPanHandlers {
+  return createPanHandlers(Directions.HORIZONTAL, props);
+}
+
+module.exports = {
+  Actions,
+  forHorizontal,
+};

Libraries/CustomComponents/NavigationExperimental/NavigationPagerStyleInterpolator.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * Facebook, Inc. ("Facebook") owns all right, title and interest, including
+ * all intellectual property and other proprietary rights, in and to the React
+ * Native CustomComponents software (the "Software").  Subject to your
+ * compliance with these terms, you are hereby granted a non-exclusive,
+ * worldwide, royalty-free copyright license to (1) use and copy the Software;
+ * and (2) reproduce and distribute the Software as part of your own software
+ * ("Your Software").  Facebook reserves all rights not expressly granted to
+ * you in this license agreement.
+ *
+ * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
+ * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
+ * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
+ * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * @providesModule NavigationPagerStyleInterpolator
+ * @flow
+ */
+'use strict';
+
+import type  {
+  NavigationSceneRendererProps,
+} from 'NavigationTypeDefinition';
+
+/**
+ * Utility that builds the style for the card in the cards list.
+ *
+ * +-------------+-------------+-------------+
+ * |             |             |             |
+ * |             |             |             |
+ * |             |             |             |
+ * |    Next     |   Focused   |  Previous   |
+ * |    Card     |    Card     |    Card     |
+ * |             |             |             |
+ * |             |             |             |
+ * |             |             |             |
+ * +-------------+-------------+-------------+
+ */
+
+function forHorizontal(props: NavigationSceneRendererProps): Object {
+  const {
+    layout,
+    position,
+    scene,
+  } = props;
+
+  const index = scene.index;
+  const inputRange = [index - 1, index, index + 1];
+
+  const width = layout.initWidth;
+  const translateX = position.interpolate({
+    inputRange,
+    outputRange: [width, 0, -width],
+  });
+
+  return {
+    opacity : 1,
+    shadowColor: 'transparent',
+    shadowRadius: 0,
+    transform: [
+      { scale: 1 },
+      { translateX },
+      { translateY: 0 },
+    ],
+  };
+}
+
+module.exports = {
+  forHorizontal,
+};

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

@@ -1,5 +1,10 @@
 /**
- * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * Facebook, Inc. ("Facebook") owns all right, title and interest, including
  * all intellectual property and other proprietary rights, in and to the React
@@ -24,10 +29,7 @@
  */
 'use strict';
 
-
-jest
- .autoMockOff()
- .mock('ErrorUtils');
+jest.dontMock('NavigationLegacyNavigatorRouteStack');
 
 const NavigationLegacyNavigatorRouteStack = require('NavigationLegacyNavigatorRouteStack');
 
@@ -73,13 +75,13 @@ describe('NavigationLegacyNavigatorRouteStack:', () => {
   });
 
   it('throws at index out of bound', () => {
-    expect(() => {
-      new NavigationLegacyNavigatorRouteStack(-1, ['a', 'b']);
-    }).toThrow();
+    expect(
+      () => new NavigationLegacyNavigatorRouteStack(-1, ['a', 'b'])
+    ).toThrow();
 
-    expect(() => {
-      new NavigationLegacyNavigatorRouteStack(100, ['a', 'b']);
-    }).toThrow();
+    expect(
+      () => new NavigationLegacyNavigatorRouteStack(100, ['a', 'b'])
+    ).toThrow();
   });
 
   it('finds index', () => {
@@ -264,11 +266,20 @@ describe('NavigationLegacyNavigatorRouteStack:', () => {
     expect(stack2.index).toBe(0);
   });
 
-  it('throws when popping to empty stack', () => {
-    expect(() => {
-      const stack = new NavigationLegacyNavigatorRouteStack(0, ['a']);
-      stack.pop();
-    }).toThrow();
+  it('does nothing while popping to empty', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(0, ['a']);
+    expect(stack.pop()).toBe(stack);
+    expect(stack.pop().pop()).toBe(stack);
+  });
+
+  it('pops to route', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(1, ['a', 'b', 'c']);
+    expect(stack.popToRoute('b').toArray()).toEqual(['a', 'b']);
+    expect(stack.popToRoute('b').index).toBe(1);
+    expect(stack.popToRoute('a').toArray()).toEqual(['a']);
+    expect(stack.popToRoute('a').index).toBe(0);
+
+    expect(() => {stack.popToRoute('x');}).toThrow();
   });
 
   // Jump
@@ -292,6 +303,24 @@ describe('NavigationLegacyNavigatorRouteStack:', () => {
     }).toThrow();
   });
 
+  it('jumps to route', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(0, ['a', 'b']);
+    expect(stack.jumpTo('b').index).toBe(1);
+  });
+
+  it('jumps backward', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(1, ['a', 'b']);
+    expect(stack.jumpBack().index).toBe(0);
+    expect(stack.jumpBack().jumpBack().jumpBack().index).toBe(0);
+  });
+
+  it('jumps forward', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(0, ['a', 'b']);
+    expect(stack.jumpForward().index).toBe(1);
+    expect(stack.jumpForward().jumpForward().jumpForward().index).toBe(1);
+  });
+
+
   // Replace
   it('replaces route at index', () => {
     const stack1 = new NavigationLegacyNavigatorRouteStack(1, ['a', 'b']);
@@ -318,11 +347,40 @@ describe('NavigationLegacyNavigatorRouteStack:', () => {
     }).toThrow();
   });
 
-  it('throws when replacing at index out of bound', () => {
-    expect(() => {
-      const stack = new NavigationLegacyNavigatorRouteStack(1, ['a', 'b']);
-      stack.replaceAtIndex(100, 'x');
-    }).toThrow();
+  it('does nothing when replacing at index out of bound', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(1, ['a', 'b']);
+    expect(stack.replaceAtIndex(100, 'x')).toBe(stack);
+    expect(stack.replaceAtIndex(-100, 'x')).toBe(stack);
+  });
+
+  it('replaces previous and pop route', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(1, ['a', 'b', 'c']);
+    expect(stack.replacePreviousAndPop('x').toArray()).toEqual(['x']);
+    expect(stack.replacePreviousAndPop('x').index).toBe(0);
+  });
+
+  it('does nothing when there is nothing to replace', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(0, ['a', 'b', 'c']);
+    expect(stack.replacePreviousAndPop('x')).toBe(stack);
+  });
+
+  // Reset
+
+  it('resets route', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(1, ['a', 'b', 'c']);
+    expect(stack.resetTo('b')).toBe(stack);
+
+    expect(stack.resetTo('x').toArray()).toEqual(['a', 'x']);
+    expect(stack.resetTo('x').index).toBe(1);
+
+    expect(() => {stack.resetTo(null);}).toThrow();
+    expect(() => {stack.resetTo('a');}).toThrow();
+  });
+
+  it('resets routes', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(0, ['a']);
+    expect(stack.resetRoutes(['x', 'y']).toArray()).toEqual(['x', 'y']);
+    expect(stack.resetRoutes(['x', 'y']).index).toBe(1);
   });
 
   // Iteration
@@ -386,4 +444,11 @@ describe('NavigationLegacyNavigatorRouteStack:', () => {
       ],
     });
   });
+
+  it('coverts from navigation state', () => {
+    const stack = new NavigationLegacyNavigatorRouteStack(0, ['a', 'b']);
+    const state = stack.toNavigationState().children[0];
+    const route = NavigationLegacyNavigatorRouteStack.getRouteByNavigationState(state);
+    expect(route).toBe('a');
+  });
 });

Libraries/CustomComponents/Navigator/Navigator.js

@@ -195,6 +195,20 @@ var Navigator = React.createClass({
      * ```
      * (route, routeStack) => Navigator.SceneConfigs.FloatFromRight
      * ```
+     *
+     * Available options are:
+     *
+     *  - Navigator.SceneConfigs.PushFromRight (default)
+     *  - Navigator.SceneConfigs.FloatFromRight
+     *  - Navigator.SceneConfigs.FloatFromLeft
+     *  - Navigator.SceneConfigs.FloatFromBottom
+     *  - Navigator.SceneConfigs.FloatFromBottomAndroid
+     *  - Navigator.SceneConfigs.FadeAndroid
+     *  - Navigator.SceneConfigs.HorizontalSwipeJump
+     *  - Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
+     *  - Navigator.SceneConfigs.VerticalUpSwipeJump
+     *  - Navigator.SceneConfigs.VerticalDownSwipeJump
+     *
      */
     configureScene: PropTypes.func,
 
@@ -236,8 +250,9 @@ var Navigator = React.createClass({
     onDidFocus: PropTypes.func,
 
     /**
-     * Optionally provide a navigation bar that persists across scene
-     * transitions
+     * Optionally provide a component as navigation bar that persists across scene
+     * transitions. The component will receive two props: `navigator` and `navState`.
+     * It will be rerendered when the routes change.
      */
     navigationBar: PropTypes.node,
 
@@ -371,6 +386,7 @@ var Navigator = React.createClass({
     }, () => {
       this._handleSpringUpdate();
       this._navBar && this._navBar.immediatelyRefresh();
+      this._emitDidFocus(this.state.routeStack[this.state.presentedIndex]);
     });
   },
 

Libraries/Devtools/setupDevtools.js

@@ -40,7 +40,7 @@ function setupDevtools() {
   function handleClose() {
     if (!hasClosed) {
       hasClosed = true;
-      setTimeout(setupDevtools, 200);
+      setTimeout(setupDevtools, 2000);
       closeListeners.forEach(fn => fn());
     }
   }

Libraries/Experimental/Incremental.js

@@ -0,0 +1,175 @@
+/**
+ * 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 Incremental
+ * @flow
+ */
+'use strict';
+
+const InteractionManager = require('InteractionManager');
+const React = require('React');
+
+const DEBUG = false;
+
+/**
+ * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
+ * not be reliably announced.  The whole thing might be deleted, who knows? Use
+ * at your own risk.
+ *
+ * React Native helps make apps smooth by doing all the heavy lifting off the
+ * main thread, in JavaScript.  That works great a lot of the time, except that
+ * heavy operations like rendering may block the JS thread from responding
+ * quickly to events like taps, making the app feel sluggish.
+ *
+ * `<Incremental>` solves this by slicing up rendering into chunks that are
+ * spread across multiple event loops. Expensive components can be sliced up
+ * recursively by wrapping pieces of them and their decendents in
+ * `<Incremental>` components. `<IncrementalGroup>` can be used to make sure
+ * everything in the group is rendered recursively before calling `onDone` and
+ * moving on to another sibling group (e.g. render one row at a time, even if
+ * rendering the top level row component produces more `<Incremental>` chunks).
+ * `<IncrementalPresenter>` is a type of `<IncrementalGroup>` that keeps it's
+ * children invisible and out of the layout tree until all rendering completes
+ * recursively. This means the group will be presented to the user as one unit,
+ * rather than pieces popping in sequentially.
+ *
+ * `<Incremental>` only affects initial render - `setState` and other render
+ * updates are unaffected.
+ *
+ * The chunks are rendered sequentially using the `InteractionManager` queue,
+ * which means that rendering will pause if it's interrupted by an interaction,
+ * such as an animation or gesture.
+ *
+ * Note there is some overhead, so you don't want to slice things up too much.
+ * A target of 100-200ms of total work per event loop on old/slow devices might
+ * be a reasonable place to start.
+ *
+ * Below is an example that will incrementally render all the parts of `Row` one
+ * first, then present them together, then repeat the process for `Row` two, and
+ * so on:
+ *
+ *   render: function() {
+ *     return (
+ *       <ScrollView>
+ *         {Array(10).fill().map((rowIdx) => (
+ *           <IncrementalPresenter key={rowIdx}>
+ *             <Row>
+ *               {Array(20).fill().map((widgetIdx) => (
+ *                 <Incremental key={widgetIdx}>
+ *                   <SlowWidget />
+ *                 </Incremental>
+ *               ))}
+ *             </Row>
+ *           </IncrementalPresenter>
+ *         ))}
+ *       </ScrollView>
+ *     );
+ *   };
+ *
+ * If SlowWidget takes 30ms to render, then without `Incremental`, this would
+ * block the JS thread for at least `10 * 20 * 30ms = 6000ms`, but with
+ * `Incremental` it will probably not block for more than 50-100ms at a time,
+ * allowing user interactions to take place which might even unmount this
+ * component, saving us from ever doing the remaining rendering work.
+ */
+export type Props = {
+ /**
+  * Called when all the decendents have finished rendering and mounting
+  * recursively.
+  */
+ onDone?: () => void;
+ /**
+  * Tags instances and associated tasks for easier debugging.
+  */
+ name: string;
+ children: any;
+};
+class Incremental extends React.Component {
+  props: Props;
+  state: {
+    doIncrementalRender: boolean;
+  };
+  context: Context;
+  _incrementId: number;
+  _mounted: boolean;
+  _rendered: boolean;
+
+  constructor(props: Props, context: Context) {
+    super(props, context);
+    this._mounted = false;
+    this.state = {
+      doIncrementalRender: false,
+    };
+  }
+
+  getName(): string {
+    var ctx = this.context.incrementalGroup || {};
+    return ctx.groupId + ':' + this._incrementId + '-' + this.props.name;
+  }
+
+  componentWillMount() {
+    var ctx = this.context.incrementalGroup;
+    if (!ctx) {
+      return;
+    }
+    this._incrementId = ++(ctx.incrementalCount);
+    InteractionManager.runAfterInteractions({
+      name: 'Incremental:' + this.getName(),
+      gen: () => new Promise(resolve => {
+        if (!this._mounted) {
+          resolve();
+          return;
+        }
+        DEBUG && console.log('set doIncrementalRender for ' + this.getName());
+        this.setState({doIncrementalRender: true}, resolve);
+      }),
+    }).then(() => {
+      DEBUG && console.log('call onDone for ' + this.getName());
+      this._mounted && this.props.onDone && this.props.onDone();
+    });
+  }
+
+  render(): ?ReactElement {
+    if (this._rendered || // Make sure that once we render once, we stay rendered even if incrementalGroupEnabled gets flipped.
+        !this.context.incrementalGroupEnabled ||
+        this.state.doIncrementalRender) {
+      DEBUG && console.log('render ' + this.getName());
+      this._rendered = true;
+      return this.props.children;
+    }
+    return null;
+  }
+
+  componentDidMount() {
+    this._mounted = true;
+    if (!this.context.incrementalGroup) {
+      this.props.onDone && this.props.onDone();
+    }
+  }
+
+  componentWillUnmount() {
+    this._mounted = false;
+  }
+}
+Incremental.defaultProps = {
+  name: '',
+};
+Incremental.contextTypes = {
+  incrementalGroup: React.PropTypes.object,
+  incrementalGroupEnabled: React.PropTypes.bool,
+};
+
+export type Context = {
+  incrementalGroupEnabled: boolean;
+  incrementalGroup: ?{
+    groupId: string;
+    incrementalCount: number;
+  };
+};
+
+module.exports = Incremental;

Libraries/Experimental/IncrementalExample.js

@@ -0,0 +1,197 @@
+/**
+ * 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.
+ *
+ * @providesModule IncrementalExample
+ * @flow
+ */
+'use strict';
+
+const React = require('react-native');
+const {
+  InteractionManager,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = React;
+
+const Incremental = require('Incremental');
+const IncrementalGroup = require('IncrementalGroup');
+const IncrementalPresenter = require('IncrementalPresenter');
+
+const JSEventLoopWatchdog = require('JSEventLoopWatchdog');
+const StaticContainer = require('StaticContainer.react');
+
+const performanceNow = require('performanceNow');
+
+InteractionManager.setDeadline(1000);
+JSEventLoopWatchdog.install({thresholdMS: 200});
+
+const NUM_ITEMS = 20;
+
+let totalWidgets = 0;
+
+class SlowWidget extends React.Component {
+  state: {ctorTimestamp: number, timeToMount: number};
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      ctorTimestamp: performanceNow(),
+      timeToMount: 0,
+    };
+  }
+  render() {
+    this.state.timeToMount === 0 && burnCPU(20);
+    return (
+      <View style={styles.widgetContainer}>
+        <Text style={styles.widgetText}>
+          {`${this.state.timeToMount || '?'} ms`}
+        </Text>
+      </View>
+    );
+  }
+  componentDidMount() {
+    const timeToMount = performanceNow() - this.state.ctorTimestamp;
+    this.setState({timeToMount});
+    totalWidgets++;
+  }
+}
+
+let imHandle;
+function startInteraction() {
+  imHandle = InteractionManager.createInteractionHandle();
+}
+function stopInteraction() {
+  InteractionManager.clearInteractionHandle(imHandle);
+}
+
+function Block(props: Object) {
+  const IncrementalContainer = props.stream ? IncrementalGroup : IncrementalPresenter;
+  return (
+    <IncrementalContainer name={'b_' + props.idx}>
+      <TouchableOpacity
+        onPressIn={startInteraction}
+        onPressOut={stopInteraction}>
+        <View style={styles.block}>
+          <Text>
+            {props.idx + ': ' + (props.stream ? 'Streaming' : 'Presented')}
+          </Text>
+          {props.children}
+        </View>
+      </TouchableOpacity>
+    </IncrementalContainer>
+  );
+}
+
+const Row = (props: Object) => <View style={styles.row} {...props} />;
+
+class IncrementalExample extends React.Component {
+  static title = '<Incremental*>';
+  static description = 'Enables incremental rendering of complex components.';
+  start: number;
+  state: {stats: ?Object};
+  constructor(props: mixed, context: mixed) {
+    super(props, context);
+    this.start = performanceNow();
+    this.state = {
+      stats: null,
+    };
+    (this: any)._onDone = this._onDone.bind(this);
+  }
+  _onDone() {
+    const onDoneElapsed = performanceNow() - this.start;
+    setTimeout(() => {
+      const stats = {
+        onDoneElapsed,
+        totalWidgets,
+        ...JSEventLoopWatchdog.getStats(),
+        setTimeoutElapsed: performanceNow() - this.start,
+      };
+      stats.avgStall = stats.totalStallTime / stats.stallCount;
+      this.setState({stats});
+      console.log('onDone:', stats);
+    }, 0);
+  }
+  render(): ReactElement {
+    return (
+      <IncrementalGroup
+        disabled={false}
+        name="root"
+        onDone={this._onDone}>
+        <ScrollView style={styles.scrollView}>
+          <Text style={styles.headerText}>
+            Press and hold on a row to pause rendering.
+          </Text>
+          {this.state.stats && <Text>
+            Finished: {JSON.stringify(this.state.stats, null, 2)}
+          </Text>}
+          {Array(8).fill().map((_, blockIdx) => {
+            return (
+              <Block key={blockIdx} idx={blockIdx} stream={blockIdx < 2}>
+                {Array(4).fill().map((_b, rowIdx) => (
+                  <Row key={rowIdx}>
+                    {Array(14).fill().map((_c, widgetIdx) => (
+                      <Incremental key={widgetIdx} name={'w_' + widgetIdx}>
+                        <SlowWidget idx={widgetIdx} />
+                      </Incremental>
+                    ))}
+                  </Row>
+                ))}
+              </Block>
+            );
+          })}
+        </ScrollView>
+      </IncrementalGroup>
+    );
+  }
+}
+
+function burnCPU(milliseconds) {
+  const start = performanceNow();
+  while (performanceNow() < (start + milliseconds)) {}
+}
+
+var styles = StyleSheet.create({
+  scrollView: {
+    margin: 10,
+    backgroundColor: 'white',
+    flex: 1,
+  },
+  headerText: {
+    fontSize: 20,
+    margin: 10,
+  },
+  block: {
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: '#a52a2a',
+    padding: 14,
+    margin: 5,
+    backgroundColor: 'white',
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  widgetContainer: {
+    backgroundColor: '#dddddd',
+    padding: 2,
+    margin: 2,
+  },
+  widgetText: {
+    color: 'black',
+    fontSize: 4,
+  },
+});
+
+module.exports = IncrementalExample;