Updates from Thu 26 Mar

- [React Native] Fix incorrect if-statement in RCTGeolocation | Alex Akers
- [ReactNative] s/ReactKit/React/g | Tadeu Zagallo
- [React Native] View border support | Nick Lockwood
- [Assets] Allow scripts to override assetRoots | Amjad Masad
- [ReactNative] Navigator docs | Eric Vicenti
- [ReactNative] License headers and renaming | Eric Vicenti
- [React Native] Add CocoaPods spec | Tadeu Zagallo
- Added explicit types for all view properties | Nick Lockwood
- [ReactNative] s/ReactNavigator/Navigator/ | Tadeu Zagallo
- [ReactNative] Add copyright header for code copied from the jQuery UI project | Martin Konicek
- [ReactNative] PanResponder documentation | Eric Vicenti

Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBar.js

@@ -0,0 +1,244 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule NavigatorBreadcrumbNavigationBar
+ */
+'use strict';
+
+var NavigatorBreadcrumbNavigationBarStyles = require('NavigatorBreadcrumbNavigationBarStyles');
+var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
+var React = require('React');
+var StaticContainer = require('StaticContainer.react');
+var StyleSheet = require('StyleSheet');
+var View = require('View');
+
+var Interpolators = NavigatorBreadcrumbNavigationBarStyles.Interpolators;
+var PropTypes = React.PropTypes;
+
+/**
+ * Reusable props objects.
+ */
+var CRUMB_PROPS = Interpolators.map(() => {return {style: {}};});
+var ICON_PROPS = Interpolators.map(() => {return {style: {}};});
+var SEPARATOR_PROPS = Interpolators.map(() => {return {style: {}};});
+var TITLE_PROPS = Interpolators.map(() => {return {style: {}};});
+var RIGHT_BUTTON_PROPS = Interpolators.map(() => {return {style: {}};});
+
+
+/**
+ * TODO: Rename `observedTopOfStack` to `presentedIndex` in `NavigationStack`.
+ */
+var navStatePresentedIndex = function(navState) {
+  if (navState.presentedIndex !== undefined) {
+    return navState.presentedIndex;
+  } else {
+    return navState.observedTopOfStack;
+  }
+};
+
+
+/**
+ * The first route is initially rendered using a different style than all
+ * future routes.
+ *
+ * @param {number} index Index of breadcrumb.
+ * @return {object} Style config for initial rendering of index.
+ */
+var initStyle = function(index, presentedIndex) {
+  return index === presentedIndex ? NavigatorBreadcrumbNavigationBarStyles.Center[index] :
+    index < presentedIndex ? NavigatorBreadcrumbNavigationBarStyles.Left[index] :
+    NavigatorBreadcrumbNavigationBarStyles.Right[index];
+};
+
+var NavigatorBreadcrumbNavigationBar = React.createClass({
+  propTypes: {
+    navigator: PropTypes.shape({
+      push: PropTypes.func,
+      pop: PropTypes.func,
+      replace: PropTypes.func,
+      popToRoute: PropTypes.func,
+      popToTop: PropTypes.func,
+    }),
+    navigationBarRouteMapper: PropTypes.shape({
+      rightContentForRoute: PropTypes.func,
+      titleContentForRoute: PropTypes.func,
+      iconForRoute: PropTypes.func,
+    }),
+    navigationBarStyles: PropTypes.number,
+  },
+
+  statics: {
+    Styles: NavigatorBreadcrumbNavigationBarStyles,
+  },
+
+  _updateIndexProgress: function(progress, index, fromIndex, toIndex) {
+    var amount = toIndex > fromIndex ? progress : (1 - progress);
+    var oldDistToCenter = index - fromIndex;
+    var newDistToCenter = index - toIndex;
+    var interpolate;
+    if (oldDistToCenter > 0 && newDistToCenter === 0 ||
+        newDistToCenter > 0 && oldDistToCenter === 0) {
+      interpolate = Interpolators[index].RightToCenter;
+    } else if (oldDistToCenter < 0 && newDistToCenter === 0 ||
+               newDistToCenter < 0 && oldDistToCenter === 0) {
+      interpolate = Interpolators[index].CenterToLeft;
+    } else if (oldDistToCenter === newDistToCenter) {
+      interpolate = Interpolators[index].RightToCenter;
+    } else {
+      interpolate = Interpolators[index].RightToLeft;
+    }
+
+    if (interpolate.Crumb(CRUMB_PROPS[index].style, amount)) {
+      this.refs['crumb_' + index].setNativeProps(CRUMB_PROPS[index]);
+    }
+    if (interpolate.Icon(ICON_PROPS[index].style, amount)) {
+      this.refs['icon_' + index].setNativeProps(ICON_PROPS[index]);
+    }
+    if (interpolate.Separator(SEPARATOR_PROPS[index].style, amount)) {
+      this.refs['separator_' + index].setNativeProps(SEPARATOR_PROPS[index]);
+    }
+    if (interpolate.Title(TITLE_PROPS[index].style, amount)) {
+      this.refs['title_' + index].setNativeProps(TITLE_PROPS[index]);
+    }
+    var right = this.refs['right_' + index];
+    if (right &&
+        interpolate.RightItem(RIGHT_BUTTON_PROPS[index].style, amount)) {
+      right.setNativeProps(RIGHT_BUTTON_PROPS[index]);
+    }
+  },
+
+  updateProgress: function(progress, fromIndex, toIndex) {
+    var max = Math.max(fromIndex, toIndex);
+    var min = Math.min(fromIndex, toIndex);
+    for (var index = min; index <= max; index++) {
+      this._updateIndexProgress(progress, index, fromIndex, toIndex);
+    }
+  },
+
+  render: function() {
+    var navState = this.props.navState;
+    var icons = navState && navState.routeStack.map(this._renderOrReturnBreadcrumb);
+    var titles = navState.routeStack.map(this._renderOrReturnTitle);
+    var buttons = navState.routeStack.map(this._renderOrReturnRightButton);
+    return (
+      <View style={[styles.breadCrumbContainer, this.props.navigationBarStyles]}>
+        {titles}
+        {icons}
+        {buttons}
+      </View>
+    );
+  },
+
+  _renderOrReturnBreadcrumb: function(route, index) {
+    var uid = this.props.navState.idStack[index];
+    var navBarRouteMapper = this.props.navigationBarRouteMapper;
+    var navOps = this.props.navigator;
+    var alreadyRendered = this.refs['crumbContainer' + uid];
+    if (alreadyRendered) {
+      // Don't bother re-calculating the children
+      return (
+        <StaticContainer
+          ref={'crumbContainer' + uid}
+          key={'crumbContainer' + uid}
+          shouldUpdate={false}
+        />
+      );
+    }
+    var firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));
+    return (
+      <StaticContainer
+        ref={'crumbContainer' + uid}
+        key={'crumbContainer' + uid}
+        shouldUpdate={false}>
+        <View ref={'crumb_' + index} style={firstStyles.Crumb}>
+          <View ref={'icon_' + index} style={firstStyles.Icon}>
+            {navBarRouteMapper.iconForRoute(route, navOps)}
+          </View>
+          <View ref={'separator_' + index} style={firstStyles.Separator}>
+            {navBarRouteMapper.separatorForRoute(route, navOps)}
+          </View>
+        </View>
+      </StaticContainer>
+    );
+  },
+
+  _renderOrReturnTitle: function(route, index) {
+    var navState = this.props.navState;
+    var uid = navState.idStack[index];
+    var alreadyRendered = this.refs['titleContainer' + uid];
+    if (alreadyRendered) {
+      // Don't bother re-calculating the children
+      return (
+        <StaticContainer
+          ref={'titleContainer' + uid}
+          key={'titleContainer' + uid}
+          shouldUpdate={false}
+        />
+      );
+    }
+    var navBarRouteMapper = this.props.navigationBarRouteMapper;
+    var titleContent = navBarRouteMapper.titleContentForRoute(
+      navState.routeStack[index],
+      this.props.navigator
+    );
+    var firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));
+    return (
+      <StaticContainer
+        ref={'titleContainer' + uid}
+        key={'titleContainer' + uid}
+        shouldUpdate={false}>
+        <View ref={'title_' + index} style={firstStyles.Title}>
+          {titleContent}
+        </View>
+      </StaticContainer>
+    );
+  },
+
+  _renderOrReturnRightButton: function(route, index) {
+    var navState = this.props.navState;
+    var navBarRouteMapper = this.props.navigationBarRouteMapper;
+    var uid = navState.idStack[index];
+    var alreadyRendered = this.refs['rightContainer' + uid];
+    if (alreadyRendered) {
+      // Don't bother re-calculating the children
+      return (
+        <StaticContainer
+          ref={'rightContainer' + uid}
+          key={'rightContainer' + uid}
+          shouldUpdate={false}
+        />
+      );
+    }
+    var rightContent = navBarRouteMapper.rightContentForRoute(
+      navState.routeStack[index],
+      this.props.navigator
+    );
+    if (!rightContent) {
+      return null;
+    }
+    var firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));
+    return (
+      <StaticContainer
+        ref={'rightContainer' + uid}
+        key={'rightContainer' + uid}
+        shouldUpdate={false}>
+        <View ref={'right_' + index} style={firstStyles.RightItem}>
+          {rightContent}
+        </View>
+      </StaticContainer>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  breadCrumbContainer: {
+    overflow: 'hidden',
+    position: 'absolute',
+    height: NavigatorNavigationBarStyles.General.TotalNavHeight,
+    top: 0,
+    left: 0,
+    width: NavigatorNavigationBarStyles.General.ScreenWidth,
+  },
+});
+
+module.exports = NavigatorBreadcrumbNavigationBar;

Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBarStyles.ios.js

@@ -0,0 +1,228 @@
+/**
+ * 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 NavigatorBreadcrumbNavigationBarStyles
+ */
+'use strict';
+
+var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
+
+var buildStyleInterpolator = require('buildStyleInterpolator');
+var merge = require('merge');
+
+var SCREEN_WIDTH = NavigatorNavigationBarStyles.General.ScreenWidth;
+var STATUS_BAR_HEIGHT = NavigatorNavigationBarStyles.General.StatusBarHeight;
+var NAV_BAR_HEIGHT = NavigatorNavigationBarStyles.General.NavBarHeight;
+
+var SPACING = 4;
+var ICON_WIDTH = 40;
+var SEPARATOR_WIDTH = 9;
+var CRUMB_WIDTH = ICON_WIDTH + SEPARATOR_WIDTH;
+var RIGHT_BUTTON_WIDTH = 58;
+
+var OPACITY_RATIO = 100;
+var ICON_INACTIVE_OPACITY = 0.6;
+var MAX_BREADCRUMBS = 10;
+
+var CRUMB_BASE = {
+  position: 'absolute',
+  flexDirection: 'row',
+  top: STATUS_BAR_HEIGHT,
+  width: CRUMB_WIDTH,
+  height: NAV_BAR_HEIGHT,
+  backgroundColor: 'transparent',
+};
+
+var ICON_BASE = {
+  width: ICON_WIDTH,
+  height: NAV_BAR_HEIGHT,
+};
+
+var SEPARATOR_BASE = {
+  width: SEPARATOR_WIDTH,
+  height: NAV_BAR_HEIGHT,
+};
+
+var TITLE_BASE = {
+  position: 'absolute',
+  top: STATUS_BAR_HEIGHT,
+  height: NAV_BAR_HEIGHT,
+  backgroundColor: 'transparent',
+};
+
+// For first title styles, make sure first title is centered
+var FIRST_TITLE_BASE = merge(TITLE_BASE, {
+  left: 0,
+  alignItems: 'center',
+  width: SCREEN_WIDTH,
+  height: NAV_BAR_HEIGHT,
+});
+
+var RIGHT_BUTTON_BASE = {
+  position: 'absolute',
+  top: STATUS_BAR_HEIGHT,
+  left: SCREEN_WIDTH - SPACING - RIGHT_BUTTON_WIDTH,
+  overflow: 'hidden',
+  opacity: 1,
+  width: RIGHT_BUTTON_WIDTH,
+  height: NAV_BAR_HEIGHT,
+  backgroundColor: 'transparent',
+};
+
+/**
+ * Precompute crumb styles so that they don't need to be recomputed on every
+ * interaction.
+ */
+var LEFT = [];
+var CENTER = [];
+var RIGHT = [];
+for (var i = 0; i < MAX_BREADCRUMBS; i++) {
+  var crumbLeft = CRUMB_WIDTH * i + SPACING;
+  LEFT[i] = {
+    Crumb: merge(CRUMB_BASE, { left: crumbLeft }),
+    Icon: merge(ICON_BASE, { opacity: ICON_INACTIVE_OPACITY }),
+    Separator: merge(SEPARATOR_BASE, { opacity: 1 }),
+    Title: merge(TITLE_BASE, { left: crumbLeft, opacity: 0 }),
+    RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 0 }),
+  };
+  CENTER[i] = {
+    Crumb: merge(CRUMB_BASE, { left: crumbLeft }),
+    Icon: merge(ICON_BASE, { opacity: 1 }),
+    Separator: merge(SEPARATOR_BASE, { opacity: 0 }),
+    Title: merge(TITLE_BASE, {
+      left: crumbLeft + ICON_WIDTH,
+      opacity: 1,
+    }),
+    RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 1 }),
+  };
+  var crumbRight = SCREEN_WIDTH - 100;
+  RIGHT[i] = {
+    Crumb: merge(CRUMB_BASE, { left: crumbRight}),
+    Icon: merge(ICON_BASE, { opacity: 0 }),
+    Separator: merge(SEPARATOR_BASE, { opacity: 0 }),
+    Title: merge(TITLE_BASE, {
+      left: crumbRight + ICON_WIDTH,
+      opacity: 0,
+    }),
+    RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 0 }),
+  };
+}
+
+// Special case the CENTER state of the first scene.
+CENTER[0] = {
+  Crumb: merge(CRUMB_BASE, {left: SCREEN_WIDTH / 4}),
+  Icon: merge(ICON_BASE, {opacity: 0}),
+  Separator: merge(SEPARATOR_BASE, {opacity: 0}),
+  Title: merge(FIRST_TITLE_BASE, {opacity: 1}),
+  RightItem: CENTER[0].RightItem,
+};
+LEFT[0].Title = merge(FIRST_TITLE_BASE, {left: - SCREEN_WIDTH / 4, opacity: 0});
+RIGHT[0].Title = merge(FIRST_TITLE_BASE, {opacity: 0});
+
+
+var buildIndexSceneInterpolator = function(startStyles, endStyles) {
+  return {
+    Crumb: buildStyleInterpolator({
+      left: {
+        type: 'linear',
+        from: startStyles.Crumb.left,
+        to: endStyles.Crumb.left,
+        min: 0,
+        max: 1,
+        extrapolate: true,
+      },
+    }),
+    Icon: buildStyleInterpolator({
+      opacity: {
+        type: 'linear',
+        from: startStyles.Icon.opacity,
+        to: endStyles.Icon.opacity,
+        min: 0,
+        max: 1,
+      },
+    }),
+    Separator: buildStyleInterpolator({
+      opacity: {
+        type: 'linear',
+        from: startStyles.Separator.opacity,
+        to: endStyles.Separator.opacity,
+        min: 0,
+        max: 1,
+      },
+    }),
+    Title: buildStyleInterpolator({
+      opacity: {
+        type: 'linear',
+        from: startStyles.Title.opacity,
+        to: endStyles.Title.opacity,
+        min: 0,
+        max: 1,
+      },
+      left: {
+        type: 'linear',
+        from: startStyles.Title.left,
+        to: endStyles.Title.left,
+        min: 0,
+        max: 1,
+        extrapolate: true,
+      },
+    }),
+    RightItem: buildStyleInterpolator({
+      opacity: {
+        type: 'linear',
+        from: startStyles.RightItem.opacity,
+        to: endStyles.RightItem.opacity,
+        min: 0,
+        max: 1,
+        round: OPACITY_RATIO,
+      },
+    }),
+  };
+};
+
+var Interpolators = CENTER.map(function(_, ii) {
+  return {
+    // Animating *into* the center stage from the right
+    RightToCenter: buildIndexSceneInterpolator(RIGHT[ii], CENTER[ii]),
+    // Animating out of the center stage, to the left
+    CenterToLeft: buildIndexSceneInterpolator(CENTER[ii], LEFT[ii]),
+    // Both stages (animating *past* the center stage)
+    RightToLeft: buildIndexSceneInterpolator(RIGHT[ii], LEFT[ii]),
+  };
+});
+
+/**
+ * Contains constants that are used in constructing both `StyleSheet`s and
+ * inline styles during transitions.
+ */
+module.exports = {
+  Interpolators,
+  Left: LEFT,
+  Center: CENTER,
+  Right: RIGHT,
+  IconWidth: ICON_WIDTH,
+  IconHeight: NAV_BAR_HEIGHT,
+  SeparatorWidth: SEPARATOR_WIDTH,
+  SeparatorHeight: NAV_BAR_HEIGHT,
+};

Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js

@@ -0,0 +1,189 @@
+/**
+ * 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 NavigatorNavigationBar
+ */
+'use strict';
+
+var React = require('React');
+var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
+var StaticContainer = require('StaticContainer.react');
+var StyleSheet = require('StyleSheet');
+var View = require('View');
+
+var COMPONENT_NAMES = ['Title', 'LeftButton', 'RightButton'];
+
+/**
+ * TODO (janzer): Rename `observedTopOfStack` to `presentedIndex` in `NavigationStack`.
+ */
+var navStatePresentedIndex = function(navState) {
+  if (navState.presentedIndex !== undefined) {
+    return navState.presentedIndex;
+  } else {
+    return navState.observedTopOfStack;
+  }
+};
+
+var NavigatorNavigationBar = React.createClass({
+
+  statics: {
+    Styles: NavigatorNavigationBarStyles,
+  },
+
+  _getReusableProps: function(
+    /*string*/componentName,
+    /*number*/index
+  ) /*object*/ {
+    if (!this._reusableProps) {
+      this._reusableProps = {};
+    }
+    var propStack = this._reusableProps[componentName];
+    if (!propStack) {
+      propStack = this._reusableProps[componentName] = [];
+    }
+    var props = propStack[index];
+    if (!props) {
+      props = propStack[index] = {style:{}};
+    }
+    return props;
+  },
+
+  _updateIndexProgress: function(
+    /*number*/progress,
+    /*number*/index,
+    /*number*/fromIndex,
+    /*number*/toIndex
+  ) {
+    var amount = toIndex > fromIndex ? progress : (1 - progress);
+    var oldDistToCenter = index - fromIndex;
+    var newDistToCenter = index - toIndex;
+    var interpolate;
+    if (oldDistToCenter > 0 && newDistToCenter === 0 ||
+        newDistToCenter > 0 && oldDistToCenter === 0) {
+      interpolate = NavigatorNavigationBarStyles.Interpolators.RightToCenter;
+    } else if (oldDistToCenter < 0 && newDistToCenter === 0 ||
+               newDistToCenter < 0 && oldDistToCenter === 0) {
+      interpolate = NavigatorNavigationBarStyles.Interpolators.CenterToLeft;
+    } else if (oldDistToCenter === newDistToCenter) {
+      interpolate = NavigatorNavigationBarStyles.Interpolators.RightToCenter;
+    } else {
+      interpolate = NavigatorNavigationBarStyles.Interpolators.RightToLeft;
+    }
+
+    COMPONENT_NAMES.forEach(function (componentName) {
+      var component = this.refs[componentName + index];
+      var props = this._getReusableProps(componentName, index);
+      if (component && interpolate[componentName](props.style, amount)) {
+        component.setNativeProps(props);
+      }
+    }, this);
+  },
+
+  updateProgress: function(
+    /*number*/progress,
+    /*number*/fromIndex,
+    /*number*/toIndex
+  ) {
+    var max = Math.max(fromIndex, toIndex);
+    var min = Math.min(fromIndex, toIndex);
+    for (var index = min; index <= max; index++) {
+      this._updateIndexProgress(progress, index, fromIndex, toIndex);
+    }
+  },
+
+  render: function() {
+    var navState = this.props.navState;
+    var components = COMPONENT_NAMES.map(function (componentName) {
+      return navState.routeStack.map(
+        this._renderOrReturnComponent.bind(this, componentName)
+      );
+    }, this);
+
+    return (
+      <View style={[styles.navBarContainer, this.props.navigationBarStyles]}>
+        {components}
+      </View>
+    );
+  },
+
+  _renderOrReturnComponent: function(
+    /*string*/componentName,
+    /*object*/route,
+    /*number*/index
+  ) /*object*/ {
+    var navState = this.props.navState;
+    var navBarRouteMapper = this.props.navigationBarRouteMapper;
+    var uid = navState.idStack[index];
+    var containerRef = componentName + 'Container' + uid;
+    var alreadyRendered = this.refs[containerRef];
+    if (alreadyRendered) {
+      // Don't bother re-calculating the children
+      return (
+        <StaticContainer
+          ref={containerRef}
+          key={containerRef}
+          shouldUpdate={false}
+        />
+      );
+    }
+
+    var content = navBarRouteMapper[componentName](
+      navState.routeStack[index],
+      this.props.navigator,
+      index,
+      this.props.navState
+    );
+    if (!content) {
+      return null;
+    }
+
+    var initialStage = index === navStatePresentedIndex(this.props.navState) ?
+      NavigatorNavigationBarStyles.Stages.Center : NavigatorNavigationBarStyles.Stages.Left;
+    return (
+      <StaticContainer
+        ref={containerRef}
+        key={containerRef}
+        shouldUpdate={false}>
+        <View ref={componentName + index} style={initialStage[componentName]}>
+          {content}
+        </View>
+      </StaticContainer>
+    );
+  },
+
+});
+
+
+var styles = StyleSheet.create({
+  navBarContainer: {
+    position: 'absolute',
+    height: NavigatorNavigationBarStyles.General.TotalNavHeight,
+    top: 0,
+    left: 0,
+    width: NavigatorNavigationBarStyles.General.ScreenWidth,
+    backgroundColor: 'transparent',
+  },
+});
+
+module.exports = NavigatorNavigationBar;

Libraries/CustomComponents/Navigator/NavigatorNavigationBarStyles.js

@@ -0,0 +1,176 @@
+/**
+ * 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 NavigatorNavigationBarStyles
+ */
+'use strict';
+
+var Dimensions = require('Dimensions');
+
+var buildStyleInterpolator = require('buildStyleInterpolator');
+var merge = require('merge');
+
+var SCREEN_WIDTH = Dimensions.get('window').width;
+var NAV_BAR_HEIGHT = 44;
+var STATUS_BAR_HEIGHT = 20;
+var NAV_HEIGHT = NAV_BAR_HEIGHT + STATUS_BAR_HEIGHT;
+
+var BASE_STYLES = {
+  Title: {
+    position: 'absolute',
+    top: STATUS_BAR_HEIGHT,
+    left: 0,
+    alignItems: 'center',
+    width: SCREEN_WIDTH,
+    height: NAV_BAR_HEIGHT,
+    backgroundColor: 'transparent',
+  },
+  LeftButton: {
+    position: 'absolute',
+    top: STATUS_BAR_HEIGHT,
+    left: 0,
+    overflow: 'hidden',
+    opacity: 1,
+    width: SCREEN_WIDTH / 3,
+    height: NAV_BAR_HEIGHT,
+    backgroundColor: 'transparent',
+  },
+  RightButton: {
+    position: 'absolute',
+    top: STATUS_BAR_HEIGHT,
+    left: 2 * SCREEN_WIDTH / 3,
+    overflow: 'hidden',
+    opacity: 1,
+    alignItems: 'flex-end',
+    width: SCREEN_WIDTH / 3,
+    height: NAV_BAR_HEIGHT,
+    backgroundColor: 'transparent',
+  },
+};
+
+// There are 3 stages: left, center, right. All previous navigation
+// items are in the left stage. The current navigation item is in the
+// center stage. All upcoming navigation items are in the right stage.
+// Another way to think of the stages is in terms of transitions. When
+// we move forward in the navigation stack, we perform a
+// right-to-center transition on the new navigation item and a
+// center-to-left transition on the current navigation item.
+var Stages = {
+  Left: {
+    Title: merge(BASE_STYLES.Title, { left: - SCREEN_WIDTH / 2, opacity: 0 }),
+    LeftButton: merge(BASE_STYLES.LeftButton, { left: - SCREEN_WIDTH / 3, opacity: 1 }),
+    RightButton: merge(BASE_STYLES.RightButton, { left: SCREEN_WIDTH / 3, opacity: 0 }),
+  },
+  Center: {
+    Title: merge(BASE_STYLES.Title, { left: 0, opacity: 1 }),
+    LeftButton: merge(BASE_STYLES.LeftButton, { left: 0, opacity: 1 }),
+    RightButton: merge(BASE_STYLES.RightButton, { left: 2 * SCREEN_WIDTH / 3 - 0, opacity: 1 }),
+  },
+  Right: {
+    Title: merge(BASE_STYLES.Title, { left: SCREEN_WIDTH / 2, opacity: 0 }),
+    LeftButton: merge(BASE_STYLES.LeftButton, { left: 0, opacity: 0 }),
+    RightButton: merge(BASE_STYLES.RightButton, { left: SCREEN_WIDTH, opacity: 0 }),
+  },
+};
+
+
+var opacityRatio = 100;
+
+function buildSceneInterpolators(startStyles, endStyles) {
+  return {
+    Title: buildStyleInterpolator({
+      opacity: {
+        type: 'linear',
+        from: startStyles.Title.opacity,
+        to: endStyles.Title.opacity,
+        min: 0,
+        max: 1,
+      },
+      left: {
+        type: 'linear',
+        from: startStyles.Title.left,
+        to: endStyles.Title.left,
+        min: 0,
+        max: 1,
+        extrapolate: true,
+      },
+    }),
+    LeftButton: buildStyleInterpolator({
+      opacity: {
+        type: 'linear',
+        from: startStyles.LeftButton.opacity,
+        to: endStyles.LeftButton.opacity,
+        min: 0,
+        max: 1,
+        round: opacityRatio,
+      },
+      left: {
+        type: 'linear',
+        from: startStyles.LeftButton.left,
+        to: endStyles.LeftButton.left,
+        min: 0,
+        max: 1,
+      },
+    }),
+    RightButton: buildStyleInterpolator({
+      opacity: {
+        type: 'linear',
+        from: startStyles.RightButton.opacity,
+        to: endStyles.RightButton.opacity,
+        min: 0,
+        max: 1,
+        round: opacityRatio,
+      },
+      left: {
+        type: 'linear',
+        from: startStyles.RightButton.left,
+        to: endStyles.RightButton.left,
+        min: 0,
+        max: 1,
+        extrapolate: true,
+      },
+    }),
+  };
+}
+
+var Interpolators = {
+  // Animating *into* the center stage from the right
+  RightToCenter: buildSceneInterpolators(Stages.Right, Stages.Center),
+  // Animating out of the center stage, to the left
+  CenterToLeft: buildSceneInterpolators(Stages.Center, Stages.Left),
+  // Both stages (animating *past* the center stage)
+  RightToLeft: buildSceneInterpolators(Stages.Right, Stages.Left),
+};
+
+
+module.exports = {
+  General: {
+    NavBarHeight: NAV_BAR_HEIGHT,
+    StatusBarHeight: STATUS_BAR_HEIGHT,
+    TotalNavHeight: NAV_HEIGHT,
+    ScreenWidth: SCREEN_WIDTH,
+  },
+  Interpolators,
+  Stages,
+};

Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

@@ -0,0 +1,300 @@
+/**
+ * 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 NavigatorSceneConfigs
+ */
+'use strict';
+
+var Dimensions = require('Dimensions');
+var PixelRatio = require('PixelRatio');
+
+var buildStyleInterpolator = require('buildStyleInterpolator');
+var merge = require('merge');
+
+var SCREEN_WIDTH = Dimensions.get('window').width;
+var SCREEN_HEIGHT = Dimensions.get('window').height;
+
+var ToTheLeft = {
+  // Rotate *requires* you to break out each individual component of
+  // rotation (x, y, z, w)
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PixelRatio.get(),
+  },
+  // Uncomment to try rotation:
+  // Quick guide to reasoning about rotations:
+  // http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-17-quaternions/#Quaternions
+  // transformRotateRadians: {
+  //   from: {x: 0, y: 0, z: 0, w: 1},
+  //   to: {x: 0, y: 0, z: -0.47, w: 0.87},
+  //   min: 0,
+  //   max: 1,
+  //   type: 'linear',
+  //   extrapolate: true
+  // },
+  transformScale: {
+    from: {x: 1, y: 1, z: 1},
+    to: {x: 0.95, y: 0.95, z: 1},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true
+  },
+  opacity: {
+    from: 1,
+    to: 0.3,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: false,
+    round: 100,
+  },
+  translateX: {
+    from: 0,
+    to: -Math.round(Dimensions.get('window').width * 0.3),
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PixelRatio.get(),
+  },
+  scaleX: {
+    from: 1,
+    to: 0.95,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true
+  },
+  scaleY: {
+    from: 1,
+    to: 0.95,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true
+  },
+};
+
+var FromTheRight = {
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+
+  transformTranslate: {
+    from: {x: Dimensions.get('window').width, y: 0, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PixelRatio.get(),
+  },
+
+  translateX: {
+    from: Dimensions.get('window').width,
+    to: 0,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PixelRatio.get(),
+  },
+
+  scaleX: {
+    value: 1,
+    type: 'constant',
+  },
+  scaleY: {
+    value: 1,
+    type: 'constant',
+  },
+};
+
+
+var ToTheBack = {
+  // Rotate *requires* you to break out each individual component of
+  // rotation (x, y, z, w)
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PixelRatio.get(),
+  },
+  transformScale: {
+    from: {x: 1, y: 1, z: 1},
+    to: {x: 0.95, y: 0.95, z: 1},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true
+  },
+  opacity: {
+    from: 1,
+    to: 0.3,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: false,
+    round: 100,
+  },
+  scaleX: {
+    from: 1,
+    to: 0.95,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true
+  },
+  scaleY: {
+    from: 1,
+    to: 0.95,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true
+  },
+};
+
+var FromTheFront = {
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+
+  transformTranslate: {
+    from: {x: 0, y: Dimensions.get('window').height, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PixelRatio.get(),
+  },
+  translateY: {
+    from: Dimensions.get('window').height,
+    to: 0,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PixelRatio.get(),
+  },
+  scaleX: {
+    value: 1,
+    type: 'constant',
+  },
+  scaleY: {
+    value: 1,
+    type: 'constant',
+  },
+};
+
+
+var Interpolators = {
+  Vertical: {
+    into: buildStyleInterpolator(FromTheFront),
+    out: buildStyleInterpolator(ToTheBack),
+  },
+  Horizontal: {
+    into: buildStyleInterpolator(FromTheRight),
+    out: buildStyleInterpolator(ToTheLeft),
+  },
+};
+
+
+// These are meant to mimic iOS default behavior
+var PastPointOfNoReturn = {
+  horizontal: function(location) {
+    return location > SCREEN_WIDTH * 3 / 5;
+  },
+  vertical: function(location) {
+    return location > SCREEN_HEIGHT * 3 / 5;
+  },
+};
+
+var BaseConfig = {
+  // When false, all gestures are ignored for this scene
+  enableGestures: true,
+
+  // How far the swipe must drag to start transitioning
+  gestureDetectMovement: 2,
+
+  // Amplitude of release velocity that is considered still
+  notMoving: 0.3,
+
+  // Velocity to start at when transitioning without gesture
+  defaultTransitionVelocity: 1.5,
+
+  // Fraction of directional move required.
+  directionRatio: 0.66,
+
+  // Velocity to transition with when the gesture release was "not moving"
+  snapVelocity: 2,
+
+  // Rebound spring parameters when transitioning FROM this scene
+  springFriction: 26,
+  springTension: 200,
+
+  // Defaults for horizontal transitioning:
+
+  isVertical: false,
+  screenDimension: SCREEN_WIDTH,
+
+  // Region that can trigger swipe. iOS default is 30px from the left edge
+  edgeHitWidth: 30,
+
+  // Point at which a non-velocity release will cause nav pop
+  pastPointOfNoReturn: PastPointOfNoReturn.horizontal,
+
+  // Animation interpolators for this transition
+  interpolators: Interpolators.Horizontal,
+};
+
+var NavigatorSceneConfigs = {
+  PushFromRight: merge(BaseConfig, {
+    // We will want to customize this soon
+  }),
+  FloatFromRight: merge(BaseConfig, {
+    // We will want to customize this soon
+  }),
+  FloatFromBottom: merge(BaseConfig, {
+    edgeHitWidth: 150,
+    interpolators: Interpolators.Vertical,
+    isVertical: true,
+    pastPointOfNoReturn: PastPointOfNoReturn.vertical,
+    screenDimension: SCREEN_HEIGHT,
+  }),
+};
+
+module.exports = NavigatorSceneConfigs;