NavigatorIOS.ios.js

/**
 * 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 NavigatorIOS
 * @flow
 */
'use strict';

var EventEmitter = require('EventEmitter');
var Image = require('Image');
var NavigationContext = require('NavigationContext');
var RCTNavigatorManager = require('NativeModules').NavigatorManager;
var React = require('React');
var ReactNative = require('ReactNative');
var StaticContainer = require('StaticContainer.react');
var StyleSheet = require('StyleSheet');
var View = require('View');

var invariant = require('fbjs/lib/invariant');
var logError = require('logError');
var requireNativeComponent = require('requireNativeComponent');

const keyMirror = require('fbjs/lib/keyMirror');

var TRANSITIONER_REF = 'transitionerRef';

var PropTypes = React.PropTypes;

var __uid = 0;
function getuid() {
  return __uid++;
}

class NavigatorTransitionerIOS extends React.Component {
  requestSchedulingNavigation = (cb) => {
    RCTNavigatorManager.requestSchedulingJavaScriptNavigation(
      ReactNative.findNodeHandle(this),
      logError,
      cb
    );
  };

  render() {
    return (
      <RCTNavigator {...this.props}/>
    );
  }
}

const SystemIconLabels = {
  done: true,
  cancel: true,
  edit: true,
  save: true,
  add: true,
  compose: true,
  reply: true,
  action: true,
  organize: true,
  bookmarks: true,
  search: true,
  refresh: true,
  stop: true,
  camera: true,
  trash: true,
  play: true,
  pause: true,
  rewind: true,
  'fast-forward': true,
  undo: true,
  redo: true,
  'page-curl': true,
};
const SystemIcons = keyMirror(SystemIconLabels);

type SystemButtonType = $Enum<typeof SystemIconLabels>;

type Route = {
  component: Function,
  title: string,
  titleImage?: Object,
  passProps?: Object,
  backButtonTitle?: string,
  backButtonIcon?: Object,
  leftButtonTitle?: string,
  leftButtonIcon?: Object,
  leftButtonSystemIcon?: SystemButtonType;
  onLeftButtonPress?: Function,
  rightButtonTitle?: string,
  rightButtonIcon?: Object,
  rightButtonSystemIcon?: SystemButtonType;
  onRightButtonPress?: Function,
  wrapperStyle?: any,
};

type State = {
  idStack: Array<number>,
  routeStack: Array<Route>,
  requestedTopOfStack: number,
  observedTopOfStack: number,
  progress: number,
  fromIndex: number,
  toIndex: number,
  makingNavigatorRequest: boolean,
  updatingAllIndicesAtOrBeyond: ?number,
}

type Event = Object;

/**
 * Think of `<NavigatorIOS>` as simply a component that renders an
 * `RCTNavigator`, and moves the `RCTNavigator`'s `requestedTopOfStack` pointer
 * forward and backward. The `RCTNavigator` interprets changes in
 * `requestedTopOfStack` to be pushes and pops of children that are rendered.
 * `<NavigatorIOS>` always ensures that whenever the `requestedTopOfStack`
 * pointer is moved, that we've also rendered enough children so that the
 * `RCTNavigator` can carry out the push/pop with those children.
 * `<NavigatorIOS>` also removes children that will no longer be needed
 * (after the pop of a child has been fully completed/animated out).
 */

/**
 * `NavigatorIOS` is a wrapper around
 * [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/),
 * enabling you to implement a navigation stack. It works exactly the same as it
 * would on a native app using `UINavigationController`, providing the same
 * animations and behavior from UIKIt.
 *
 * As the name implies, it is only available on iOS. Take a look at
 * [`Navigator`](/react-native/docs/navigator.html) for a similar solution for your
 * cross-platform needs, or check out
 * [react-native-navigation](https://github.com/wix/react-native-navigation), a
 * component that aims to provide native navigation on both iOS and Android.
 *
 * To set up the navigator, provide the `initialRoute` prop with a route
 * object. A route object is used to describe each scene that your app
 * navigates to. `initialRoute` represents the first route in your navigator.
 *
 * ```
 * import React, { Component, PropTypes } from 'react';
 * import { NavigatorIOS, Text } from 'react-native';
 *
 * export default class NavigatorIOSApp extends Component {
 *   render() {
 *     return (
 *       <NavigatorIOS
 *         initialRoute={{
 *           component: MyScene,
 *           title: 'My Initial Scene',
 *         }}
 *         style={{flex: 1}}
 *       />
 *     );
 *   }
 * }
 *
 * class MyScene extends Component {
 *   static propTypes = {
 *     title: PropTypes.string.isRequired,
 *     navigator: PropTypes.object.isRequired,
 *   }
 *
 *   _onForward = () => {
 *     this.props.navigator.push({
 *       title: 'Scene ' + nextIndex,
 *     });
 *   }
 *
 *   render() {
 *     return (
 *       <View>
 *         <Text>Current Scene: { this.props.title }</Text>
 *         <TouchableHighlight onPress={this._onForward}>
 *           <Text>Tap me to load the next scene</Text>
 *         </TouchableHighlight>
 *       </View>
 *     )
 *   }
 * }
 * ```
 *
 * In this code, the navigator renders the component specified in initialRoute,
 * which in this case is `MyScene`. This component will receive a `route` prop
 * and a `navigator` prop representing the navigator. The navigator's navigation
 * bar will render the title for the current scene, "My Initial Scene".
 *
 * You can optionally pass in a `passProps` property to your `initialRoute`.
 * `NavigatorIOS` passes this in as props to the rendered component:
 *
 * ```
 * initialRoute={{
 *   component: MyScene,
 *   title: 'My Initial Scene',
 *   passProps: { myProp: 'foo' }
 * }}
 * ```
 *
 * You can then access the props passed in via `{this.props.myProp}`.
 *
 * #### Handling Navigation
 *
 * To trigger navigation functionality such as pushing or popping a view, you
 * have access to a `navigator` object. The object is passed in as a prop to any
 * component that is rendered by `NavigatorIOS`. You can then call the
 * relevant methods to perform the navigation action you need:
 *
 * ```
 * class MyView extends Component {
 *   _handleBackPress() {
 *     this.props.navigator.pop();
 *   }
 *
 *   _handleNextPress(nextRoute) {
 *     this.props.navigator.push(nextRoute);
 *   }
 *
 *   render() {
 *     const nextRoute = {
 *       component: MyView,
 *       title: 'Bar That',
 *       passProps: { myProp: 'bar' }
 *     };
 *     return(
 *       <TouchableHighlight onPress={() => this._handleNextPress(nextRoute)}>
 *         <Text style={{marginTop: 200, alignSelf: 'center'}}>
 *           See you on the other nav {this.props.myProp}!
 *         </Text>
 *       </TouchableHighlight>
 *     );
 *   }
 * }
 * ```
 *
 * You can also trigger navigator functionality from the `NavigatorIOS`
 * component:
 *
 * ```
 * class NavvyIOS extends Component {
 *   _handleNavigationRequest() {
 *     this.refs.nav.push({
 *       component: MyView,
 *       title: 'Genius',
 *       passProps: { myProp: 'genius' },
 *     });
 *   }
 *
 *   render() {
 *     return (
 *       <NavigatorIOS
 *         ref='nav'
 *         initialRoute={{
 *           component: MyView,
 *           title: 'Foo This',
 *           passProps: { myProp: 'foo' },
 *           rightButtonTitle: 'Add',
 *           onRightButtonPress: () => this._handleNavigationRequest(),
 *         }}
 *         style={{flex: 1}}
 *       />
 *     );
 *   }
 * }
 * ```
 *
 * The code above adds a `_handleNavigationRequest` private method that is
 * invoked from the `NavigatorIOS` component when the right navigation bar item
 * is pressed. To get access to the navigator functionality, a reference to it
 * is saved in the `ref` prop and later referenced to push a new scene into the
 * navigation stack.
 *
 * #### Navigation Bar Configuration
 *
 * Props passed to `NavigatorIOS` will set the default configuration
 * for the navigation bar. Props passed as properties to a route object will set
 * the configuration for that route's navigation bar, overriding any props
 * passed to the `NavigatorIOS` component.
 *
 * ```
 * _handleNavigationRequest() {
 *   this.refs.nav.push({
 *     //...
 *     passProps: { myProp: 'genius' },
 *     barTintColor: '#996699',
 *   });
 * }
 *
 * render() {
 *   return (
 *     <NavigatorIOS
 *       //...
 *       style={{flex: 1}}
 *       barTintColor='#ffffcc'
 *     />
 *   );
 * }
 * ```
 *
 * In the example above the navigation bar color is changed when the new route
 * is pushed.
 *
 */
var NavigatorIOS = React.createClass({

  propTypes: {

    /**
     * NavigatorIOS uses `route` objects to identify child views, their props,
     * and navigation bar configuration. Navigation operations such as push
     * operations expect routes to look like this the `initialRoute`.
     */
    initialRoute: PropTypes.shape({
      /**
       * The React Class to render for this route
       */
      component: PropTypes.func.isRequired,

      /**
       * The title displayed in the navigation bar and the back button for this
       * route.
       */
      title: PropTypes.string.isRequired,

      /**
       * If set, a title image will appear instead of the text title.
       */
      titleImage: Image.propTypes.source,

      /**
       * Use this to specify additional props to pass to the rendered
       * component. `NavigatorIOS` will automatically pass in `route` and
       * `navigator` props to the comoponent.
       */
      passProps: PropTypes.object,

      /**
       * If set, the left navigation button image will be displayed using this
       * source. Note that this doesn't apply to the header of the current
       * view, but to those views that are subsequently pushed.
       */
      backButtonIcon: Image.propTypes.source,

      /**
       * If set, the left navigation button text will be set to this. Note that
       * this doesn't apply to the left button of the current view, but to
       * those views that are subsequently pushed
       */
      backButtonTitle: PropTypes.string,

      /**
       * If set, the left navigation button image will be displayed using
       * this source.
       */
      leftButtonIcon: Image.propTypes.source,

      /**
       * If set, the left navigation button will display this text.
       */
      leftButtonTitle: PropTypes.string,

      /**
       * If set, the left header button will appear with this system icon
       *
       * Supported icons are `done`, `cancel`, `edit`, `save`, `add`,
       * `compose`, `reply`, `action`, `organize`, `bookmarks`, `search`,
       * `refresh`, `stop`, `camera`, `trash`, `play`, `pause`, `rewind`,
       * `fast-forward`, `undo`, `redo`, and `page-curl`
       */
      leftButtonSystemIcon: PropTypes.oneOf(Object.keys(SystemIcons)),

      /**
       * This function will be invoked when the left navigation bar item is
       * pressed.
       */
      onLeftButtonPress: PropTypes.func,

      /**
       * If set, the right navigation button image will be displayed using
       * this source.
       */
      rightButtonIcon: Image.propTypes.source,

      /**
       * If set, the right navigation button will display this text.
       */
      rightButtonTitle: PropTypes.string,

      /**
       * If set, the right header button will appear with this system icon
       *
       * See leftButtonSystemIcon for supported icons
       */
      rightButtonSystemIcon: PropTypes.oneOf(Object.keys(SystemIcons)),

      /**
       * This function will be invoked when the right navigation bar item is
       * pressed.
       */
      onRightButtonPress: PropTypes.func,

      /**
       * Styles for the navigation item containing the component.
       */
      wrapperStyle: View.propTypes.style,

      /**
       * Boolean value that indicates whether the navigation bar is hidden.
       */
      navigationBarHidden: PropTypes.bool,

      /**
       * Boolean value that indicates whether to hide the 1px hairline
       * shadow.
       */
      shadowHidden: PropTypes.bool,

      /**
       * The color used for the buttons in the navigation bar.
       */
      tintColor: PropTypes.string,

      /**
       * The background color of the navigation bar.
       */
      barTintColor: PropTypes.string,

       /**
       * The text color of the navigation bar title.
       */
      titleTextColor: PropTypes.string,

       /**
       * Bboolean value that indicates whether the navigation bar is
       * translucent.
       */
      translucent: PropTypes.bool,

    }).isRequired,

    /**
     * Boolean value that indicates whether the navigation bar is hidden
     * by default.
     */
    navigationBarHidden: PropTypes.bool,

    /**
     * Boolean value that indicates whether to hide the 1px hairline shadow
     * by default.
     */
    shadowHidden: PropTypes.bool,

    /**
     * The default wrapper style for components in the navigator.
     * A common use case is to set the `backgroundColor` for every scene.
     */
    itemWrapperStyle: View.propTypes.style,

    /**
     * The default color used for the buttons in the navigation bar.
     */
    tintColor: PropTypes.string,

    /**
     * The default background color of the navigation bar.
     */
    barTintColor: PropTypes.string,

    /**
     * The default text color of the navigation bar title.
     */
    titleTextColor: PropTypes.string,

    /**
     * Boolean value that indicates whether the navigation bar is
     * translucent by default
     */
    translucent: PropTypes.bool,

    /**
     * Boolean value that indicates whether the interactive pop gesture is
     * enabled. This is useful for enabling/disabling the back swipe navigation
     * gesture.
     *
     * If this prop is not provided, the default behavior is for the back swipe
     * gesture to be enabled when the navigation bar is shown and disabled when
     * the navigation bar is hidden. Once you've provided the
     * `interactivePopGestureEnabled` prop, you can never restore the default
     * behavior.
     */
    interactivePopGestureEnabled: PropTypes.bool,

  },

  navigator: (undefined: ?Object),
  navigationContext: new NavigationContext(),

  componentWillMount: function() {
    // Precompute a pack of callbacks that's frequently generated and passed to
    // instances.
    this.navigator = {
      push: this.push,
      pop: this.pop,
      popN: this.popN,
      replace: this.replace,
      replaceAtIndex: this.replaceAtIndex,
      replacePrevious: this.replacePrevious,
      replacePreviousAndPop: this.replacePreviousAndPop,
      resetTo: this.resetTo,
      popToRoute: this.popToRoute,
      popToTop: this.popToTop,
      navigationContext: this.navigationContext,
    };
    this._emitWillFocus(this.state.routeStack[this.state.observedTopOfStack]);
  },

  componentDidMount: function() {
    this._emitDidFocus(this.state.routeStack[this.state.observedTopOfStack]);
  },

  componentWillUnmount: function() {
    this.navigationContext.dispose();
    this.navigationContext = new NavigationContext();
  },

  getDefaultProps: function(): Object {
    return {
      translucent: true,
    };
  },

  getInitialState: function(): State {
    return {
      idStack: [getuid()],
      routeStack: [this.props.initialRoute],
      // The navigation index that we wish to push/pop to.
      requestedTopOfStack: 0,
      // The last index that native has sent confirmation of completed push/pop
      // for. At this point, we can discard any views that are beyond the
      // `requestedTopOfStack`. A value of `null` means we have not received
      // any confirmation, ever. We may receive an `observedTopOfStack` without
      // ever requesting it - native can instigate pops of its own with the
      // backswipe gesture.
      observedTopOfStack: 0,
      progress: 1,
      fromIndex: 0,
      toIndex: 0,
      // Whether or not we are making a navigator request to push/pop. (Used
      // for performance optimization).
      makingNavigatorRequest: false,
      // Whether or not we are updating children of navigator and if so (not
      // `null`) which index marks the beginning of all updates. Used for
      // performance optimization.
      updatingAllIndicesAtOrBeyond: 0,
    };
  },

  _toFocusOnNavigationComplete: (undefined: any),

  _handleFocusRequest: function(item: any) {
    if (this.state.makingNavigatorRequest) {
      this._toFocusOnNavigationComplete = item;
    } else {
      this._getFocusEmitter().emit('focus', item);
    }
  },

  _focusEmitter: (undefined: ?EventEmitter),

  _getFocusEmitter: function(): EventEmitter {
    // Flow not yet tracking assignments to instance fields.
    var focusEmitter = this._focusEmitter;
    if (!focusEmitter) {
      focusEmitter = new EventEmitter();
      this._focusEmitter = focusEmitter;
    }
    return focusEmitter;
  },

  getChildContext: function(): {
    onFocusRequested: Function,
    focusEmitter: EventEmitter,
  } {
    return {
      onFocusRequested: this._handleFocusRequest,
      focusEmitter: this._getFocusEmitter(),
    };
  },

  childContextTypes: {
    onFocusRequested: React.PropTypes.func,
    focusEmitter: React.PropTypes.instanceOf(EventEmitter),
  },

  _tryLockNavigator: function(cb: () => void) {
    this.refs[TRANSITIONER_REF].requestSchedulingNavigation(
      (acquiredLock) => acquiredLock && cb()
    );
  },

  _handleNavigatorStackChanged: function(e: Event) {
    var newObservedTopOfStack = e.nativeEvent.stackLength - 1;
    this._emitDidFocus(this.state.routeStack[newObservedTopOfStack]);

    invariant(
      newObservedTopOfStack <= this.state.requestedTopOfStack,
      'No navigator item should be pushed without JS knowing about it %s %s', newObservedTopOfStack, this.state.requestedTopOfStack
    );
    var wasWaitingForConfirmation =
      this.state.requestedTopOfStack !== this.state.observedTopOfStack;
    if (wasWaitingForConfirmation) {
      invariant(
        newObservedTopOfStack === this.state.requestedTopOfStack,
        'If waiting for observedTopOfStack to reach requestedTopOfStack, ' +
        'the only valid observedTopOfStack should be requestedTopOfStack.'
      );
    }
    // Mark the most recent observation regardless of if we can lock the
    // navigator. `observedTopOfStack` merely represents what we've observed
    // and this first `setState` is only executed to update debugging
    // overlays/navigation bar.
    // Also reset progress, toIndex, and fromIndex as they might not end
    // in the correct states for a two possible reasons:
    // Progress isn't always 0 or 1 at the end, the system rounds
    // If the Navigator is offscreen these values won't be updated
    // TOOD: Revisit this decision when no longer relying on native navigator.
    var nextState = {
      observedTopOfStack: newObservedTopOfStack,
      makingNavigatorRequest: false,
      updatingAllIndicesAtOrBeyond: null,
      progress: 1,
      toIndex: newObservedTopOfStack,
      fromIndex: newObservedTopOfStack,
    };
    this.setState(nextState, this._eliminateUnneededChildren);
  },

  _eliminateUnneededChildren: function() {
    // Updating the indices that we're deleting and that's all. (Truth: Nothing
    // even uses the indices in this case, but let's make this describe the
    // truth anyways).
    var updatingAllIndicesAtOrBeyond =
      this.state.routeStack.length > this.state.observedTopOfStack + 1 ?
      this.state.observedTopOfStack + 1 :
      null;
    this.setState({
      idStack: this.state.idStack.slice(0, this.state.observedTopOfStack + 1),
      routeStack: this.state.routeStack.slice(0, this.state.observedTopOfStack + 1),
      // Now we rerequest the top of stack that we observed.
      requestedTopOfStack: this.state.observedTopOfStack,
      makingNavigatorRequest: true,
      updatingAllIndicesAtOrBeyond: updatingAllIndicesAtOrBeyond,
    });
  },

  _emitDidFocus: function(route: Route) {
    this.navigationContext.emit('didfocus', {route: route});
  },

  _emitWillFocus: function(route: Route) {
    this.navigationContext.emit('willfocus', {route: route});
  },

  /**
   * Navigate forward to a new route.
   * @param route The new route to navigate to.
   */
  push: function(route: Route) {
    invariant(!!route, 'Must supply route to push');
    // Make sure all previous requests are caught up first. Otherwise reject.
    if (this.state.requestedTopOfStack === this.state.observedTopOfStack) {
      this._tryLockNavigator(() => {
        this._emitWillFocus(route);

        var nextStack = this.state.routeStack.concat([route]);
        var nextIDStack = this.state.idStack.concat([getuid()]);
        this.setState({
          // We have to make sure that we've also supplied enough views to
          // satisfy our request to adjust the `requestedTopOfStack`.
          idStack: nextIDStack,
          routeStack: nextStack,
          requestedTopOfStack: nextStack.length - 1,
          makingNavigatorRequest: true,
          updatingAllIndicesAtOrBeyond: nextStack.length - 1,
        });
      });
    }
  },

  /**
   * Go back N scenes at once. When N=1, behavior matches `pop()`.
   * @param n The number of scenes to pop.
   */
  popN: function(n: number) {
    if (n === 0) {
      return;
    }
    // Make sure all previous requests are caught up first. Otherwise reject.
    if (this.state.requestedTopOfStack === this.state.observedTopOfStack) {
      if (this.state.requestedTopOfStack > 0) {
        this._tryLockNavigator(() => {
          var newRequestedTopOfStack = this.state.requestedTopOfStack - n;
          invariant(newRequestedTopOfStack >= 0, 'Cannot pop below 0');
          this._emitWillFocus(this.state.routeStack[newRequestedTopOfStack]);
          this.setState({
            requestedTopOfStack: newRequestedTopOfStack,
            makingNavigatorRequest: true,
            updatingAllIndicesAtOrBeyond: this.state.requestedTopOfStack - n,
          });
        });
      }
    }
  },

  /**
   * Pop back to the previous scene.
   */
  pop: function() {
    this.popN(1);
  },

  /**
   * Replace a route in the navigation stack.
   *
   * @param route The new route that will replace the specified one.
   * @param index The route into the stack that should be replaced.
   *    If it is negative, it counts from the back of the stack.
   */
  replaceAtIndex: function(route: Route, index: number) {
    invariant(!!route, 'Must supply route to replace');
    if (index < 0) {
      index += this.state.routeStack.length;
    }

    if (this.state.routeStack.length <= index) {
      return;
    }

    // I don't believe we need to lock for a replace since there's no
    // navigation actually happening
    var nextIDStack = this.state.idStack.slice();
    var nextRouteStack = this.state.routeStack.slice();
    nextIDStack[index] = getuid();
    nextRouteStack[index] = route;

    this.setState({
      idStack: nextIDStack,
      routeStack: nextRouteStack,
      makingNavigatorRequest: false,
      updatingAllIndicesAtOrBeyond: index,
    });

    this._emitWillFocus(route);
    this._emitDidFocus(route);
  },

  /**
   * Replace the route for the current scene and immediately
   * load the view for the new route.
   * @param route The new route to navigate to.
   */
  replace: function(route: Route) {
    this.replaceAtIndex(route, -1);
  },

  /**
   * Replace the route/view for the previous scene.
   * @param route The new route to will replace the previous scene.
   */
  replacePrevious: function(route: Route) {
    this.replaceAtIndex(route, -2);
  },

  /**
   * Go back to the topmost item in the navigation stack.
   */
  popToTop: function() {
    this.popToRoute(this.state.routeStack[0]);
  },

  /**
   * Go back to the item for a particular route object.
   * @param route The new route to navigate to.
   */
  popToRoute: function(route: Route) {
    var indexOfRoute = this.state.routeStack.indexOf(route);
    invariant(
      indexOfRoute !== -1,
      'Calling pop to route for a route that doesn\'t exist!'
    );
    var numToPop = this.state.routeStack.length - indexOfRoute - 1;
    this.popN(numToPop);
  },

  /**
   * Replaces the previous route/view and transitions back to it.
   * @param route The new route that replaces the previous scene.
   */
  replacePreviousAndPop: function(route: Route) {
    // Make sure all previous requests are caught up first. Otherwise reject.
    if (this.state.requestedTopOfStack !== this.state.observedTopOfStack) {
      return;
    }
    if (this.state.routeStack.length < 2) {
      return;
    }
    this._tryLockNavigator(() => {
      this.replacePrevious(route);
      this.setState({
        requestedTopOfStack: this.state.requestedTopOfStack - 1,
        makingNavigatorRequest: true,
      });
    });
  },

  /**
   * Replaces the top item and pop to it.
   * @param route The new route that will replace the topmost item.
   */
  resetTo: function(route: Route) {
    invariant(!!route, 'Must supply route to push');
    // Make sure all previous requests are caught up first. Otherwise reject.
    if (this.state.requestedTopOfStack !== this.state.observedTopOfStack) {
      return;
    }
    this.replaceAtIndex(route, 0);
    this.popToRoute(route);
  },

  _handleNavigationComplete: function(e: Event) {
    // Don't propagate to other NavigatorIOS instances this is nested in:
    e.stopPropagation();

    if (this._toFocusOnNavigationComplete) {
      this._getFocusEmitter().emit('focus', this._toFocusOnNavigationComplete);
      this._toFocusOnNavigationComplete = null;
    }
    this._handleNavigatorStackChanged(e);
  },

  _routeToStackItem: function(routeArg: Route, i: number) {
    var {component, wrapperStyle, passProps, ...route} = routeArg;
    var {itemWrapperStyle, ...props} = this.props;
    var shouldUpdateChild =
      this.state.updatingAllIndicesAtOrBeyond != null &&
      this.state.updatingAllIndicesAtOrBeyond >= i;
    var Component = component;
    return (
      <StaticContainer key={'nav' + i} shouldUpdate={shouldUpdateChild}>
        <RCTNavigatorItem
          {...props}
          {...route}
          style={[
            styles.stackItem,
            itemWrapperStyle,
            wrapperStyle
          ]}>
          <Component
            navigator={this.navigator}
            route={route}
            {...passProps}
          />
        </RCTNavigatorItem>
      </StaticContainer>
    );
  },

  _renderNavigationStackItems: function() {
    var shouldRecurseToNavigator =
      this.state.makingNavigatorRequest ||
      this.state.updatingAllIndicesAtOrBeyond !== null;
    // If not recursing update to navigator at all, may as well avoid
    // computation of navigator children.
    var items = shouldRecurseToNavigator ?
      this.state.routeStack.map(this._routeToStackItem) : null;
    return (
      <StaticContainer shouldUpdate={shouldRecurseToNavigator}>
        <NavigatorTransitionerIOS
          ref={TRANSITIONER_REF}
          style={styles.transitioner}
          vertical={this.props.vertical}
          requestedTopOfStack={this.state.requestedTopOfStack}
          onNavigationComplete={this._handleNavigationComplete}
          interactivePopGestureEnabled={this.props.interactivePopGestureEnabled}>
          {items}
        </NavigatorTransitionerIOS>
      </StaticContainer>
    );
  },

  render: function() {
    return (
      <View style={this.props.style}>
        {this._renderNavigationStackItems()}
      </View>
    );
  },
});

var styles = StyleSheet.create({
  stackItem: {
    backgroundColor: 'white',
    overflow: 'hidden',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  transitioner: {
    flex: 1,
  },
});

var RCTNavigator = requireNativeComponent('RCTNavigator');
var RCTNavigatorItem = requireNativeComponent('RCTNavItem');

module.exports = NavigatorIOS;