Init: Copy from git@github.com:facebookarchive/react-native-custom-components.git

+LICENSE AGREEMENT
+
+For React Native Custom Components software
+
+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 Custom Components 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.

+# React Native Legacy Custom Components
+
+This is a module for legacy "CustomComponents" to gracefully deprecate.
+
+## Navigator
+
+The navigator component in this module will behave identically as the one in old version of React native, with one exception:
+
+Latest documentation is available here: http://facebook.github.io/react-native/releases/0.43/docs/navigator.html
+
+
+### Breaking Changes from react-native
+
+- Navigator.props.sceneStyle must be a plain object, not a stylesheet!
+
+(this breaking change is needed to avoid calling React Native's private APIs)

+{
+  "name": "react-native-deprecated-custom-components",
+  "version": "0.1.1",
+  "description": "Deprecated custom components that originally shipped with React Native",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:facebookarchive/react-native-custom-components.git"
+  },
+  "main": "src/CustomComponents.js",
+  "dependencies": {
+    "fbjs": "~0.8.9",
+    "immutable": "~3.7.6",
+    "create-react-class": "15.6.0",
+    "prop-types": "^15.5.10",
+    "react-timer-mixin": "^0.13.2",
+    "rebound": "^0.0.13"
+  },
+  "peerDependencies": {
+    "react-native": "*"
+  }
+}

+/**
+ * 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.
+ *
+ */
+
+
+const Navigator = require('./Navigator');
+
+module.exports = {
+  Navigator,
+};

+/**
+ * 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.
+ *
+ * @noflow
+ */
+'use strict';
+
+const EventSubscription = require('./EventSubscription');
+
+import type EventEmitter from './EventEmitter';
+import type EventSubscriptionVendor from './EventSubscriptionVendor';
+
+/**
+ * EmitterSubscription represents a subscription with listener and context data.
+ */
+class EmitterSubscription extends EventSubscription {
+
+  emitter: EventEmitter;
+  listener: Function;
+  context: ?Object;
+
+  /**
+   * @param {EventEmitter} emitter - The event emitter that registered this
+   *   subscription
+   * @param {EventSubscriptionVendor} subscriber - The subscriber that controls
+   *   this subscription
+   * @param {function} listener - Function to invoke when the specified event is
+   *   emitted
+   * @param {*} context - Optional context object to use when invoking the
+   *   listener
+   */
+  constructor(
+    emitter: EventEmitter,
+    subscriber: EventSubscriptionVendor,
+    listener: Function,
+    context: ?Object
+  ) {
+    super(subscriber);
+    this.emitter = emitter;
+    this.listener = listener;
+    this.context = context;
+  }
+
+  /**
+   * Removes this subscription from the emitter that registered it.
+   * Note: we're overriding the `remove()` method of EventSubscription here
+   * but deliberately not calling `super.remove()` as the responsibility
+   * for removing the subscription lies with the EventEmitter.
+   */
+  remove() {
+    this.emitter.removeSubscription(this);
+  }
+}
+
+module.exports = EmitterSubscription;

+/**
+ * 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.
+ *
+ * @noflow
+ * @typecheck
+ */
+'use strict';
+
+const EmitterSubscription = require('./EmitterSubscription');
+const EventSubscriptionVendor = require('./EventSubscriptionVendor');
+
+const emptyFunction = require('fbjs/lib/emptyFunction');
+const invariant = require('fbjs/lib/invariant');
+
+/**
+ * @class EventEmitter
+ * @description
+ * An EventEmitter is responsible for managing a set of listeners and publishing
+ * events to them when it is told that such events happened. In addition to the
+ * data for the given event it also sends a event control object which allows
+ * the listeners/handlers to prevent the default behavior of the given event.
+ *
+ * The emitter is designed to be generic enough to support all the different
+ * contexts in which one might want to emit events. It is a simple multicast
+ * mechanism on top of which extra functionality can be composed. For example, a
+ * more advanced emitter may use an EventHolder and EventFactory.
+ */
+class EventEmitter {
+
+  _subscriber: EventSubscriptionVendor;
+  _currentSubscription: ?EmitterSubscription;
+
+  /**
+   * @constructor
+   *
+   * @param {EventSubscriptionVendor} subscriber - Optional subscriber instance
+   *   to use. If omitted, a new subscriber will be created for the emitter.
+   */
+  constructor(subscriber: ?EventSubscriptionVendor) {
+    this._subscriber = subscriber || new EventSubscriptionVendor();
+  }
+
+  /**
+   * Adds a listener to be invoked when events of the specified type are
+   * emitted. An optional calling context may be provided. The data arguments
+   * emitted will be passed to the listener function.
+   *
+   * TODO: Annotate the listener arg's type. This is tricky because listeners
+   *       can be invoked with varargs.
+   *
+   * @param {string} eventType - Name of the event to listen to
+   * @param {function} listener - Function to invoke when the specified event is
+   *   emitted
+   * @param {*} context - Optional context object to use when invoking the
+   *   listener
+   */
+  addListener(
+    eventType: string, listener: Function, context: ?Object): EmitterSubscription {
+
+    return (this._subscriber.addSubscription(
+      eventType,
+      new EmitterSubscription(this, this._subscriber, listener, context)
+    ) : any);
+  }
+
+  /**
+   * Similar to addListener, except that the listener is removed after it is
+   * invoked once.
+   *
+   * @param {string} eventType - Name of the event to listen to
+   * @param {function} listener - Function to invoke only once when the
+   *   specified event is emitted
+   * @param {*} context - Optional context object to use when invoking the
+   *   listener
+   */
+  once(eventType: string, listener: Function, context: ?Object): EmitterSubscription {
+    return this.addListener(eventType, (...args) => {
+      this.removeCurrentListener();
+      listener.apply(context, args);
+    });
+  }
+
+  /**
+   * Removes all of the registered listeners, including those registered as
+   * listener maps.
+   *
+   * @param {?string} eventType - Optional name of the event whose registered
+   *   listeners to remove
+   */
+  removeAllListeners(eventType: ?string) {
+    this._subscriber.removeAllSubscriptions(eventType);
+  }
+
+  /**
+   * Provides an API that can be called during an eventing cycle to remove the
+   * last listener that was invoked. This allows a developer to provide an event
+   * object that can remove the listener (or listener map) during the
+   * invocation.
+   *
+   * If it is called when not inside of an emitting cycle it will throw.
+   *
+   * @throws {Error} When called not during an eventing cycle
+   *
+   * @example
+   *   var subscription = emitter.addListenerMap({
+   *     someEvent: function(data, event) {
+   *       console.log(data);
+   *       emitter.removeCurrentListener();
+   *     }
+   *   });
+   *
+   *   emitter.emit('someEvent', 'abc'); // logs 'abc'
+   *   emitter.emit('someEvent', 'def'); // does not log anything
+   */
+  removeCurrentListener() {
+    invariant(
+      !!this._currentSubscription,
+      'Not in an emitting cycle; there is no current subscription'
+    );
+    this.removeSubscription(this._currentSubscription);
+  }
+
+  /**
+   * Removes a specific subscription. Called by the `remove()` method of the
+   * subscription itself to ensure any necessary cleanup is performed.
+   */
+  removeSubscription(subscription: EmitterSubscription) {
+    invariant(
+      subscription.emitter === this,
+      'Subscription does not belong to this emitter.'
+    );
+    this._subscriber.removeSubscription(subscription);
+  }
+
+  /**
+   * Returns an array of listeners that are currently registered for the given
+   * event.
+   *
+   * @param {string} eventType - Name of the event to query
+   * @returns {array}
+   */
+  listeners(eventType: string): [EmitterSubscription] {
+    const subscriptions: ?[EmitterSubscription] = (this._subscriber.getSubscriptionsForType(eventType): any);
+    return subscriptions
+      ? subscriptions.filter(emptyFunction.thatReturnsTrue).map(
+          function(subscription) {
+            return subscription.listener;
+          })
+      : [];
+  }
+
+  /**
+   * Emits an event of the given type with the given data. All handlers of that
+   * particular type will be notified.
+   *
+   * @param {string} eventType - Name of the event to emit
+   * @param {...*} Arbitrary arguments to be passed to each registered listener
+   *
+   * @example
+   *   emitter.addListener('someEvent', function(message) {
+   *     console.log(message);
+   *   });
+   *
+   *   emitter.emit('someEvent', 'abc'); // logs 'abc'
+   */
+  emit(eventType: string) {
+    const subscriptions: ?[EmitterSubscription] = (this._subscriber.getSubscriptionsForType(eventType): any);
+    if (subscriptions) {
+      for (let i = 0, l = subscriptions.length; i < l; i++) {
+        const subscription = subscriptions[i];
+
+        // The subscription may have been removed during this event loop.
+        if (subscription) {
+          this._currentSubscription = subscription;
+          subscription.listener.apply(
+            subscription.context,
+            Array.prototype.slice.call(arguments, 1)
+          );
+        }
+      }
+      this._currentSubscription = null;
+    }
+  }
+
+  /**
+   * Removes the given listener for event of specific type.
+   *
+   * @param {string} eventType - Name of the event to emit
+   * @param {function} listener - Function to invoke when the specified event is
+   *   emitted
+   *
+   * @example
+   *   emitter.removeListener('someEvent', function(message) {
+   *     console.log(message);
+   *   }); // removes the listener if already registered
+   *
+   */
+  removeListener(eventType: String, listener) {
+    const subscriptions: ?[EmitterSubscription] = (this._subscriber.getSubscriptionsForType(eventType): any);
+    if (subscriptions) {
+      for (let i = 0, l = subscriptions.length; i < l; i++) {
+        const subscription = subscriptions[i];
+
+        // The subscription may have been removed during this event loop.
+        // its listener matches the listener in method parameters
+        if (subscription && subscription.listener === listener) {
+          subscription.remove();
+        }
+      }
+    }
+  }
+}
+
+module.exports = EventEmitter;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+import type EventSubscriptionVendor from './EventSubscriptionVendor';
+
+/**
+ * EventSubscription represents a subscription to a particular event. It can
+ * remove its own subscription.
+ */
+class EventSubscription {
+
+  eventType: string;
+  key: number;
+  subscriber: EventSubscriptionVendor;
+
+  /**
+   * @param {EventSubscriptionVendor} subscriber the subscriber that controls
+   *   this subscription.
+   */
+  constructor(subscriber: EventSubscriptionVendor) {
+    this.subscriber = subscriber;
+  }
+
+  /**
+   * Removes this subscription from the subscriber that controls it.
+   */
+  remove() {
+    this.subscriber.removeSubscription(this);
+  }
+}
+
+module.exports = EventSubscription;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+const invariant = require('fbjs/lib/invariant');
+
+import type EventSubscription from './EventSubscription';
+
+/**
+ * EventSubscriptionVendor stores a set of EventSubscriptions that are
+ * subscribed to a particular event type.
+ */
+class EventSubscriptionVendor {
+
+  _subscriptionsForType: Object;
+  _currentSubscription: ?EventSubscription;
+
+  constructor() {
+    this._subscriptionsForType = {};
+    this._currentSubscription = null;
+  }
+
+  /**
+   * Adds a subscription keyed by an event type.
+   *
+   * @param {string} eventType
+   * @param {EventSubscription} subscription
+   */
+  addSubscription(
+    eventType: string, subscription: EventSubscription): EventSubscription {
+    invariant(
+      subscription.subscriber === this,
+      'The subscriber of the subscription is incorrectly set.');
+    if (!this._subscriptionsForType[eventType]) {
+      this._subscriptionsForType[eventType] = [];
+    }
+    const key = this._subscriptionsForType[eventType].length;
+    this._subscriptionsForType[eventType].push(subscription);
+    subscription.eventType = eventType;
+    subscription.key = key;
+    return subscription;
+  }
+
+  /**
+   * Removes a bulk set of the subscriptions.
+   *
+   * @param {?string} eventType - Optional name of the event type whose
+   *   registered supscriptions to remove, if null remove all subscriptions.
+   */
+  removeAllSubscriptions(eventType: ?string) {
+    if (eventType === undefined) {
+      this._subscriptionsForType = {};
+    } else {
+      delete this._subscriptionsForType[eventType];
+    }
+  }
+
+  /**
+   * Removes a specific subscription. Instead of calling this function, call
+   * `subscription.remove()` directly.
+   *
+   * @param {object} subscription
+   */
+  removeSubscription(subscription: Object) {
+    const eventType = subscription.eventType;
+    const key = subscription.key;
+
+    const subscriptionsForType = this._subscriptionsForType[eventType];
+    if (subscriptionsForType) {
+      delete subscriptionsForType[key];
+    }
+  }
+
+  /**
+   * Returns the array of subscriptions that are currently registered for the
+   * given event type.
+   *
+   * Note: This array can be potentially sparse as subscriptions are deleted
+   * from it when they are removed.
+   *
+   * TODO: This returns a nullable array. wat?
+   *
+   * @param {string} eventType
+   * @returns {?array}
+   */
+  getSubscriptionsForType(eventType: string): ?[EventSubscription] {
+   return this._subscriptionsForType[eventType];
+  }
+}
+
+module.exports = EventSubscriptionVendor;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+import {InteractionManager} from 'react-native';
+
+/**
+ * This mixin provides safe versions of InteractionManager start/end methods
+ * that ensures `clearInteractionHandle` is always called
+ * once per start, even if the component is unmounted.
+ */
+var InteractionMixin = {
+  componentWillUnmount: function() {
+    while (this._interactionMixinHandles.length) {
+      InteractionManager.clearInteractionHandle(
+        this._interactionMixinHandles.pop()
+      );
+    }
+  },
+
+  _interactionMixinHandles: ([]: Array<number>),
+
+  createInteractionHandle: function() {
+    var handle = InteractionManager.createInteractionHandle();
+    this._interactionMixinHandles.push(handle);
+    return handle;
+  },
+
+  clearInteractionHandle: function(clearHandle: number) {
+    InteractionManager.clearInteractionHandle(clearHandle);
+    this._interactionMixinHandles = this._interactionMixinHandles.filter(
+      handle => handle !== clearHandle
+    );
+  },
+
+  /**
+   * Schedule work for after all interactions have completed.
+   *
+   * @param {function} callback
+   */
+  runAfterInteractions: function(callback: Function) {
+    InteractionManager.runAfterInteractions(callback);
+  },
+};
+
+module.exports = InteractionMixin;

+/**
+ * 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.
+ *
+ * @noflow
+ */
+'use strict';
+
+var NavigationEvent = require('./NavigationEvent');
+var NavigationEventEmitter = require('./NavigationEventEmitter');
+var NavigationTreeNode = require('./NavigationTreeNode');
+
+var emptyFunction = require('fbjs/lib/emptyFunction');
+var invariant = require('fbjs/lib/invariant');
+
+import type EventSubscription from 'EventSubscription';
+
+var {
+  AT_TARGET,
+  BUBBLING_PHASE,
+  CAPTURING_PHASE,
+} = NavigationEvent;
+
+// Event types that do not support event bubbling, capturing and
+// reconciliation API (e.g event.preventDefault(), event.stopPropagation()).
+var LegacyEventTypes = new Set([
+  'willfocus',
+  'didfocus',
+]);
+
+/**
+ * Class that contains the info and methods for app navigation.
+ */
+class NavigationContext {
+  __node: NavigationTreeNode;
+  _bubbleEventEmitter: ?NavigationEventEmitter;
+  _captureEventEmitter: ?NavigationEventEmitter;
+  _currentRoute: any;
+  _emitCounter: number;
+  _emitQueue: Array<any>;
+
+  constructor() {
+    this._bubbleEventEmitter = new NavigationEventEmitter(this);
+    this._captureEventEmitter = new NavigationEventEmitter(this);
+    this._currentRoute = null;
+
+    // Sets the protected property `__node`.
+    this.__node = new NavigationTreeNode(this);
+
+    this._emitCounter = 0;
+    this._emitQueue = [];
+
+    this.addListener('willfocus', this._onFocus);
+    this.addListener('didfocus', this._onFocus);
+  }
+
+  /* $FlowFixMe - get/set properties not yet supported */
+  get parent(): ?NavigationContext {
+    var parent = this.__node.getParent();
+    return parent ? parent.getValue() : null;
+  }
+
+  /* $FlowFixMe - get/set properties not yet supported */
+  get top(): ?NavigationContext {
+    var result = null;
+    var parentNode = this.__node.getParent();
+    while (parentNode) {
+      result = parentNode.getValue();
+      parentNode = parentNode.getParent();
+    }
+    return result;
+  }
+
+  /* $FlowFixMe - get/set properties not yet supported */
+  get currentRoute(): any {
+    return this._currentRoute;
+  }
+
+  appendChild(childContext: NavigationContext): void {
+    this.__node.appendChild(childContext.__node);
+  }
+
+  addListener(
+    eventType: string,
+    listener: Function,
+    useCapture: ?boolean
+  ): EventSubscription {
+    if (LegacyEventTypes.has(eventType)) {
+      useCapture = false;
+    }
+
+    var emitter = useCapture ?
+      this._captureEventEmitter :
+      this._bubbleEventEmitter;
+
+    if (emitter) {
+      return emitter.addListener(eventType, listener, this);
+    } else {
+      return {remove: emptyFunction};
+    }
+  }
+
+  emit(eventType: String, data: any, didEmitCallback: ?Function): void {
+    if (this._emitCounter > 0) {
+      // An event cycle that was previously created hasn't finished yet.
+      // Put this event cycle into the queue and will finish them later.
+      var args: any = Array.prototype.slice.call(arguments);
+      this._emitQueue.push(args);
+      return;
+    }
+
+    this._emitCounter++;
+
+    if (LegacyEventTypes.has(eventType)) {
+      // Legacy events does not support event bubbling and reconciliation.
+      this.__emit(
+        eventType,
+        data,
+        null,
+        {
+          defaultPrevented: false,
+          eventPhase: AT_TARGET,
+          propagationStopped: true,
+          target: this,
+        }
+      );
+    } else {
+      var targets = [this];
+      var parentTarget = this.parent;
+      while (parentTarget) {
+        targets.unshift(parentTarget);
+        parentTarget = parentTarget.parent;
+      }
+
+      var propagationStopped = false;
+      var defaultPrevented = false;
+      var callback = (event) => {
+        propagationStopped = propagationStopped || event.isPropagationStopped();
+        defaultPrevented = defaultPrevented || event.defaultPrevented;
+      };
+
+      // Capture phase
+      targets.some((currentTarget) => {
+        if (propagationStopped) {
+          return true;
+        }
+
+        var extraInfo = {
+          defaultPrevented,
+          eventPhase: CAPTURING_PHASE,
+          propagationStopped,
+          target: this,
+        };
+
+        currentTarget.__emit(eventType, data, callback, extraInfo);
+      }, this);
+
+      // bubble phase
+      targets.reverse().some((currentTarget) => {
+        if (propagationStopped) {
+          return true;
+        }
+        var extraInfo = {
+          defaultPrevented,
+          eventPhase: BUBBLING_PHASE,
+          propagationStopped,
+          target: this,
+        };
+        currentTarget.__emit(eventType, data, callback, extraInfo);
+      }, this);
+    }
+
+    if (didEmitCallback) {
+      var event = NavigationEvent.pool(eventType, this, data);
+      propagationStopped && event.stopPropagation();
+      defaultPrevented && event.preventDefault();
+      didEmitCallback.call(this, event);
+      event.dispose();
+    }
+
+    this._emitCounter--;
+    while (this._emitQueue.length) {
+      var args: any = this._emitQueue.shift();
+      this.emit.apply(this, args);
+    }
+  }
+
+  dispose(): void {
+    // clean up everything.
+    this._bubbleEventEmitter && this._bubbleEventEmitter.removeAllListeners();
+    this._captureEventEmitter && this._captureEventEmitter.removeAllListeners();
+    this._bubbleEventEmitter = null;
+    this._captureEventEmitter = null;
+    this._currentRoute = null;
+  }
+
+  // This method `__method` is protected.
+  __emit(
+    eventType: String,
+    data: any,
+    didEmitCallback: ?Function,
+    extraInfo: Object,
+  ): void {
+    var emitter;
+    switch (extraInfo.eventPhase) {
+      case CAPTURING_PHASE: // phase = 1
+        emitter = this._captureEventEmitter;
+        break;
+
+      case AT_TARGET: // phase = 2
+        emitter = this._bubbleEventEmitter;
+        break;
+
+      case BUBBLING_PHASE: // phase = 3
+        emitter = this._bubbleEventEmitter;
+        break;
+
+      default:
+        invariant(false, 'invalid event phase %s', extraInfo.eventPhase);
+    }
+
+    if (extraInfo.target === this) {
+      // phase = 2
+      extraInfo.eventPhase = AT_TARGET;
+    }
+
+    if (emitter) {
+      emitter.emit(
+        eventType,
+        data,
+        didEmitCallback,
+        extraInfo
+      );
+    }
+  }
+
+  _onFocus(event: NavigationEvent): void {
+    invariant(
+      event.data && event.data.hasOwnProperty('route'),
+      'event type "%s" should provide route',
+      event.type
+    );
+
+    this._currentRoute = event.data.route;
+  }
+}
+
+module.exports = NavigationContext;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+const invariant = require('fbjs/lib/invariant');
+
+class NavigationEventPool {
+  _list: Array<any>;
+
+  constructor() {
+    this._list = [];
+  }
+
+  get(type: string, currentTarget: Object, data: any): NavigationEvent {
+    let event;
+    if (this._list.length > 0) {
+      event = this._list.pop();
+      event.constructor.call(event, type, currentTarget, data);
+    } else {
+      event = new NavigationEvent(type, currentTarget, data);
+    }
+    return event;
+  }
+
+  put(event: NavigationEvent) {
+    this._list.push(event);
+  }
+}
+
+const _navigationEventPool = new NavigationEventPool();
+
+/**
+ * The NavigationEvent interface represents any event of the navigation.
+ * It contains common properties and methods to any event.
+ *
+ * == Important Properties ==
+ *
+ * - target:
+ *   A reference to the navigation context that dispatched the event. It is
+ *   different from event.currentTarget when the event handler is called during
+ *   the bubbling or capturing phase of the event.
+ *
+ * - currentTarget:
+ *   Identifies the current target for the event, as the event traverses the
+ *   navigation context tree. It always refers to the navigation context the
+ *   event handler has been attached to as opposed to event.target which
+ *   identifies the navigation context on which the event occurred.
+ *
+ * - eventPhase:
+ *   Returns an integer value which specifies the current evaluation phase of
+ *   the event flow; possible values are listed in NavigationEvent phase
+ *   constants below.
+ */
+class NavigationEvent {
+  static AT_TARGET: number;
+  static BUBBLING_PHASE: number;
+  static CAPTURING_PHASE: number;
+  static NONE: number;
+
+  _currentTarget: ?Object;
+  _data: any;
+  _defaultPrevented: boolean;
+  _disposed: boolean;
+  _propagationStopped: boolean;
+  _type: string;
+
+  target: ?Object;
+
+  // Returns an integer value which specifies the current evaluation phase of
+  // the event flow.
+  eventPhase: number;
+
+  static pool(type: string, currentTarget: Object, data: any): NavigationEvent {
+    return _navigationEventPool.get(type, currentTarget, data);
+  }
+
+  constructor(type: string, currentTarget: Object, data: any) {
+    this.target = currentTarget;
+    this.eventPhase = NavigationEvent.NONE;
+
+    this._type = type;
+    this._currentTarget = currentTarget;
+    this._data = data;
+    this._defaultPrevented = false;
+    this._disposed = false;
+    this._propagationStopped = false;
+  }
+
+  get type(): string {
+    return this._type;
+  }
+
+  get currentTarget(): ?Object {
+    return this._currentTarget;
+  }
+
+  get data(): any {
+    return this._data;
+  }
+
+  get defaultPrevented(): boolean {
+    return this._defaultPrevented;
+  }
+
+  preventDefault(): void {
+    this._defaultPrevented = true;
+  }
+
+  stopPropagation(): void {
+    this._propagationStopped = true;
+  }
+
+  stop(): void {
+    this.preventDefault();
+    this.stopPropagation();
+  }
+
+  isPropagationStopped(): boolean {
+    return this._propagationStopped;
+  }
+
+  /**
+   * Dispose the event.
+   * NavigationEvent shall be disposed after being emitted by
+   * `NavigationEventEmitter`.
+   */
+  dispose(): void {
+    invariant(!this._disposed, 'NavigationEvent is already disposed');
+    this._disposed = true;
+
+    // Clean up.
+    this.target = null;
+    this.eventPhase = NavigationEvent.NONE;
+    this._type = '';
+    this._currentTarget = null;
+    this._data = null;
+    this._defaultPrevented = false;
+
+    // Put this back to the pool to reuse the instance.
+    _navigationEventPool.put(this);
+  }
+}
+
+/**
+ * Event phase constants.
+ * These values describe which phase the event flow is currently being
+ * evaluated.
+ */
+
+// No event is being processed at this time.
+NavigationEvent.NONE = 0;
+
+// The event is being propagated through the currentTarget's ancestor objects.
+NavigationEvent.CAPTURING_PHASE = 1;
+
+// The event has arrived at the event's currentTarget. Event listeners registered for
+// this phase are called at this time.
+NavigationEvent.AT_TARGET = 2;
+
+// The event is propagating back up through the currentTarget's ancestors in reverse
+// order, starting with the parent. This is known as bubbling, and occurs only
+// if event propagation isn't prevented. Event listeners registered for this
+// phase are triggered during this process.
+NavigationEvent.BUBBLING_PHASE = 3;
+
+module.exports = NavigationEvent;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+var EventEmitter = require('./EventEmitter');
+var NavigationEvent = require('./NavigationEvent');
+
+type ExtraInfo = {
+  defaultPrevented: ?boolean,
+  eventPhase: ?number,
+  propagationStopped: ?boolean,
+  target: ?Object,
+};
+
+class NavigationEventEmitter extends EventEmitter {
+  _emitQueue: Array<any>;
+  _emitting: boolean;
+  _target: Object;
+
+  constructor(target: Object) {
+    super();
+    this._emitting = false;
+    this._emitQueue = [];
+    this._target = target;
+  }
+
+  emit(
+    eventType: string,
+    data: any,
+    didEmitCallback: ?Function,
+    extraInfo: ?ExtraInfo
+  ): void {
+    if (this._emitting) {
+      // An event cycle that was previously created hasn't finished yet.
+      // Put this event cycle into the queue and will finish them later.
+      var args: any = Array.prototype.slice.call(arguments);
+      this._emitQueue.push(args);
+      return;
+    }
+
+    this._emitting = true;
+
+    var event = NavigationEvent.pool(eventType, this._target, data);
+
+    if (extraInfo) {
+      if (extraInfo.target) {
+        event.target = extraInfo.target;
+      }
+
+      if (extraInfo.eventPhase) {
+        event.eventPhase = extraInfo.eventPhase;
+      }
+
+      if (extraInfo.defaultPrevented) {
+        event.preventDefault();
+      }
+
+      if (extraInfo.propagationStopped) {
+        event.stopPropagation();
+      }
+    }
+
+    // EventEmitter#emit only takes `eventType` as `String`. Casting `eventType`
+    // to `String` to make @flow happy.
+    super.emit(String(eventType), event);
+
+    if (typeof didEmitCallback === 'function') {
+      didEmitCallback.call(this._target, event);
+    }
+    event.dispose();
+
+    this._emitting = false;
+
+    while (this._emitQueue.length) {
+      var args: any = this._emitQueue.shift();
+      this.emit.apply(this, args);
+    }
+  }
+}
+
+module.exports = NavigationEventEmitter;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+var immutable = require('immutable');
+var invariant = require('fbjs/lib/invariant');
+
+type IterationCallback = (route: any, index: number, key: string) => void;
+
+var {List, Set} = immutable;
+
+function isRouteEmpty(route: any): boolean {
+  return (route === undefined || route === null || route === '') || false;
+}
+
+var _nextID = 0;
+
+class RouteNode {
+  key: string;
+  value: any;
+  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
+    // earlier.
+    this.key = String(_nextID++);
+
+    this.value = route;
+  }
+}
+
+var StackDiffRecord = immutable.Record({
+  key: null,
+  route: null,
+  index: null,
+});
+
+/**
+ * The immutable route stack.
+ */
+class RouteStack {
+  _index: number;
+
+  _routeNodes: List<RouteNode>;
+
+  constructor(index: number, routeNodes: List<RouteNode>) {
+    invariant(
+      routeNodes.size > 0,
+      'size must not be empty'
+    );
+
+    invariant(
+      index > -1 && index <= routeNodes.size - 1,
+      'index out of bound'
+    );
+
+    this._routeNodes = routeNodes;
+    this._index = index;
+  }
+
+  get size(): number {
+    return this._routeNodes.size;
+  }
+
+  get index(): number {
+    return this._index;
+  }
+
+  toArray(): Array<any> {
+    var result = [];
+    var ii = 0;
+    var nodes = this._routeNodes;
+    while (ii < nodes.size) {
+      result.push(nodes.get(ii).value);
+      ii++;
+    }
+    return result;
+  }
+
+  get(index: number): any {
+    if (index < 0 || index > this._routeNodes.size - 1) {
+      return null;
+    }
+    return this._routeNodes.get(index).value;
+  }
+
+  /**
+   * Returns the key associated with the route.
+   * When a route is added to a stack, the stack creates a key for this route.
+   * The key will persist until the initial stack and its derived stack
+   * no longer contains this route.
+   */
+  keyOf(route: any): ?string {
+    if (isRouteEmpty(route)) {
+      return null;
+    }
+    var index = this.indexOf(route);
+    return index > -1 ?
+      this._routeNodes.get(index).key :
+      null;
+  }
+
+  indexOf(route: any): number {
+    if (isRouteEmpty(route)) {
+      return -1;
+    }
+
+    var finder = (node) => {
+      return (node: RouteNode).value === route;
+    };
+
+    return this._routeNodes.findIndex(finder, this);
+  }
+
+  slice(begin?: number, end?: number): RouteStack {
+    var routeNodes = this._routeNodes.slice(begin, end);
+    var index = Math.min(this._index, routeNodes.size - 1);
+    return this._update(index, routeNodes);
+  }
+
+  /**
+   * Returns a new stack with the provided route appended,
+   * starting at this stack size.
+   */
+  push(route: any): RouteStack {
+
+    invariant(
+      !isRouteEmpty(route),
+      'Must supply route to push'
+    );
+
+    invariant(this._routeNodes.indexOf(route) === -1, 'route must be unique');
+
+    // When pushing, removes the rest of the routes past the current index.
+    var routeNodes = this._routeNodes.withMutations((list: List<RouteNode>) => {
+      list.slice(0, this._index + 1).push(new RouteNode(route));
+    });
+
+    return this._update(routeNodes.size - 1, routeNodes);
+  }
+
+  /**
+   * Returns a new stack a size ones less than this stack,
+   * excluding the last index in this stack.
+   */
+  pop(): RouteStack {
+    invariant(this._routeNodes.size > 1, 'should not pop routeNodes stack to empty');
+
+    // When popping, removes the rest of the routes past the current index.
+    var routeNodes = this._routeNodes.slice(0, this._index);
+    return this._update(routeNodes.size - 1, routeNodes);
+  }
+
+  jumpToIndex(index: number): RouteStack {
+    invariant(
+      index > -1 && index < this._routeNodes.size,
+      'index out of bound'
+    );
+
+    return this._update(index, this._routeNodes);
+  }
+
+  /**
+   * Replace a route in the navigation stack.
+   *
+   * `index` specifies the route in the stack that should be replaced.
+   * If it's negative, it counts from the back.
+   */
+  replaceAtIndex(index: number, route: any): RouteStack {
+    invariant(
+      !isRouteEmpty(route),
+      'Must supply route to replace'
+    );
+
+    if (this.get(index) === route) {
+      return this;
+    }
+
+    invariant(this.indexOf(route) === -1, 'route must be unique');
+
+    if (index < 0) {
+      index += this._routeNodes.size;
+    }
+
+    invariant(
+      index > -1 && index < this._routeNodes.size,
+      'index out of bound'
+    );
+
+    var routeNodes = this._routeNodes.set(index, new RouteNode(route));
+    return this._update(index, routeNodes);
+  }
+
+  // Iterations
+  forEach(callback: IterationCallback, context: ?Object): void {
+    var ii = 0;
+    var nodes = this._routeNodes;
+    while (ii < nodes.size) {
+      var node = nodes.get(ii);
+      callback.call(context, node.value, ii, node.key);
+      ii++;
+    }
+  }
+
+  mapToArray(callback: IterationCallback, context: ?Object): Array<any> {
+    var result = [];
+    this.forEach((route, index, key) => {
+      result.push(callback.call(context, route, index, key));
+    });
+    return result;
+  }
+
+  /**
+   * Returns a Set excluding any routes contained within the stack given.
+   */
+  subtract(stack: RouteStack): Set<StackDiffRecord> {
+    var items = [];
+    this._routeNodes.forEach((node: RouteNode, index: number) => {
+      if (!stack._routeNodes.contains(node)) {
+        items.push(
+          new StackDiffRecord({
+            route: node.value,
+            index: index,
+            key: node.key,
+          })
+        );
+      }
+    });
+    return new Set(items);
+  }
+
+  _update(index: number, routeNodes: List<RouteNode>): RouteStack {
+    if (this._index === index && this._routeNodes === routeNodes) {
+      return this;
+    }
+    return new RouteStack(index, routeNodes);
+  }
+}
+
+/**
+ * The first class data structure for NavigationContext to manage the navigation
+ * stack of routes.
+ */
+class NavigationRouteStack extends RouteStack {
+  constructor(index: number, routeNodes: Array<any>) {
+    // For now, `RouteStack` internally,  uses an immutable `List` to keep
+    // track of routeNodes. Since using `List` is really just the implementation
+    // detail, we don't want to accept `routeNodes` as `list` from constructor
+    // for developer.
+    var nodes = routeNodes.map((route) => {
+      invariant(!isRouteEmpty(route), 'route must not be mepty');
+      return new RouteNode(route);
+    });
+
+    super(index, new List(nodes));
+  }
+}
+
+module.exports = NavigationRouteStack;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+var invariant = require('fbjs/lib/invariant');
+var immutable = require('immutable');
+
+var {List} = immutable;
+
+/**
+ * Utility to build a tree of nodes.
+ * Note that this tree does not perform cyclic redundancy check
+ * while appending child node.
+ */
+class NavigationTreeNode {
+  __parent: ?NavigationTreeNode;
+
+  _children: List<NavigationTreeNode>;
+
+  _value: any;
+
+  constructor(value: any) {
+    this.__parent = null;
+    this._children = new List();
+    this._value = value;
+  }
+
+  getValue(): any {
+    return this._value;
+  }
+
+  getParent(): ?NavigationTreeNode {
+    return this.__parent;
+  }
+
+  getChildrenCount(): number {
+    return this._children.size;
+  }
+
+  getChildAt(index: number): ?NavigationTreeNode {
+    return index > -1 && index < this._children.size ?
+      this._children.get(index) :
+      null;
+  }
+
+  appendChild(child: NavigationTreeNode): void {
+    if (child.__parent) {
+      child.__parent.removeChild(child);
+    }
+    child.__parent = this;
+    this._children = this._children.push(child);
+  }
+
+  removeChild(child: NavigationTreeNode): void {
+    var index = this._children.indexOf(child);
+
+    invariant(
+      index > -1,
+      'The node to be removed is not a child of this node.'
+    );
+
+    child.__parent = null;
+
+    this._children = this._children.splice(index, 1);
+  }
+
+  indexOf(child: NavigationTreeNode): number {
+    return this._children.indexOf(child);
+  }
+
+  forEach(callback: Function, context: any): void {
+    this._children.forEach(callback, context);
+  }
+
+  map(callback: Function, context: any): Array<NavigationTreeNode> {
+    return this._children.map(callback, context).toJS();
+  }
+
+  some(callback: Function, context: any): boolean {
+    return this._children.some(callback, context);
+  }
+}
+
+
+module.exports = NavigationTreeNode;

+/**
+ * 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.
+ *
+ */
+ /* eslint-disable no-extra-boolean-cast*/
+'use strict';
+
+var buildStyleInterpolator = require('./buildStyleInterpolator');
+
+import {
+  Dimensions,
+  PanResponder,
+  NativeModules,
+  StyleSheet,
+  TVEventHandler,
+  View,
+  ViewPropTypes,
+} from 'react-native';
+
+var AnimationsDebugModule = NativeModules.AnimationsDebugModule;
+var InteractionMixin = require('./InteractionMixin');
+var NavigationContext = require('./NavigationContext');
+var NavigatorBreadcrumbNavigationBar = require('./NavigatorBreadcrumbNavigationBar');
+var NavigatorNavigationBar = require('./NavigatorNavigationBar');
+var NavigatorSceneConfigs = require('./NavigatorSceneConfigs');
+var React = require('react');
+var Subscribable = require('./Subscribable');
+var TimerMixin = require('react-timer-mixin');
+
+var createReactClass = require('create-react-class');
+var clamp = require('./clamp');
+var invariant = require('fbjs/lib/invariant');
+var rebound = require('rebound');
+
+var flattenStyle = require('./flattenStyle');
+
+var PropTypes = require('prop-types');
+
+// TODO: this is not ideal because there is no guarantee that the navigator
+// is full screen, however we don't have a good way to measure the actual
+// size of the navigator right now, so this is the next best thing.
+var SCREEN_WIDTH = Dimensions.get('window').width;
+var SCREEN_HEIGHT = Dimensions.get('window').height;
+var SCENE_DISABLED_NATIVE_PROPS = {
+  pointerEvents: 'none',
+  style: {
+    top: SCREEN_HEIGHT,
+    bottom: -SCREEN_HEIGHT,
+    opacity: 0,
+  },
+};
+
+var __uid = 0;
+function getuid() {
+  return __uid++;
+}
+
+function getRouteID(route) {
+  if (route === null || typeof route !== 'object') {
+    return String(route);
+  }
+
+  var key = '__navigatorRouteID';
+
+  if (!route.hasOwnProperty(key)) {
+    Object.defineProperty(route, key, {
+      enumerable: false,
+      configurable: false,
+      writable: false,
+      value: getuid(),
+    });
+  }
+  return route[key];
+}
+
+
+const BASE_SCENE_STYLE = {
+  position: 'absolute',
+  overflow: 'hidden',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  top: 0,
+};
+
+const DEFAULT_SCENE_STYLE = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  top: 0,
+  transform: [
+    {translateX: 0},
+    {translateY: 0},
+    {scaleX: 1},
+    {scaleY: 1},
+    {rotate: '0deg'},
+    {skewX: '0deg'},
+    {skewY: '0deg'},
+  ],
+};
+
+// styles moved to the top of the file so getDefaultProps can refer to it
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  defaultSceneStyle: DEFAULT_SCENE_STYLE,
+  baseScene: BASE_SCENE_STYLE,
+  disabledScene: {
+    top: SCREEN_HEIGHT,
+    bottom: -SCREEN_HEIGHT,
+  },
+  transitioner: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    overflow: 'hidden',
+  }
+});
+
+var GESTURE_ACTIONS = [
+  'pop',
+  'jumpBack',
+  'jumpForward',
+];
+
+/**
+ * `Navigator` handles the transition between different scenes in your app.
+ * It is implemented in JavaScript and is available on both iOS and Android. If
+ * you are targeting iOS only, you may also want to consider using
+ * [`NavigatorIOS`](docs/navigatorios.html) as it leverages native UIKit
+ * navigation.
+ *
+ * To set up the `Navigator` you provide one or more objects called routes,
+ * to identify each scene. You also provide a `renderScene` function that
+ * renders the scene for each route object.
+ *
+ * ```
+ * import React, { Component } from 'react';
+ * import { Text, Navigator, TouchableHighlight } from 'react-native';
+ *
+ * export default class NavAllDay extends Component {
+ *   render() {
+ *     return (
+ *       <Navigator
+ *         initialRoute={{ title: 'Awesome Scene', index: 0 }}
+ *         renderScene={(route, navigator) =>
+ *           <Text>Hello {route.title}!</Text>
+ *         }
+ *         style={{padding: 100}}
+ *       />
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * In the above example, `initialRoute` is used to specify the first route. It
+ * contains a `title` property that identifies the route. The `renderScene`
+ * prop returns a function that displays text based on the route's title.
+ *
+ * ### Additional Scenes
+ *
+ * The first example demonstrated one scene. To set up multiple scenes, you pass
+ * the `initialRouteStack` prop to `Navigator`:
+ *
+ * ```
+ * render() {
+ *   const routes = [
+ *     {title: 'First Scene', index: 0},
+ *     {title: 'Second Scene', index: 1},
+ *   ];
+ *   return (
+ *     <Navigator
+ *       initialRoute={routes[0]}
+ *       initialRouteStack={routes}
+ *       renderScene={(route, navigator) =>
+ *         <TouchableHighlight onPress={() => {
+ *           if (route.index === 0) {
+ *             navigator.push(routes[1]);
+ *           } else {
+ *             navigator.pop();
+ *           }
+ *         }}>
+ *         <Text>Hello {route.title}!</Text>
+ *         </TouchableHighlight>
+ *       }
+ *       style={{padding: 100}}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * In the above example, a `routes` variable is defined with two route objects
+ * representing two scenes. Each route has an `index` property that is used to
+ * manage the scene being rendered. The `renderScene` method is changed to
+ * either push or pop the navigator depending on the current route's index.
+ * Finally, the `Text` component in the scene is now wrapped in a
+ * `TouchableHighlight` component to help trigger the navigator transitions.
+ *
+ * ### Navigation Bar
+ *
+ * You can optionally pass in your own navigation bar by returning a
+ * `Navigator.NavigationBar` component to the `navigationBar` prop in
+ * `Navigator`. You can configure the navigation bar properties, through
+ * the `routeMapper` prop. There you set up the left, right, and title
+ * properties of the navigation bar:
+ *
+ * ```
+ * <Navigator
+ *   renderScene={(route, navigator) =>
+ *     // ...
+ *   }
+ *   navigationBar={
+ *      <Navigator.NavigationBar
+ *        routeMapper={{
+ *          LeftButton: (route, navigator, index, navState) =>
+ *           { return (<Text>Cancel</Text>); },
+ *          RightButton: (route, navigator, index, navState) =>
+ *            { return (<Text>Done</Text>); },
+ *          Title: (route, navigator, index, navState) =>
+ *            { return (<Text>Awesome Nav Bar</Text>); },
+ *        }}
+ *        style={{backgroundColor: 'gray'}}
+ *      />
+ *   }
+ * />
+ * ```
+ *
+ * When configuring the left, right, and title items for the navigation bar,
+ * you have access to info such as the current route object and navigation
+ * state. This allows you to customize the title for each scene as well as
+ * the buttons. For example, you can choose to hide the left button for one of
+ * the scenes.
+ *
+ * Typically you want buttons to represent the left and right buttons. Building
+ * on the previous example, you can set this up as follows:
+ *
+ * ```
+ * LeftButton: (route, navigator, index, navState) =>
+ *   {
+ *     if (route.index === 0) {
+ *       return null;
+ *     } else {
+ *       return (
+ *         <TouchableHighlight onPress={() => navigator.pop()}>
+ *           <Text>Back</Text>
+ *         </TouchableHighlight>
+ *       );
+ *     }
+ *   },
+ * ```
+ *
+ * This sets up a left navigator bar button that's visible on scenes after the
+ * the first one. When the button is tapped the navigator is popped.
+ *
+ * Another type of navigation bar, with breadcrumbs, is provided by
+ * `Navigator.BreadcrumbNavigationBar`. You can also provide your own navigation
+ * bar by passing it through the `navigationBar` prop. See the
+ * [UIExplorer](https://github.com/facebook/react-native/tree/master/Examples/UIExplorer)
+ * demo to try out both built-in navigation bars out and see how to use them.
+ *
+ * ### Scene Transitions
+ *
+ * To change the animation or gesture properties of the scene, provide a
+ * `configureScene` prop to get the config object for a given route:
+ *
+ * ```
+ * <Navigator
+ *   renderScene={(route, navigator) =>
+ *     // ...
+ *   }
+ *   configureScene={(route, routeStack) =>
+ *     Navigator.SceneConfigs.FloatFromBottom}
+ * />
+ * ```
+ * In the above example, the newly pushed scene will float up from the bottom.
+ * See `Navigator.SceneConfigs` for default animations and more info on
+ * available [scene config options](docs/navigator.html#configurescene).
+ */
+var Navigator = createReactClass({
+
+  propTypes: {
+    /**
+     * Optional function where you can configure scene animations and
+     * gestures. Will be invoked with `route` and `routeStack` parameters,
+     * where `route` corresponds to the current scene being rendered by the
+     * `Navigator` and `routeStack` is the set of currently mounted routes
+     * that the navigator could transition to.
+     *
+     * The function should return a scene configuration object.
+     *
+     * ```
+     * (route, routeStack) => Navigator.SceneConfigs.FloatFromRight
+     * ```
+     *
+     * Available scene configuration options are:
+     *
+     *  - Navigator.SceneConfigs.PushFromRight (default)
+     *  - Navigator.SceneConfigs.FloatFromRight
+     *  - Navigator.SceneConfigs.FloatFromLeft
+     *  - Navigator.SceneConfigs.FloatFromBottom
+     *  - Navigator.SceneConfigs.FloatFromBottomAndroid
+     *  - Navigator.SceneConfigs.FadeAndroid
+     *  - Navigator.SceneConfigs.SwipeFromLeft
+     *  - Navigator.SceneConfigs.HorizontalSwipeJump
+     *  - Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
+     *  - Navigator.SceneConfigs.HorizontalSwipeJumpFromLeft
+     *  - Navigator.SceneConfigs.VerticalUpSwipeJump
+     *  - Navigator.SceneConfigs.VerticalDownSwipeJump
+     *
+     */
+    configureScene: PropTypes.func,
+
+    /**
+     * Required function which renders the scene for a given route. Will be
+     * invoked with the `route` and the `navigator` object.
+     *
+     * ```
+     * (route, navigator) =>
+     *   <MySceneComponent title={route.title} navigator={navigator} />
+     * ```
+     */
+    renderScene: PropTypes.func.isRequired,
+
+    /**
+     * The initial route for navigation. A route is an object that the navigator
+     * will use to identify each scene it renders.
+     *
+     * If both `initialRoute` and `initialRouteStack` props are passed to
+     * `Navigator`, then `initialRoute` must be in a route in
+     * `initialRouteStack`. If `initialRouteStack` is passed as a prop but
+     * `initialRoute` is not, then `initialRoute` will default internally to
+     * the last item in `initialRouteStack`.
+     */
+    initialRoute: PropTypes.object,
+
+    /**
+     * Pass this in to provide a set of routes to initially mount. This prop
+     * is required if `initialRoute` is not provided to the navigator. If this
+     * prop is not passed in, it will default internally to an array
+     * containing only `initialRoute`.
+     */
+    initialRouteStack: PropTypes.arrayOf(PropTypes.object),
+
+    /**
+     * Pass in a function to get notified with the target route when
+     * the navigator component is mounted and before each navigator transition.
+     */
+    onWillFocus: PropTypes.func,
+
+    /**
+     * Will be called with the new route of each scene after the transition is
+     * complete or after the initial mounting.
+     */
+    onDidFocus: PropTypes.func,
+
+    /**
+     * Use this to provide an optional component representing a navigation bar
+     * that is persisted across scene transitions. This component will receive
+     * two props: `navigator` and `navState` representing the navigator
+     * component and its state. The component is re-rendered when the route
+     * changes.
+     */
+    navigationBar: PropTypes.node,
+
+    /**
+     * Optionally pass in the navigator object from a parent `Navigator`.
+     */
+    navigator: PropTypes.object,
+
+    /**
+     * Styles to apply to the container of each scene.
+     */
+    sceneStyle: ViewPropTypes.style,
+  },
+
+  statics: {
+    BreadcrumbNavigationBar: NavigatorBreadcrumbNavigationBar,
+    NavigationBar: NavigatorNavigationBar,
+    SceneConfigs: NavigatorSceneConfigs,
+  },
+
+  mixins: [TimerMixin, InteractionMixin, Subscribable.Mixin],
+
+  getDefaultProps: function() {
+    return {
+      configureScene: () => NavigatorSceneConfigs.PushFromRight,
+      sceneStyle: DEFAULT_SCENE_STYLE,
+    };
+  },
+
+  getInitialState: function() {
+    this._navigationBarNavigator = this.props.navigationBarNavigator || this;
+
+    this._renderedSceneMap = new Map();
+
+    this._sceneRefs = [];
+
+    var routeStack = this.props.initialRouteStack || [this.props.initialRoute];
+    invariant(
+      routeStack.length >= 1,
+      'Navigator requires props.initialRoute or props.initialRouteStack.'
+    );
+    var initialRouteIndex = routeStack.length - 1;
+    if (this.props.initialRoute) {
+      initialRouteIndex = routeStack.indexOf(this.props.initialRoute);
+      invariant(
+        initialRouteIndex !== -1,
+        'initialRoute is not in initialRouteStack.'
+      );
+    }
+    return {
+      sceneConfigStack: routeStack.map(
+        (route) => this.props.configureScene(route, routeStack)
+      ),
+      routeStack,
+      presentedIndex: initialRouteIndex,
+      transitionFromIndex: null,
+      activeGesture: null,
+      pendingGestureProgress: null,
+      transitionQueue: [],
+    };
+  },
+
+  componentWillMount: function() {
+    // TODO(t7489503): Don't need this once ES6 Class landed.
+    this.__defineGetter__('navigationContext', this._getNavigationContext);
+
+    this._subRouteFocus = [];
+    this.parentNavigator = this.props.navigator;
+    this._handlers = {};
+    this.springSystem = new rebound.SpringSystem();
+    this.spring = this.springSystem.createSpring();
+    this.spring.setRestSpeedThreshold(0.05);
+    this.spring.setCurrentValue(0).setAtRest();
+    this.spring.addListener({
+      onSpringEndStateChange: () => {
+        if (!this._interactionHandle) {
+          this._interactionHandle = this.createInteractionHandle();
+        }
+      },
+      onSpringUpdate: () => {
+        this._handleSpringUpdate();
+      },
+      onSpringAtRest: () => {
+        this._completeTransition();
+      },
+    });
+    this.panGesture = PanResponder.create({
+      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
+      onPanResponderRelease: this._handlePanResponderRelease,
+      onPanResponderMove: this._handlePanResponderMove,
+      onPanResponderTerminate: this._handlePanResponderTerminate,
+    });
+    this._interactionHandle = null;
+    this._emitWillFocus(this.state.routeStack[this.state.presentedIndex]);
+  },
+
+  componentDidMount: function() {
+    this._isMounted = true;
+    this._handleSpringUpdate();
+    this._emitDidFocus(this.state.routeStack[this.state.presentedIndex]);
+    this._enableTVEventHandler();
+  },
+
+  componentWillUnmount: function() {
+    this._isMounted = false;
+    if (this._navigationContext) {
+      this._navigationContext.dispose();
+      this._navigationContext = null;
+    }
+
+    this.spring.destroy();
+
+    if (this._interactionHandle) {
+      this.clearInteractionHandle(this._interactionHandle);
+    }
+
+    this._disableTVEventHandler();
+  },
+
+  /**
+   * Reset every scene with an array of routes.
+   *
+   * @param {RouteStack} nextRouteStack Next route stack to reinitialize.
+   * All existing route stacks are destroyed and potentially recreated. There
+   * is no accompanying animation and this method immediately replaces and
+   * re-renders the navigation bar and the stack items.
+   */
+  immediatelyResetRouteStack: function(nextRouteStack) {
+    var destIndex = nextRouteStack.length - 1;
+    this._emitWillFocus(nextRouteStack[destIndex]);
+    this.setState({
+      routeStack: nextRouteStack,
+      sceneConfigStack: nextRouteStack.map(
+        route => this.props.configureScene(route, nextRouteStack)
+      ),
+      presentedIndex: destIndex,
+      activeGesture: null,
+      transitionFromIndex: null,
+      transitionQueue: [],
+    }, () => {
+      this._handleSpringUpdate();
+      var navBar = this._navBar;
+      if (navBar && navBar.immediatelyRefresh) {
+        navBar.immediatelyRefresh();
+      }
+      this._emitDidFocus(this.state.routeStack[this.state.presentedIndex]);
+    });
+  },
+
+  _transitionTo: function(destIndex, velocity, jumpSpringTo, cb) {
+    if (this.state.presentedIndex === destIndex) {
+      cb && cb();
+      return;
+    }
+
+    if (this.state.transitionFromIndex !== null) {
+      // Navigation is still transitioning, put the `destIndex` into queue.
+      this.state.transitionQueue.push({
+        destIndex,
+        velocity,
+        cb,
+      });
+      return;
+    }
+
+    this.state.transitionFromIndex = this.state.presentedIndex;
+    this.state.presentedIndex = destIndex;
+    this.state.transitionCb = cb;
+    this._onAnimationStart();
+    if (AnimationsDebugModule) {
+      AnimationsDebugModule.startRecordingFps();
+    }
+    var sceneConfig = this.state.sceneConfigStack[this.state.transitionFromIndex] ||
+      this.state.sceneConfigStack[this.state.presentedIndex];
+    invariant(
+      sceneConfig,
+      'Cannot configure scene at index ' + this.state.transitionFromIndex
+    );
+    if (jumpSpringTo != null) {
+      this.spring.setCurrentValue(jumpSpringTo);
+    }
+    this.spring.setOvershootClampingEnabled(true);
+    this.spring.getSpringConfig().friction = sceneConfig.springFriction;
+    this.spring.getSpringConfig().tension = sceneConfig.springTension;
+    this.spring.setVelocity(velocity || sceneConfig.defaultTransitionVelocity);
+    this.spring.setEndValue(1);
+  },
+
+  /**
+   * This happens for each frame of either a gesture or a transition. If both are
+   * happening, we only set values for the transition and the gesture will catch up later
+   */
+  _handleSpringUpdate: function() {
+    if (!this._isMounted) {
+      return;
+    }
+    // Prioritize handling transition in progress over a gesture:
+    if (this.state.transitionFromIndex != null) {
+      this._transitionBetween(
+        this.state.transitionFromIndex,
+        this.state.presentedIndex,
+        this.spring.getCurrentValue()
+      );
+    } else if (this.state.activeGesture != null) {
+      var presentedToIndex = this.state.presentedIndex + this._deltaForGestureAction(this.state.activeGesture);
+      this._transitionBetween(
+        this.state.presentedIndex,
+        presentedToIndex,
+        this.spring.getCurrentValue()
+      );
+    }
+  },
+
+  /**
+   * This happens at the end of a transition started by transitionTo, and when the spring catches up to a pending gesture
+   */
+  _completeTransition: function() {
+    if (!this._isMounted) {
+      return;
+    }
+
+    if (this.spring.getCurrentValue() !== 1 && this.spring.getCurrentValue() !== 0) {
+      // The spring has finished catching up to a gesture in progress. Remove the pending progress
+      // and we will be in a normal activeGesture state
+      if (this.state.pendingGestureProgress) {
+        this.state.pendingGestureProgress = null;
+      }
+      return;
+    }
+    this._onAnimationEnd();
+    var presentedIndex = this.state.presentedIndex;
+    var didFocusRoute = this._subRouteFocus[presentedIndex] || this.state.routeStack[presentedIndex];
+
+    if (AnimationsDebugModule) {
+      AnimationsDebugModule.stopRecordingFps(Date.now());
+    }
+    this.state.transitionFromIndex = null;
+    this.spring.setCurrentValue(0).setAtRest();
+    this._hideScenes();
+    if (this.state.transitionCb) {
+      this.state.transitionCb();
+      this.state.transitionCb = null;
+    }
+
+    this._emitDidFocus(didFocusRoute);
+
+    if (this._interactionHandle) {
+      this.clearInteractionHandle(this._interactionHandle);
+      this._interactionHandle = null;
+    }
+    if (this.state.pendingGestureProgress) {
+      // A transition completed, but there is already another gesture happening.
+      // Enable the scene and set the spring to catch up with the new gesture
+      var gestureToIndex = this.state.presentedIndex + this._deltaForGestureAction(this.state.activeGesture);
+      this._enableScene(gestureToIndex);
+      this.spring.setEndValue(this.state.pendingGestureProgress);
+      return;
+    }
+    if (this.state.transitionQueue.length) {
+      var queuedTransition = this.state.transitionQueue.shift();
+      this._enableScene(queuedTransition.destIndex);
+      this._emitWillFocus(this.state.routeStack[queuedTransition.destIndex]);
+      this._transitionTo(
+        queuedTransition.destIndex,
+        queuedTransition.velocity,
+        null,
+        queuedTransition.cb
+      );
+    }
+  },
+
+  _emitDidFocus: function(route) {
+    this.navigationContext.emit('didfocus', {route: route});
+
+    if (this.props.onDidFocus) {
+      this.props.onDidFocus(route);
+    }
+  },
+
+  _emitWillFocus: function(route) {
+    this.navigationContext.emit('willfocus', {route: route});
+
+    var navBar = this._navBar;
+    if (navBar && navBar.handleWillFocus) {
+      navBar.handleWillFocus(route);
+    }
+    if (this.props.onWillFocus) {
+      this.props.onWillFocus(route);
+    }
+  },
+
+  /**
+   * Hides all scenes that we are not currently on, gesturing to, or transitioning from
+   */
+  _hideScenes: function() {
+    var gesturingToIndex = null;
+    if (this.state.activeGesture) {
+      gesturingToIndex = this.state.presentedIndex + this._deltaForGestureAction(this.state.activeGesture);
+    }
+    for (var i = 0; i < this.state.routeStack.length; i++) {
+      if (i === this.state.presentedIndex ||
+          i === this.state.transitionFromIndex ||
+          i === gesturingToIndex) {
+        continue;
+      }
+      this._disableScene(i);
+    }
+  },
+
+  /**
+   * Push a scene off the screen, so that opacity:0 scenes will not block touches sent to the presented scenes
+   */
+  _disableScene: function(sceneIndex) {
+    this._sceneRefs[sceneIndex] &&
+      this._sceneRefs[sceneIndex].setNativeProps(SCENE_DISABLED_NATIVE_PROPS);
+  },
+
+  /**
+   * Put the scene back into the state as defined by props.sceneStyle, so transitions can happen normally
+   */
+  _enableScene: function(sceneIndex) {
+    // First, determine what the defined styles are for scenes in this navigator
+    var sceneStyle = flattenStyle([BASE_SCENE_STYLE, this.props.sceneStyle]);
+    // Then restore the pointer events and top value for this scene
+    var enabledSceneNativeProps = {
+      pointerEvents: 'auto',
+      style: {
+        top: sceneStyle.top,
+        bottom: sceneStyle.bottom,
+      },
+    };
+    if (sceneIndex !== this.state.transitionFromIndex &&
+        sceneIndex !== this.state.presentedIndex) {
+      // If we are not in a transition from this index, make sure opacity is 0
+      // to prevent the enabled scene from flashing over the presented scene
+      enabledSceneNativeProps.style.opacity = 0;
+    }
+    this._sceneRefs[sceneIndex] &&
+      this._sceneRefs[sceneIndex].setNativeProps(enabledSceneNativeProps);
+  },
+
+  _clearTransformations: function(sceneIndex) {
+    const defaultStyle = flattenStyle([DEFAULT_SCENE_STYLE]);
+    this._sceneRefs[sceneIndex].setNativeProps({ style: defaultStyle });
+  },
+
+  _onAnimationStart: function() {
+    var fromIndex = this.state.presentedIndex;
+    var toIndex = this.state.presentedIndex;
+    if (this.state.transitionFromIndex != null) {
+      fromIndex = this.state.transitionFromIndex;
+    } else if (this.state.activeGesture) {
+      toIndex = this.state.presentedIndex + this._deltaForGestureAction(this.state.activeGesture);
+    }
+    this._setRenderSceneToHardwareTextureAndroid(fromIndex, true);
+    this._setRenderSceneToHardwareTextureAndroid(toIndex, true);
+    var navBar = this._navBar;
+    if (navBar && navBar.onAnimationStart) {
+      navBar.onAnimationStart(fromIndex, toIndex);
+    }
+  },
+
+  _onAnimationEnd: function() {
+    var max = this.state.routeStack.length - 1;
+    for (var index = 0; index <= max; index++) {
+      this._setRenderSceneToHardwareTextureAndroid(index, false);
+    }
+
+    var navBar = this._navBar;
+    if (navBar && navBar.onAnimationEnd) {
+      navBar.onAnimationEnd();
+    }
+  },
+
+  _setRenderSceneToHardwareTextureAndroid: function(sceneIndex, shouldRenderToHardwareTexture) {
+    var viewAtIndex = this._sceneRefs[sceneIndex];
+    if (viewAtIndex === null || viewAtIndex === undefined) {
+      return;
+    }
+    viewAtIndex.setNativeProps({renderToHardwareTextureAndroid: shouldRenderToHardwareTexture});
+  },
+
+  _handleTouchStart: function() {
+    this._eligibleGestures = GESTURE_ACTIONS;
+  },
+
+  _handleMoveShouldSetPanResponder: function(e, gestureState) {
+    var sceneConfig = this.state.sceneConfigStack[this.state.presentedIndex];
+    if (!sceneConfig) {
+      return false;
+    }
+    this._expectingGestureGrant =
+      this._matchGestureAction(this._eligibleGestures, sceneConfig.gestures, gestureState);
+    return !!this._expectingGestureGrant;
+  },
+
+  _doesGestureOverswipe: function(gestureName) {
+    var wouldOverswipeBack = this.state.presentedIndex <= 0 &&
+      (gestureName === 'pop' || gestureName === 'jumpBack');
+    var wouldOverswipeForward = this.state.presentedIndex >= this.state.routeStack.length - 1 &&
+      gestureName === 'jumpForward';
+    return wouldOverswipeForward || wouldOverswipeBack;
+  },
+
+  _deltaForGestureAction: function(gestureAction) {
+    switch (gestureAction) {
+      case 'pop':
+      case 'jumpBack':
+        return -1;
+      case 'jumpForward':
+        return 1;
+      default:
+        invariant(false, 'Unsupported gesture action ' + gestureAction);
+        return;
+    }
+  },
+
+  _handlePanResponderRelease: function(e, gestureState) {
+    var sceneConfig = this.state.sceneConfigStack[this.state.presentedIndex];
+    var releaseGestureAction = this.state.activeGesture;
+    if (!releaseGestureAction) {
+      // The gesture may have been detached while responder, so there is no action here
+      return;
+    }
+    var releaseGesture = sceneConfig.gestures[releaseGestureAction];
+    var destIndex = this.state.presentedIndex + this._deltaForGestureAction(this.state.activeGesture);
+    if (this.spring.getCurrentValue() === 0) {
+      // The spring is at zero, so the gesture is already complete
+      this.spring.setCurrentValue(0).setAtRest();
+      this._completeTransition();
+      return;
+    }
+    var isTravelVertical = releaseGesture.direction === 'top-to-bottom' || releaseGesture.direction === 'bottom-to-top';
+    var isTravelInverted = releaseGesture.direction === 'right-to-left' || releaseGesture.direction === 'bottom-to-top';
+    var velocity, gestureDistance;
+    if (isTravelVertical) {
+      velocity = isTravelInverted ? -gestureState.vy : gestureState.vy;
+      gestureDistance = isTravelInverted ? -gestureState.dy : gestureState.dy;
+    } else {
+      velocity = isTravelInverted ? -gestureState.vx : gestureState.vx;
+      gestureDistance = isTravelInverted ? -gestureState.dx : gestureState.dx;
+    }
+    var transitionVelocity = clamp(-10, velocity, 10);
+    if (Math.abs(velocity) < releaseGesture.notMoving) {
+      // The gesture velocity is so slow, is "not moving"
+      var hasGesturedEnoughToComplete = gestureDistance > releaseGesture.fullDistance * releaseGesture.stillCompletionRatio;
+      transitionVelocity = hasGesturedEnoughToComplete ? releaseGesture.snapVelocity : -releaseGesture.snapVelocity;
+    }
+    if (transitionVelocity < 0 || this._doesGestureOverswipe(releaseGestureAction)) {
+      // This gesture is to an overswiped region or does not have enough velocity to complete
+      // If we are currently mid-transition, then this gesture was a pending gesture. Because this gesture takes no action, we can stop here
+      if (this.state.transitionFromIndex == null) {
+        // There is no current transition, so we need to transition back to the presented index
+        var transitionBackToPresentedIndex = this.state.presentedIndex;
+        // slight hack: change the presented index for a moment in order to transitionTo correctly
+        this.state.presentedIndex = destIndex;
+        this._transitionTo(
+          transitionBackToPresentedIndex,
+          -transitionVelocity,
+          1 - this.spring.getCurrentValue()
+        );
+      }
+    } else {
+      // The gesture has enough velocity to complete, so we transition to the gesture's destination
+      this._emitWillFocus(this.state.routeStack[destIndex]);
+      this._transitionTo(
+        destIndex,
+        transitionVelocity,
+        null,
+        () => {
+          if (releaseGestureAction === 'pop') {
+            this._cleanScenesPastIndex(destIndex);
+          }
+        }
+      );
+    }
+    this._detachGesture();
+  },
+
+  _handlePanResponderTerminate: function(e, gestureState) {
+    if (this.state.activeGesture == null) {
+      return;
+    }
+    var destIndex = this.state.presentedIndex + this._deltaForGestureAction(this.state.activeGesture);
+    this._detachGesture();
+    var transitionBackToPresentedIndex = this.state.presentedIndex;
+    // slight hack: change the presented index for a moment in order to transitionTo correctly
+    this.state.presentedIndex = destIndex;
+    this._transitionTo(
+      transitionBackToPresentedIndex,
+      null,
+      1 - this.spring.getCurrentValue()
+    );
+  },
+
+  _attachGesture: function(gestureId) {
+    this.state.activeGesture = gestureId;
+    var gesturingToIndex = this.state.presentedIndex + this._deltaForGestureAction(this.state.activeGesture);
+    this._enableScene(gesturingToIndex);
+  },
+
+  _detachGesture: function() {
+    this.state.activeGesture = null;
+    this.state.pendingGestureProgress = null;
+    this._hideScenes();
+  },
+
+  _handlePanResponderMove: function(e, gestureState) {
+    if (this._isMoveGestureAttached !== undefined) {
+      invariant(
+        this._expectingGestureGrant,
+        'Responder granted unexpectedly.'
+      );
+      this._attachGesture(this._expectingGestureGrant);
+      this._onAnimationStart();
+      this._expectingGestureGrant = undefined;
+    }
+
+    var sceneConfig = this.state.sceneConfigStack[this.state.presentedIndex];
+    if (this.state.activeGesture) {
+      var gesture = sceneConfig.gestures[this.state.activeGesture];
+      return this._moveAttachedGesture(gesture, gestureState);
+    }
+    var matchedGesture = this._matchGestureAction(GESTURE_ACTIONS, sceneConfig.gestures, gestureState);
+    if (matchedGesture) {
+      this._attachGesture(matchedGesture);
+    }
+  },
+
+  _moveAttachedGesture: function(gesture, gestureState) {
+    var isTravelVertical = gesture.direction === 'top-to-bottom' || gesture.direction === 'bottom-to-top';
+    var isTravelInverted = gesture.direction === 'right-to-left' || gesture.direction === 'bottom-to-top';
+    var distance = isTravelVertical ? gestureState.dy : gestureState.dx;
+    distance = isTravelInverted ? -distance : distance;
+    var gestureDetectMovement = gesture.gestureDetectMovement;
+    var nextProgress = (distance - gestureDetectMovement) /
+      (gesture.fullDistance - gestureDetectMovement);
+    if (nextProgress < 0 && gesture.isDetachable) {
+      var gesturingToIndex = this.state.presentedIndex + this._deltaForGestureAction(this.state.activeGesture);
+      this._transitionBetween(this.state.presentedIndex, gesturingToIndex, 0);
+      this._detachGesture();
+      if (this.state.pendingGestureProgress != null) {
+        this.spring.setCurrentValue(0);
+      }
+      return;
+    }
+    if (gesture.overswipe && this._doesGestureOverswipe(this.state.activeGesture)) {
+      var frictionConstant = gesture.overswipe.frictionConstant;
+      var frictionByDistance = gesture.overswipe.frictionByDistance;
+      var frictionRatio = 1 / ((frictionConstant) + (Math.abs(nextProgress) * frictionByDistance));
+      nextProgress *= frictionRatio;
+    }
+    nextProgress = clamp(0, nextProgress, 1);
+    if (this.state.transitionFromIndex != null) {
+      this.state.pendingGestureProgress = nextProgress;
+    } else if (this.state.pendingGestureProgress) {
+      this.spring.setEndValue(nextProgress);
+    } else {
+      this.spring.setCurrentValue(nextProgress);
+    }
+  },
+
+  _matchGestureAction: function(eligibleGestures, gestures, gestureState) {
+    if (!gestures || !eligibleGestures || !eligibleGestures.some) {
+      return null;
+    }
+    var matchedGesture = null;
+    eligibleGestures.some((gestureName, gestureIndex) => {
+      var gesture = gestures[gestureName];
+      if (!gesture) {
+        return;
+      }
+      if (gesture.overswipe == null && this._doesGestureOverswipe(gestureName)) {
+        // cannot swipe past first or last scene without overswiping
+        return false;
+      }
+      var isTravelVertical = gesture.direction === 'top-to-bottom' || gesture.direction === 'bottom-to-top';
+      var isTravelInverted = gesture.direction === 'right-to-left' || gesture.direction === 'bottom-to-top';
+      var startedLoc = isTravelVertical ? gestureState.y0 : gestureState.x0;
+      var currentLoc = isTravelVertical ? gestureState.moveY : gestureState.moveX;
+      var travelDist = isTravelVertical ? gestureState.dy : gestureState.dx;
+      var oppositeAxisTravelDist =
+        isTravelVertical ? gestureState.dx : gestureState.dy;
+      var edgeHitWidth = gesture.edgeHitWidth;
+      if (isTravelInverted) {
+        startedLoc = -startedLoc;
+        currentLoc = -currentLoc;
+        travelDist = -travelDist;
+        oppositeAxisTravelDist = -oppositeAxisTravelDist;
+        edgeHitWidth = isTravelVertical ?
+          -(SCREEN_HEIGHT - edgeHitWidth) :
+          -(SCREEN_WIDTH - edgeHitWidth);
+      }
+      if (startedLoc === 0) {
+        startedLoc = currentLoc;
+      }
+      var moveStartedInRegion = gesture.edgeHitWidth == null ||
+        startedLoc < edgeHitWidth;
+      if (!moveStartedInRegion) {
+        return false;
+      }
+      var moveTravelledFarEnough = travelDist >= gesture.gestureDetectMovement;
+      if (!moveTravelledFarEnough) {
+        return false;
+      }
+      var directionIsCorrect = Math.abs(travelDist) > Math.abs(oppositeAxisTravelDist) * gesture.directionRatio;
+      if (directionIsCorrect) {
+        matchedGesture = gestureName;
+        return true;
+      } else {
+        this._eligibleGestures = this._eligibleGestures.slice().splice(gestureIndex, 1);
+      }
+    });
+    return matchedGesture || null;
+  },
+
+  _transitionSceneStyle: function(fromIndex, toIndex, progress, index) {
+    var viewAtIndex = this._sceneRefs[index];
+    if (viewAtIndex === null || viewAtIndex === undefined) {
+      return;
+    }
+    // Use toIndex animation when we move forwards. Use fromIndex when we move back
+    var sceneConfigIndex = fromIndex < toIndex ? toIndex : fromIndex;
+    var sceneConfig = this.state.sceneConfigStack[sceneConfigIndex];
+    // this happens for overswiping when there is no scene at toIndex
+    if (!sceneConfig) {
+      sceneConfig = this.state.sceneConfigStack[sceneConfigIndex - 1];
+    }
+    var styleToUse = {};
+    var useFn = index < fromIndex || index < toIndex ?
+      sceneConfig.animationInterpolators.out :
+      sceneConfig.animationInterpolators.into;
+    var directionAdjustedProgress = fromIndex < toIndex ? progress : 1 - progress;
+    var didChange = useFn(styleToUse, directionAdjustedProgress);
+    if (didChange) {
+      viewAtIndex.setNativeProps({style: styleToUse});
+    }
+  },
+
+  _transitionBetween: function(fromIndex, toIndex, progress) {
+    this._transitionSceneStyle(fromIndex, toIndex, progress, fromIndex);
+    this._transitionSceneStyle(fromIndex, toIndex, progress, toIndex);
+    var navBar = this._navBar;
+    if (navBar && navBar.updateProgress && toIndex >= 0 && fromIndex >= 0) {
+      navBar.updateProgress(progress, fromIndex, toIndex);
+    }
+  },
+
+  _handleResponderTerminationRequest: function() {
+    return false;
+  },
+
+  _getDestIndexWithinBounds: function(n) {
+    var currentIndex = this.state.presentedIndex;
+    var destIndex = currentIndex + n;
+    invariant(
+      destIndex >= 0,
+      'Cannot jump before the first route.'
+    );
+    var maxIndex = this.state.routeStack.length - 1;
+    invariant(
+      maxIndex >= destIndex,
+      'Cannot jump past the last route.'
+    );
+    return destIndex;
+  },
+
+  _jumpN: function(n) {
+    var destIndex = this._getDestIndexWithinBounds(n);
+    this._enableScene(destIndex);
+    this._emitWillFocus(this.state.routeStack[destIndex]);
+    this._transitionTo(destIndex);
+  },
+
+  /**
+   * Transition to an existing scene without unmounting.
+   * @param {object} route Route to transition to. The specified route must
+   * be in the currently mounted set of routes defined in `routeStack`.
+   */
+  jumpTo: function(route) {
+    var destIndex = this.state.routeStack.indexOf(route);
+    invariant(
+      destIndex !== -1,
+      'Cannot jump to route that is not in the route stack'
+    );
+    this._jumpN(destIndex - this.state.presentedIndex);
+  },
+
+  /**
+   * Jump forward to the next scene in the route stack.
+   */
+  jumpForward: function() {
+    this._jumpN(1);
+  },
+
+  /**
+   * Jump backward without unmounting the current scene.
+   */
+  jumpBack: function() {
+    this._jumpN(-1);
+  },
+
+  /**
+   * Navigate forward to a new scene, squashing any scenes that you could
+   * jump forward to.
+   * @param {object} route Route to push into the navigator stack.
+   */
+  push: function(route) {
+    invariant(!!route, 'Must supply route to push');
+    var activeLength = this.state.presentedIndex + 1;
+    var activeStack = this.state.routeStack.slice(0, activeLength);
+    var activeAnimationConfigStack = this.state.sceneConfigStack.slice(0, activeLength);
+    var nextStack = activeStack.concat([route]);
+    var destIndex = nextStack.length - 1;
+    var nextSceneConfig = this.props.configureScene(route, nextStack);
+    var nextAnimationConfigStack = activeAnimationConfigStack.concat([nextSceneConfig]);
+    this._emitWillFocus(nextStack[destIndex]);
+    this.setState({
+      routeStack: nextStack,
+      sceneConfigStack: nextAnimationConfigStack,
+    }, () => {
+      this._enableScene(destIndex);
+      this._transitionTo(destIndex, nextSceneConfig.defaultTransitionVelocity);
+    });
+  },
+
+  /**
+   * Go back N scenes at once. When N=1, behavior matches `pop()`.
+   * When N is invalid(negative or bigger than current routes count), do nothing.
+   * @param {number} n The number of scenes to pop. Should be an integer.
+   */
+  popN: function(n) {
+    invariant(typeof n === 'number', 'Must supply a number to popN');
+    n = parseInt(n, 10);
+    if (n <= 0 || this.state.presentedIndex - n < 0) {
+      return;
+    }
+    var popIndex = this.state.presentedIndex - n;
+    var presentedRoute = this.state.routeStack[this.state.presentedIndex];
+    var popSceneConfig = this.props.configureScene(presentedRoute); // using the scene config of the currently presented view
+    this._enableScene(popIndex);
+    // This is needed because scene at the pop index may be transformed
+    // with a configuration different from the configuration on the presented
+    // route.
+    this._clearTransformations(popIndex);
+    this._emitWillFocus(this.state.routeStack[popIndex]);
+    this._transitionTo(
+      popIndex,
+      popSceneConfig.defaultTransitionVelocity,
+      null, // no spring jumping
+      () => {
+        this._cleanScenesPastIndex(popIndex);
+      }
+    );
+  },
+
+  /**
+   * Transition back and unmount the current scene.
+   */
+  pop: function() {
+    if (this.state.transitionQueue.length) {
+      // This is the workaround to prevent user from firing multiple `pop()`
+      // calls that may pop the routes beyond the limit.
+      // Because `this.state.presentedIndex` does not update until the
+      // transition starts, we can't reliably use `this.state.presentedIndex`
+      // to know whether we can safely keep popping the routes or not at this
+      //  moment.
+      return;
+    }
+
+    this.popN(1);
+  },
+
+  /**
+   * Replace a scene as specified by an index.
+   * @param {object} route Route representing the new scene to render.
+   * @param {number} index The route in the stack that should be replaced.
+   *   If negative, it counts from the back of the stack.
+   * @param {Function} cb Callback function when the scene has been replaced.
+   */
+  replaceAtIndex: function(route, index, cb) {
+    invariant(!!route, 'Must supply route to replace');
+    if (index < 0) {
+      index += this.state.routeStack.length;
+    }
+
+    if (this.state.routeStack.length <= index) {
+      return;
+    }
+
+    var nextRouteStack = this.state.routeStack.slice();
+    var nextAnimationModeStack = this.state.sceneConfigStack.slice();
+    nextRouteStack[index] = route;
+    nextAnimationModeStack[index] = this.props.configureScene(route, nextRouteStack);
+
+    if (index === this.state.presentedIndex) {
+      this._emitWillFocus(route);
+    }
+    this.setState({
+      routeStack: nextRouteStack,
+      sceneConfigStack: nextAnimationModeStack,
+    }, () => {
+      if (index === this.state.presentedIndex) {
+        this._emitDidFocus(route);
+      }
+      cb && cb();
+    });
+  },
+
+  /**
+   * Replace the current scene with a new route.
+   * @param {object} route Route that replaces the current scene.
+   */
+  replace: function(route) {
+    this.replaceAtIndex(route, this.state.presentedIndex);
+  },
+
+  /**
+   * Replace the previous scene.
+   * @param {object} route Route that replaces the previous scene.
+   */
+  replacePrevious: function(route) {
+    this.replaceAtIndex(route, this.state.presentedIndex - 1);
+  },
+
+  /**
+   * Pop to the first scene in the stack, unmounting every other scene.
+   */
+  popToTop: function() {
+    this.popToRoute(this.state.routeStack[0]);
+  },
+
+  /**
+   * Pop to a particular scene, as specified by its route.
+   * All scenes after it will be unmounted.
+   * @param {object} route Route to pop to.
+   */
+  popToRoute: function(route) {
+    var indexOfRoute = this.state.routeStack.indexOf(route);
+    invariant(
+      indexOfRoute !== -1,
+      'Calling popToRoute for a route that doesn\'t exist!'
+    );
+    var numToPop = this.state.presentedIndex - indexOfRoute;
+    this.popN(numToPop);
+  },
+
+  /**
+   * Replace the previous scene and pop to it.
+   * @param {object} route Route that replaces the previous scene.
+   */
+  replacePreviousAndPop: function(route) {
+    if (this.state.routeStack.length < 2) {
+      return;
+    }
+    this.replacePrevious(route);
+    this.pop();
+  },
+
+  /**
+   * Navigate to a new scene and reset route stack.
+   * @param {object} route Route to navigate to.
+   */
+  resetTo: function(route) {
+    invariant(!!route, 'Must supply route to push');
+    this.replaceAtIndex(route, 0, () => {
+      // Do not use popToRoute here, because race conditions could prevent the
+      // route from existing at this time. Instead, just go to index 0
+      this.popN(this.state.presentedIndex);
+    });
+  },
+
+  /**
+   * Returns the current list of routes.
+   */
+  getCurrentRoutes: function() {
+    // Clone before returning to avoid caller mutating the stack
+    return this.state.routeStack.slice();
+  },
+
+  _cleanScenesPastIndex: function(index) {
+    var newStackLength = index + 1;
+    // Remove any unneeded rendered routes.
+    if (newStackLength < this.state.routeStack.length) {
+      this.setState({
+        sceneConfigStack: this.state.sceneConfigStack.slice(0, newStackLength),
+        routeStack: this.state.routeStack.slice(0, newStackLength),
+      });
+    }
+  },
+
+  _renderScene: function(route, i) {
+    var disabledSceneStyle = null;
+    var disabledScenePointerEvents = 'auto';
+    if (i !== this.state.presentedIndex) {
+      disabledSceneStyle = styles.disabledScene;
+      disabledScenePointerEvents = 'none';
+    }
+    return (
+      <View
+        collapsable={false}
+        key={'scene_' + getRouteID(route)}
+        ref={(scene) => {
+          this._sceneRefs[i] = scene;
+        }}
+        onStartShouldSetResponderCapture={() => {
+          return (this.state.transitionFromIndex != null);
+        }}
+        pointerEvents={disabledScenePointerEvents}
+        style={[styles.baseScene, this.props.sceneStyle, disabledSceneStyle]}>
+        {this.props.renderScene(
+          route,
+          this
+        )}
+      </View>
+    );
+  },
+
+  _renderNavigationBar: function() {
+    const { navigationBar } = this.props;
+    if (!navigationBar) {
+      return null;
+    }
+    return React.cloneElement(navigationBar, {
+      ref: (navBar) => {
+        this._navBar = navBar;
+        if (navigationBar && typeof navigationBar.ref === 'function') {
+          navigationBar.ref(navBar);
+        }
+      },
+      navigator: this._navigationBarNavigator,
+      navState: this.state,
+    });
+  },
+
+  _tvEventHandler: TVEventHandler,
+
+  _enableTVEventHandler: function() {
+    if (!TVEventHandler) {
+      return;
+    }
+    this._tvEventHandler = new TVEventHandler();
+    this._tvEventHandler.enable(this, function(cmp, evt) {
+      if (evt && evt.eventType === 'menu') {
+        cmp.pop();
+      }
+    });
+  },
+
+  _disableTVEventHandler: function() {
+    if (this._tvEventHandler) {
+      this._tvEventHandler.disable();
+      delete this._tvEventHandler;
+    }
+  },
+
+  render: function() {
+    var newRenderedSceneMap = new Map();
+    var scenes = this.state.routeStack.map((route, index) => {
+      var renderedScene;
+      if (this._renderedSceneMap.has(route) &&
+          index !== this.state.presentedIndex) {
+        renderedScene = this._renderedSceneMap.get(route);
+      } else {
+        renderedScene = this._renderScene(route, index);
+      }
+      newRenderedSceneMap.set(route, renderedScene);
+      return renderedScene;
+    });
+    this._renderedSceneMap = newRenderedSceneMap;
+    return (
+      <View style={[styles.container, this.props.style]}>
+        <View
+          style={styles.transitioner}
+          {...this.panGesture.panHandlers}
+          onTouchStart={this._handleTouchStart}
+          onResponderTerminationRequest={
+            this._handleResponderTerminationRequest
+          }>
+          {scenes}
+        </View>
+        {this._renderNavigationBar()}
+      </View>
+    );
+  },
+
+  _getNavigationContext: function() {
+    if (!this._navigationContext) {
+      this._navigationContext = new NavigationContext();
+    }
+    return this._navigationContext;
+  }
+});
+
+module.exports = Navigator;

+/**
+ * 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.
+ *
+ */
+'use strict';
+
+import {
+  Platform,
+  StyleSheet,
+  View,
+  ViewPropTypes,
+} from 'react-native';
+import React from 'react';
+
+const NavigatorBreadcrumbNavigationBarStyles = require('./NavigatorBreadcrumbNavigationBarStyles');
+const NavigatorNavigationBarStylesAndroid = require('./NavigatorNavigationBarStylesAndroid');
+const NavigatorNavigationBarStylesIOS = require('./NavigatorNavigationBarStylesIOS');
+
+const guid = require('./guid');
+const invariant = require('fbjs/lib/invariant');
+
+const { Map } = require('immutable');
+
+const Interpolators = NavigatorBreadcrumbNavigationBarStyles.Interpolators;
+const NavigatorNavigationBarStyles = Platform.OS === 'android' ?
+  NavigatorNavigationBarStylesAndroid : NavigatorNavigationBarStylesIOS;
+const PropTypes = require('prop-types');
+
+/**
+ * Reusable props objects.
+ */
+const CRUMB_PROPS = Interpolators.map(() => ({style: {}}));
+const ICON_PROPS = Interpolators.map(() => ({style: {}}));
+const SEPARATOR_PROPS = Interpolators.map(() => ({style: {}}));
+const TITLE_PROPS = Interpolators.map(() => ({style: {}}));
+const RIGHT_BUTTON_PROPS = Interpolators.map(() => ({style: {}}));
+
+
+function navStatePresentedIndex(navState) {
+  if (navState.presentedIndex !== undefined) {
+    return navState.presentedIndex;
+  }
+  // TODO: rename `observedTopOfStack` to `presentedIndex` in `NavigatorIOS`
+  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.
+ */
+function initStyle(index, presentedIndex) {
+  return index === presentedIndex ? NavigatorBreadcrumbNavigationBarStyles.Center[index] :
+    index < presentedIndex ? NavigatorBreadcrumbNavigationBarStyles.Left[index] :
+    NavigatorBreadcrumbNavigationBarStyles.Right[index];
+}
+
+class NavigatorBreadcrumbNavigationBar extends React.Component {
+  static propTypes = {
+    navigator: PropTypes.shape({
+      push: PropTypes.func,
+      pop: PropTypes.func,
+      replace: PropTypes.func,
+      popToRoute: PropTypes.func,
+      popToTop: PropTypes.func,
+    }),
+    routeMapper: PropTypes.shape({
+      rightContentForRoute: PropTypes.func,
+      titleContentForRoute: PropTypes.func,
+      iconForRoute: PropTypes.func,
+    }),
+    navState: PropTypes.shape({
+      routeStack: PropTypes.arrayOf(PropTypes.object),
+      presentedIndex: PropTypes.number,
+    }),
+    style: ViewPropTypes.style,
+  };
+
+  static Styles = NavigatorBreadcrumbNavigationBarStyles;
+
+  _updateIndexProgress(progress, index, fromIndex, toIndex) {
+    var amount = toIndex > fromIndex ? progress : (1 - progress);
+    var oldDistToCenter = index - fromIndex;
+    var newDistToCenter = index - toIndex;
+    var interpolate;
+    invariant(
+      Interpolators[index],
+      'Cannot find breadcrumb interpolators for ' + index
+    );
+    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._setPropsIfExists('crumb_' + index, CRUMB_PROPS[index]);
+    }
+    if (interpolate.Icon(ICON_PROPS[index].style, amount)) {
+      this._setPropsIfExists('icon_' + index, ICON_PROPS[index]);
+    }
+    if (interpolate.Separator(SEPARATOR_PROPS[index].style, amount)) {
+      this._setPropsIfExists('separator_' + index, SEPARATOR_PROPS[index]);
+    }
+    if (interpolate.Title(TITLE_PROPS[index].style, amount)) {
+      this._setPropsIfExists('title_' + index, TITLE_PROPS[index]);
+    }
+    var right = this.refs['right_' + index];
+
+    const rightButtonStyle = RIGHT_BUTTON_PROPS[index].style;
+    if (right && interpolate.RightItem(rightButtonStyle, amount)) {
+      right.setNativeProps({
+        style: rightButtonStyle,
+        pointerEvents: rightButtonStyle.opacity === 0 ? 'none' : 'auto',
+      });
+    }
+  }
+
+  updateProgress(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);
+    }
+  }
+
+  onAnimationStart(fromIndex, toIndex) {
+    var max = Math.max(fromIndex, toIndex);
+    var min = Math.min(fromIndex, toIndex);
+    for (var index = min; index <= max; index++) {
+      this._setRenderViewsToHardwareTextureAndroid(index, true);
+    }
+  }
+
+  onAnimationEnd() {
+    var max = this.props.navState.routeStack.length - 1;
+    for (var index = 0; index <= max; index++) {
+      this._setRenderViewsToHardwareTextureAndroid(index, false);
+    }
+  }
+
+  _setRenderViewsToHardwareTextureAndroid(index, renderToHardwareTexture) {
+    var props = {
+      renderToHardwareTextureAndroid: renderToHardwareTexture,
+    };
+
+    this._setPropsIfExists('icon_' + index, props);
+    this._setPropsIfExists('separator_' + index, props);
+    this._setPropsIfExists('title_' + index, props);
+    this._setPropsIfExists('right_' + index, props);
+  }
+
+  componentWillMount() {
+    this._reset();
+  }
+
+  render() {
+    var navState = this.props.navState;
+    var icons = navState && navState.routeStack.map(this._getBreadcrumb);
+    var titles = navState.routeStack.map(this._getTitle);
+    var buttons = navState.routeStack.map(this._getRightButton);
+
+    return (
+      <View
+        key={this._key}
+        style={[styles.breadCrumbContainer, this.props.style]}>
+        {titles}
+        {icons}
+        {buttons}
+      </View>
+    );
+  }
+
+  immediatelyRefresh() {
+    this._reset();
+    this.forceUpdate();
+  }
+
+  _reset() {
+    this._key = guid();
+    this._descriptors = {
+      title: new Map(),
+      right: new Map(),
+    };
+  }
+
+  _getBreadcrumb = (route, index) => {
+    /**
+     * To prevent the case where titles on an empty navigation stack covers the first icon and
+     * becomes partially unpressable, we set the first breadcrumb to be unpressable by default, and
+     * make it pressable when there are multiple items in the stack.
+     */
+    const pointerEvents = (
+      (this.props.navState.routeStack.length <= 1 && index === 0) ?
+      'none' :
+      'auto'
+    );
+    const navBarRouteMapper = this.props.routeMapper;
+    const firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));
+
+    var breadcrumbDescriptor = (
+      <View
+        key={'crumb_' + index}
+        pointerEvents={pointerEvents}
+        ref={'crumb_' + index}
+        style={firstStyles.Crumb}>
+        <View ref={'icon_' + index} style={firstStyles.Icon}>
+          {navBarRouteMapper.iconForRoute(route, this.props.navigator)}
+        </View>
+        <View ref={'separator_' + index} style={firstStyles.Separator}>
+          {navBarRouteMapper.separatorForRoute(route, this.props.navigator)}
+        </View>
+      </View>
+    );
+
+    return breadcrumbDescriptor;
+  };
+
+  _getTitle = (route, index) => {
+    if (this._descriptors.title.has(route)) {
+      return this._descriptors.title.get(route);
+    }
+
+    var titleContent = this.props.routeMapper.titleContentForRoute(
+      this.props.navState.routeStack[index],
+      this.props.navigator
+    );
+    var firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));
+
+    var titleDescriptor = (
+      <View
+        key={'title_' + index}
+        ref={'title_' + index}
+        style={firstStyles.Title}>
+        {titleContent}
+      </View>
+    );
+    this._descriptors.title = this._descriptors.title.set(route, titleDescriptor);
+    return titleDescriptor;
+  };
+
+  _getRightButton = (route, index) => {
+    if (this._descriptors.right.has(route)) {
+      return this._descriptors.right.get(route);
+    }
+    var rightContent = this.props.routeMapper.rightContentForRoute(
+      this.props.navState.routeStack[index],
+      this.props.navigator
+    );
+    if (!rightContent) {
+      this._descriptors.right = this._descriptors.right.set(route, null);
+      return null;
+    }
+    var firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));
+    var rightButtonDescriptor = (
+      <View
+        key={'right_' + index}
+        ref={'right_' + index}
+        style={firstStyles.RightItem}>
+        {rightContent}
+      </View>
+    );
+    this._descriptors.right = this._descriptors.right.set(route, rightButtonDescriptor);
+    return rightButtonDescriptor;
+  };
+
+  _setPropsIfExists(ref, props) {
+    var ref = this.refs[ref];
+    ref && ref.setNativeProps(props);
+  }
+}
+
+const styles = StyleSheet.create({
+  breadCrumbContainer: {
+    overflow: 'hidden',
+    position: 'absolute',
+    height: NavigatorNavigationBarStyles.General.TotalNavHeight,
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+module.exports = NavigatorBreadcrumbNavigationBar;

+/**
+ * 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.
+ *
+ */
+'use strict';
+
+var NavigatorNavigationBarStylesAndroid = require('./NavigatorNavigationBarStylesAndroid');
+
+var buildStyleInterpolator = require('./buildStyleInterpolator');
+var merge = require('./merge');
+
+var NAV_BAR_HEIGHT = NavigatorNavigationBarStylesAndroid.General.NavBarHeight;
+
+var SPACING = 8;
+var ICON_WIDTH = 40;
+var SEPARATOR_WIDTH = 9;
+var CRUMB_WIDTH = ICON_WIDTH + SEPARATOR_WIDTH;
+var NAV_ELEMENT_HEIGHT = NAV_BAR_HEIGHT;
+
+var OPACITY_RATIO = 100;
+var ICON_INACTIVE_OPACITY = 0.6;
+var MAX_BREADCRUMBS = 10;
+
+var CRUMB_BASE = {
+  position: 'absolute',
+  flexDirection: 'row',
+  top: 0,
+  width: CRUMB_WIDTH,
+  height: NAV_ELEMENT_HEIGHT,
+  backgroundColor: 'transparent',
+};
+
+var ICON_BASE = {
+  width: ICON_WIDTH,
+  height: NAV_ELEMENT_HEIGHT,
+};
+
+var SEPARATOR_BASE = {
+  width: SEPARATOR_WIDTH,
+  height: NAV_ELEMENT_HEIGHT,
+};
+
+var TITLE_BASE = {
+  position: 'absolute',
+  top: 0,
+  height: NAV_ELEMENT_HEIGHT,
+  backgroundColor: 'transparent',
+  alignItems: 'flex-start',
+};
+
+var FIRST_TITLE_BASE = merge(TITLE_BASE, {
+  left: 0,
+  right: 0,
+});
+
+var RIGHT_BUTTON_BASE = {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  overflow: 'hidden',
+  opacity: 1,
+  height: NAV_ELEMENT_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 = crumbLeft + 50;
+  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: SPACING + CRUMB_WIDTH}),
+  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, {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,
+};

+/**
+ * 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.
+ *
+ */
+'use strict';
+
+import {Dimensions} from 'react-native';
+var NavigatorNavigationBarStylesIOS = require('./NavigatorNavigationBarStylesIOS');
+
+var buildStyleInterpolator = require('./buildStyleInterpolator');
+var merge = require('./merge');
+
+var SCREEN_WIDTH = Dimensions.get('window').width;
+var STATUS_BAR_HEIGHT = NavigatorNavigationBarStylesIOS.General.StatusBarHeight;
+var NAV_BAR_HEIGHT = NavigatorNavigationBarStylesIOS.General.NavBarHeight;
+
+var SPACING = 4;
+var ICON_WIDTH = 40;
+var SEPARATOR_WIDTH = 9;
+var CRUMB_WIDTH = ICON_WIDTH + SEPARATOR_WIDTH;
+
+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,
+  right: 0,
+  alignItems: 'center',
+  height: NAV_BAR_HEIGHT,
+});
+
+var RIGHT_BUTTON_BASE = {
+  position: 'absolute',
+  top: STATUS_BAR_HEIGHT,
+  right: SPACING,
+  overflow: 'hidden',
+  opacity: 1,
+  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,
+};

+/**
+ * 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.
+ *
+ */
+'use strict';
+
+var React = require('react');
+var NavigatorNavigationBarStylesAndroid = require('./NavigatorNavigationBarStylesAndroid');
+var NavigatorNavigationBarStylesIOS = require('./NavigatorNavigationBarStylesIOS');
+import {
+  Platform,
+  StyleSheet,
+  View,
+  ViewPropTypes,
+} from 'react-native';
+var PropTypes = require('prop-types');
+
+var guid = require('./guid');
+
+var { Map } = require('immutable');
+
+var COMPONENT_NAMES = ['Title', 'LeftButton', 'RightButton'];
+
+var NavigatorNavigationBarStyles = Platform.OS === 'android' ?
+  NavigatorNavigationBarStylesAndroid : NavigatorNavigationBarStylesIOS;
+
+var navStatePresentedIndex = function(navState) {
+  if (navState.presentedIndex !== undefined) {
+    return navState.presentedIndex;
+  }
+  // TODO: rename `observedTopOfStack` to `presentedIndex` in `NavigatorIOS`
+  return navState.observedTopOfStack;
+};
+
+class NavigatorNavigationBar extends React.Component {
+  static propTypes = {
+    navigator: PropTypes.object,
+    routeMapper: PropTypes.shape({
+      Title: PropTypes.func.isRequired,
+      LeftButton: PropTypes.func.isRequired,
+      RightButton: PropTypes.func.isRequired,
+    }).isRequired,
+    navState: PropTypes.shape({
+      routeStack: PropTypes.arrayOf(PropTypes.object),
+      presentedIndex: PropTypes.number,
+    }),
+    navigationStyles: PropTypes.object,
+    style: ViewPropTypes.style,
+  };
+
+  static Styles = NavigatorNavigationBarStyles;
+  static StylesAndroid = NavigatorNavigationBarStylesAndroid;
+  static StylesIOS = NavigatorNavigationBarStylesIOS;
+
+  static defaultProps = {
+    navigationStyles: NavigatorNavigationBarStyles,
+  };
+
+  componentWillMount() {
+    this._reset();
+  }
+
+  /**
+   * Stop transtion, immediately resets the cached state and re-render the
+   * whole view.
+   */
+  immediatelyRefresh = () => {
+    this._reset();
+    this.forceUpdate();
+  };
+
+  _reset = () => {
+    this._key = guid();
+    this._reusableProps = {};
+    this._components = {};
+    this._descriptors = {};
+
+    COMPONENT_NAMES.forEach(componentName => {
+      this._components[componentName] = new Map();
+      this._descriptors[componentName] = new Map();
+    });
+  };
+
+  _getReusableProps = (/*string*/componentName, /*number*/index) => /*object*/ {
+    var propStack = this._reusableProps[componentName];
+    if (!propStack) {
+      propStack = this._reusableProps[componentName] = [];
+    }
+    var props = propStack[index];
+    if (!props) {
+      props = propStack[index] = {style:{}};
+    }
+    return props;
+  };
+
+  _updateIndexProgress = (
+    /*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 = this.props.navigationStyles.Interpolators.RightToCenter;
+    } else if (oldDistToCenter < 0 && newDistToCenter === 0 ||
+               newDistToCenter < 0 && oldDistToCenter === 0) {
+      interpolate = this.props.navigationStyles.Interpolators.CenterToLeft;
+    } else if (oldDistToCenter === newDistToCenter) {
+      interpolate = this.props.navigationStyles.Interpolators.RightToCenter;
+    } else {
+      interpolate = this.props.navigationStyles.Interpolators.RightToLeft;
+    }
+
+    COMPONENT_NAMES.forEach(function (componentName) {
+      var component = this._components[componentName].get(this.props.navState.routeStack[index]);
+      var props = this._getReusableProps(componentName, index);
+      if (component && interpolate[componentName](props.style, amount)) {
+        props.pointerEvents = props.style.opacity === 0 ? 'none' : 'box-none';
+        component.setNativeProps(props);
+      }
+    }, this);
+  };
+
+  updateProgress = (/*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() {
+    var navBarStyle = {
+      height: this.props.navigationStyles.General.TotalNavHeight,
+    };
+    var navState = this.props.navState;
+    var components = navState.routeStack.map((route, index) =>
+      COMPONENT_NAMES.map(componentName =>
+        this._getComponent(componentName, route, index)
+      )
+    );
+
+    return (
+      <View
+        key={this._key}
+        style={[styles.navBarContainer, navBarStyle, this.props.style]}>
+        {components}
+      </View>
+    );
+  }
+
+  _getComponent = (/*string*/componentName, /*object*/route, /*number*/index) => /*?Object*/ {
+    if (this._descriptors[componentName].includes(route)) {
+      return this._descriptors[componentName].get(route);
+    }
+
+    var rendered = null;
+
+    var content = this.props.routeMapper[componentName](
+      this.props.navState.routeStack[index],
+      this.props.navigator,
+      index,
+      this.props.navState
+    );
+    if (!content) {
+      return null;
+    }
+
+    var componentIsActive = index === navStatePresentedIndex(this.props.navState);
+    var initialStage = componentIsActive ?
+      this.props.navigationStyles.Stages.Center :
+      this.props.navigationStyles.Stages.Left;
+    rendered = (
+      <View
+        ref={(ref) => {
+          this._components[componentName] = this._components[componentName].set(route, ref);
+        }}
+        pointerEvents={componentIsActive ? 'box-none' : 'none'}
+        style={initialStage[componentName]}>
+        {content}
+      </View>
+    );
+
+    this._descriptors[componentName] = this._descriptors[componentName].set(route, rendered);
+    return rendered;
+  };
+}
+
+
+var styles = StyleSheet.create({
+  navBarContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'transparent',
+  },
+});
+
+module.exports = NavigatorNavigationBar;

+/**
+ * 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.
+ *
+ */
+'use strict';
+
+var buildStyleInterpolator = require('./buildStyleInterpolator');
+var merge = require('./merge');
+
+// Android Material Design
+var NAV_BAR_HEIGHT = 56;
+var TITLE_LEFT = 72;
+var BUTTON_SIZE = 24;
+var TOUCH_TARGT_SIZE = 48;
+var BUTTON_HORIZONTAL_MARGIN = 16;
+
+var BUTTON_EFFECTIVE_MARGIN = BUTTON_HORIZONTAL_MARGIN - (TOUCH_TARGT_SIZE - BUTTON_SIZE) / 2;
+var NAV_ELEMENT_HEIGHT = NAV_BAR_HEIGHT;
+
+var BASE_STYLES = {
+  Title: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    alignItems: 'flex-start',
+    height: NAV_ELEMENT_HEIGHT,
+    backgroundColor: 'transparent',
+    marginLeft: TITLE_LEFT,
+  },
+  LeftButton: {
+    position: 'absolute',
+    top: 0,
+    left: BUTTON_EFFECTIVE_MARGIN,
+    overflow: 'hidden',
+    height: NAV_ELEMENT_HEIGHT,
+    backgroundColor: 'transparent',
+  },
+  RightButton: {
+    position: 'absolute',
+    top: 0,
+    right: BUTTON_EFFECTIVE_MARGIN,
+    overflow: 'hidden',
+    alignItems: 'flex-end',
+    height: NAV_ELEMENT_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, { opacity: 0 }),
+    LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }),
+    RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }),
+  },
+  Center: {
+    Title: merge(BASE_STYLES.Title, { opacity: 1 }),
+    LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 1 }),
+    RightButton: merge(BASE_STYLES.RightButton, { opacity: 1 }),
+  },
+  Right: {
+    Title: merge(BASE_STYLES.Title, { opacity: 0 }),
+    LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }),
+    RightButton: merge(BASE_STYLES.RightButton, { 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: 0,
+    TotalNavHeight: NAV_BAR_HEIGHT,
+  },
+  Interpolators,
+  Stages,
+};

+/**
+ * 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.
+ *
+ */
+'use strict';
+
+import {
+  Dimensions,
+  I18nManager,
+  PixelRatio,
+} from 'react-native';
+
+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,
+    right: 0,
+    alignItems: 'center',
+    height: NAV_BAR_HEIGHT,
+    backgroundColor: 'transparent',
+  },
+  LeftButton: {
+    position: 'absolute',
+    top: STATUS_BAR_HEIGHT,
+    left: 0,
+    overflow: 'hidden',
+    opacity: 1,
+    height: NAV_BAR_HEIGHT,
+    backgroundColor: 'transparent',
+  },
+  RightButton: {
+    position: 'absolute',
+    top: STATUS_BAR_HEIGHT,
+    right: 0,
+    overflow: 'hidden',
+    opacity: 1,
+    alignItems: 'flex-end',
+    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: 0, opacity: 0 }),
+    RightButton: merge(BASE_STYLES.RightButton, { 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, { 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, { 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,
+  },
+  Interpolators,
+  Stages,
+};

+/**
+ * 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.
+ *
+ */
+'use strict';
+
+import {
+  Dimensions,
+  I18nManager,
+  PixelRatio,
+} from 'react-native';
+
+var buildStyleInterpolator = require('./buildStyleInterpolator');
+
+var IS_RTL = I18nManager.isRTL;
+
+var SCREEN_WIDTH = Dimensions.get('window').width;
+var SCREEN_HEIGHT = Dimensions.get('window').height;
+var PIXEL_RATIO = PixelRatio.get();
+
+var ToTheLeftIOS = {
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: -SCREEN_WIDTH * 0.3, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+};
+
+var ToTheRightIOS = {
+  ...ToTheLeftIOS,
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: SCREEN_WIDTH * 0.3, y: 0, z: 0},
+  },
+};
+
+var FadeToTheLeft = {
+  // 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(SCREEN_WIDTH * 0.3), y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  // 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(SCREEN_WIDTH * 0.3),
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  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 FadeToTheRight = {
+  ...FadeToTheLeft,
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: Math.round(SCREEN_WIDTH * 0.3), y: 0, z: 0},
+  },
+  translateX: {
+    from: 0,
+    to: Math.round(SCREEN_WIDTH * 0.3),
+  },
+};
+
+var FadeIn = {
+  opacity: {
+    from: 0,
+    to: 1,
+    min: 0.5,
+    max: 1,
+    type: 'linear',
+    extrapolate: false,
+    round: 100,
+  },
+};
+
+var FadeOut = {
+  opacity: {
+    from: 1,
+    to: 0,
+    min: 0,
+    max: 0.5,
+    type: 'linear',
+    extrapolate: false,
+    round: 100,
+  },
+};
+
+var ToTheLeft = {
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: -SCREEN_WIDTH, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+
+  translateX: {
+    from: 0,
+    to: -SCREEN_WIDTH,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+};
+
+var ToTheRight = {
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: SCREEN_WIDTH, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+
+  translateX: {
+    from: 0,
+    to: SCREEN_WIDTH,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+};
+
+var ToTheUp = {
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: 0, y: -SCREEN_HEIGHT, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+  translateY: {
+    from: 0,
+    to: -SCREEN_HEIGHT,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+};
+
+var ToTheDown = {
+  transformTranslate: {
+    from: {x: 0, y: 0, z: 0},
+    to: {x: 0, y: SCREEN_HEIGHT, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+  translateY: {
+    from: 0,
+    to: SCREEN_HEIGHT,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+};
+
+var FromTheRight = {
+  opacity: {
+    value: 1.0,
+    type: 'constant',
+  },
+
+  transformTranslate: {
+    from: {x: SCREEN_WIDTH, y: 0, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+
+  translateX: {
+    from: SCREEN_WIDTH,
+    to: 0,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+
+  scaleX: {
+    value: 1,
+    type: 'constant',
+  },
+  scaleY: {
+    value: 1,
+    type: 'constant',
+  },
+};
+
+var FromTheLeft = {
+  ...FromTheRight,
+  transformTranslate: {
+    from: {x: -SCREEN_WIDTH, y: 0, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  translateX: {
+    from: -SCREEN_WIDTH,
+    to: 0,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+};
+
+var FromTheDown = {
+  ...FromTheRight,
+  transformTranslate: {
+    from: {y: SCREEN_HEIGHT, x: 0, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  translateY: {
+    from: SCREEN_HEIGHT,
+    to: 0,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+};
+
+var FromTheTop = {
+  ...FromTheRight,
+  transformTranslate: {
+    from: {y: -SCREEN_HEIGHT, x: 0, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  translateY: {
+    from: -SCREEN_HEIGHT,
+    to: 0,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+};
+
+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: PIXEL_RATIO,
+  },
+  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: SCREEN_HEIGHT, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  translateY: {
+    from: SCREEN_HEIGHT,
+    to: 0,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  scaleX: {
+    value: 1,
+    type: 'constant',
+  },
+  scaleY: {
+    value: 1,
+    type: 'constant',
+  },
+};
+
+var ToTheBackAndroid = {
+  opacity: {
+    value: 1,
+    type: 'constant',
+  },
+};
+
+var FromTheFrontAndroid = {
+  opacity: {
+    from: 0,
+    to: 1,
+    min: 0.5,
+    max: 1,
+    type: 'linear',
+    extrapolate: false,
+    round: 100,
+  },
+  transformTranslate: {
+    from: {x: 0, y: 100, z: 0},
+    to: {x: 0, y: 0, z: 0},
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+  translateY: {
+    from: 100,
+    to: 0,
+    min: 0,
+    max: 1,
+    type: 'linear',
+    extrapolate: true,
+    round: PIXEL_RATIO,
+  },
+};
+
+var BaseOverswipeConfig = {
+  frictionConstant: 1,
+  frictionByDistance: 1.5,
+};
+
+var BaseLeftToRightGesture = {
+
+  // If the gesture can end and restart during one continuous touch
+  isDetachable: false,
+
+  // How far the swipe must drag to start transitioning
+  gestureDetectMovement: 2,
+
+  // Amplitude of release velocity that is considered still
+  notMoving: 0.3,
+
+  // Fraction of directional move required.
+  directionRatio: 0.66,
+
+  // Velocity to transition with when the gesture release was "not moving"
+  snapVelocity: 2,
+
+  // Region that can trigger swipe. iOS default is 30px from the left edge
+  edgeHitWidth: 30,
+
+  // Ratio of gesture completion when non-velocity release will cause action
+  stillCompletionRatio: 3 / 5,
+
+  fullDistance: SCREEN_WIDTH,
+
+  direction: 'left-to-right',
+
+};
+
+var BaseRightToLeftGesture = {
+  ...BaseLeftToRightGesture,
+  direction: 'right-to-left',
+};
+
+var BaseDownUpGesture = {
+  ...BaseLeftToRightGesture,
+  fullDistance: SCREEN_HEIGHT,
+  direction: 'bottom-to-top',
+};
+
+var BaseUpDownGesture = {
+  ...BaseLeftToRightGesture,
+  fullDistance: SCREEN_HEIGHT,
+  direction: 'top-to-bottom',
+};
+
+// For RTL experiment, we need to swap all the Left and Right gesture and animation.
+// So we create a direction mapping for both LTR and RTL, and change left/right to start/end.
+let directionMapping = {
+  ToTheStartIOS: ToTheLeftIOS,
+  ToTheEndIOS: ToTheRightIOS,
+  FadeToTheStart: FadeToTheLeft,
+  FadeToTheEnd: FadeToTheRight,
+  ToTheStart: ToTheLeft,
+  ToTheEnd: ToTheRight,
+  FromTheStart: FromTheLeft,
+  FromTheEnd: FromTheRight,
+  BaseStartToEndGesture: BaseLeftToRightGesture,
+  BaseEndToStartGesture: BaseRightToLeftGesture,
+};
+
+if (IS_RTL) {
+  directionMapping = {
+    ToTheStartIOS: ToTheRightIOS,
+    ToTheEndIOS: ToTheLeftIOS,
+    FadeToTheStart: FadeToTheRight,
+    FadeToTheEnd: FadeToTheLeft,
+    ToTheStart: ToTheRight,
+    ToTheEnd: ToTheLeft,
+    FromTheStart: FromTheRight,
+    FromTheEnd: FromTheLeft,
+    BaseStartToEndGesture: BaseRightToLeftGesture,
+    BaseEndToStartGesture: BaseLeftToRightGesture,
+  };
+}
+
+var BaseConfig = {
+  // A list of all gestures that are enabled on this scene
+  gestures: {
+    pop: directionMapping.BaseStartToEndGesture,
+  },
+
+  // Rebound spring parameters when transitioning FROM this scene
+  springFriction: 26,
+  springTension: 200,
+
+  // Velocity to start at when transitioning without gesture
+  defaultTransitionVelocity: 1.5,
+
+  // Animation interpolators for horizontal transitioning:
+  animationInterpolators: {
+    into: buildStyleInterpolator(directionMapping.FromTheEnd),
+    out: buildStyleInterpolator(directionMapping.FadeToTheStart),
+  },
+};
+
+var NavigatorSceneConfigs = {
+  PushFromRight: {
+    ...BaseConfig,
+    animationInterpolators: {
+      into: buildStyleInterpolator(directionMapping.FromTheEnd),
+      out: buildStyleInterpolator(directionMapping.ToTheStartIOS),
+    },
+  },
+  PushFromLeft: {
+    ...BaseConfig,
+    animationInterpolators: {
+      into: buildStyleInterpolator(directionMapping.FromTheStart),
+      out: buildStyleInterpolator(directionMapping.ToTheEndIOS),
+    },
+  },
+  FloatFromRight: {
+    ...BaseConfig,
+    // We will want to customize this soon
+  },
+  FloatFromLeft: {
+    ...BaseConfig,
+    gestures: {
+      pop: directionMapping.BaseEndToStartGesture,
+    },
+    animationInterpolators: {
+      into: buildStyleInterpolator(directionMapping.FromTheStart),
+      out: buildStyleInterpolator(directionMapping.FadeToTheEnd),
+    },
+  },
+  FloatFromBottom: {
+    ...BaseConfig,
+    gestures: {
+      pop: {
+        ...directionMapping.BaseStartToEndGesture,
+        edgeHitWidth: 150,
+        direction: 'top-to-bottom',
+        fullDistance: SCREEN_HEIGHT,
+      }
+    },
+    animationInterpolators: {
+      into: buildStyleInterpolator(FromTheFront),
+      out: buildStyleInterpolator(ToTheBack),
+    },
+  },
+  FloatFromBottomAndroid: {
+    ...BaseConfig,
+    gestures: null,
+    defaultTransitionVelocity: 3,
+    springFriction: 20,
+    animationInterpolators: {
+      into: buildStyleInterpolator(FromTheFrontAndroid),
+      out: buildStyleInterpolator(ToTheBackAndroid),
+    },
+  },
+  FadeAndroid: {
+    ...BaseConfig,
+    gestures: null,
+    animationInterpolators: {
+      into: buildStyleInterpolator(FadeIn),
+      out: buildStyleInterpolator(FadeOut),
+    },
+  },
+  SwipeFromLeft: {
+    ...BaseConfig,
+    gestures: {
+      jumpBack: {
+        ...directionMapping.BaseEndToStartGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+      jumpForward: {
+        ...directionMapping.BaseStartToEndGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+    },
+    animationInterpolators: {
+      into: buildStyleInterpolator(directionMapping.FromTheStart),
+      out: buildStyleInterpolator(directionMapping.ToTheEnd),
+    },
+  },
+  HorizontalSwipeJump: {
+    ...BaseConfig,
+    gestures: {
+      jumpBack: {
+        ...directionMapping.BaseStartToEndGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+      jumpForward: {
+        ...directionMapping.BaseEndToStartGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+    },
+    animationInterpolators: {
+      into: buildStyleInterpolator(directionMapping.FromTheEnd),
+      out: buildStyleInterpolator(directionMapping.ToTheStart),
+    },
+  },
+  HorizontalSwipeJumpFromRight: {
+    ...BaseConfig,
+    gestures: {
+      jumpBack: {
+        ...directionMapping.BaseEndToStartGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+      jumpForward: {
+        ...directionMapping.BaseStartToEndGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+      pop: directionMapping.BaseEndToStartGesture,
+    },
+    animationInterpolators: {
+      into: buildStyleInterpolator(directionMapping.FromTheStart),
+      out: buildStyleInterpolator(directionMapping.FadeToTheEnd),
+    },
+  },
+  HorizontalSwipeJumpFromLeft: {
+    ...BaseConfig,
+    gestures: {
+      jumpBack: {
+        ...directionMapping.BaseEndToStartGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+      jumpForward: {
+        ...directionMapping.BaseStartToEndGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+      pop: directionMapping.BaseEndToStartGesture,
+    },
+    animationInterpolators: {
+      into: buildStyleInterpolator(directionMapping.FromTheStart),
+      out: buildStyleInterpolator(directionMapping.ToTheEnd),
+    },
+  },
+  VerticalUpSwipeJump: {
+    ...BaseConfig,
+    gestures: {
+      jumpBack: {
+        ...BaseUpDownGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+      jumpForward: {
+        ...BaseDownUpGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+    },
+    animationInterpolators: {
+      into: buildStyleInterpolator(FromTheDown),
+      out: buildStyleInterpolator(ToTheUp),
+    },
+  },
+  VerticalDownSwipeJump: {
+    ...BaseConfig,
+    gestures: {
+      jumpBack: {
+        ...BaseDownUpGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+      jumpForward: {
+        ...BaseUpDownGesture,
+        overswipe: BaseOverswipeConfig,
+        edgeHitWidth: null,
+        isDetachable: true,
+      },
+    },
+    animationInterpolators: {
+      into: buildStyleInterpolator(FromTheTop),
+      out: buildStyleInterpolator(ToTheDown),
+    },
+  },
+};
+
+module.exports = NavigatorSceneConfigs;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+import type EventEmitter from './EventEmitter';
+
+/**
+ * Subscribable provides a mixin for safely subscribing a component to an
+ * eventEmitter
+ *
+ * This will be replaced with the observe interface that will be coming soon to
+ * React Core
+ */
+
+var Subscribable = {};
+
+Subscribable.Mixin = {
+
+  componentWillMount: function() {
+    this._subscribableSubscriptions = [];
+  },
+
+  componentWillUnmount: function() {
+    this._subscribableSubscriptions.forEach(
+      (subscription) => subscription.remove()
+    );
+    this._subscribableSubscriptions = null;
+  },
+
+  /**
+   * Special form of calling `addListener` that *guarantees* that a
+   * subscription *must* be tied to a component instance, and therefore will
+   * be cleaned up when the component is unmounted. It is impossible to create
+   * the subscription and pass it in - this method must be the one to create
+   * the subscription and therefore can guarantee it is retained in a way that
+   * will be cleaned up.
+   *
+   * @param {EventEmitter} eventEmitter emitter to subscribe to.
+   * @param {string} eventType Type of event to listen to.
+   * @param {function} listener Function to invoke when event occurs.
+   * @param {object} context Object to use as listener context.
+   */
+  addListenerOn: function(
+    eventEmitter: EventEmitter,
+    eventType: string,
+    listener: Function,
+    context: Object
+  ) {
+    this._subscribableSubscriptions.push(
+      eventEmitter.addListener(eventType, listener, context)
+    );
+  }
+};
+
+module.exports = Subscribable;

+/**
+ * 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.
+ */
+'use strict';
+
+jest
+  .disableAutomock()
+  .mock('ErrorUtils');
+
+var NavigationContext = require('NavigationContext');
+var NavigationEvent = require('NavigationEvent');
+
+describe('NavigationContext', () => {
+  it('defaults `currentRoute` to null', () => {
+    var context = new NavigationContext();
+    expect(context.currentRoute).toEqual(null);
+  });
+
+  it('updates `currentRoute`', () => {
+    var context = new NavigationContext();
+    context.emit('didfocus', {route: {name: 'a'}});
+    expect(context.currentRoute.name).toEqual('a');
+  });
+
+  it('has parent', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+    expect(child.parent).toBe(parent);
+  });
+
+  it('has `top`', () => {
+    var top = new NavigationContext();
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    top.appendChild(parent);
+    parent.appendChild(child);
+    expect(child.top).toBe(top);
+  });
+
+  it('captures event', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+
+    var logs = [];
+
+    var listener = (event) => {
+      var {currentTarget, eventPhase, target, type} = event;
+      logs.push({
+        currentTarget,
+        eventPhase,
+        target,
+        type,
+      });
+    };
+
+    parent.addListener('yo', listener, true);
+    child.addListener('yo', listener, true);
+
+    child.emit('yo');
+
+    expect(logs).toEqual([
+      {
+        currentTarget: parent,
+        eventPhase: NavigationEvent.CAPTURING_PHASE,
+        target: child,
+        type: 'yo',
+      },
+      {
+        currentTarget: child,
+        eventPhase: NavigationEvent.AT_TARGET,
+        target: child,
+        type: 'yo',
+      }
+    ]);
+  });
+
+  it('bubbles events', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+
+    var logs = [];
+
+    var listener = (event) => {
+      var {currentTarget, eventPhase, target, type} = event;
+      logs.push({
+        currentTarget,
+        eventPhase,
+        target,
+        type,
+      });
+    };
+
+    parent.addListener('yo', listener);
+    child.addListener('yo', listener);
+
+    child.emit('yo');
+
+    expect(logs).toEqual([
+      {
+        currentTarget: child,
+        eventPhase: NavigationEvent.AT_TARGET,
+        target: child,
+        type: 'yo',
+      },
+      {
+        currentTarget: parent,
+        eventPhase: NavigationEvent.BUBBLING_PHASE,
+        target: child,
+        type: 'yo',
+      },
+    ]);
+  });
+
+  it('stops event propagation at capture phase', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+
+    var counter = 0;
+
+    parent.addListener('yo', event => event.stopPropagation(), true);
+    child.addListener('yo', event => counter++, true);
+
+    child.emit('yo');
+
+    expect(counter).toBe(0);
+  });
+
+  it('stops event propagation at bubbling phase', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+
+    var counter = 0;
+
+    parent.addListener('yo', event => counter++);
+    child.addListener('yo', event => event.stopPropagation());
+
+    child.emit('yo');
+
+    expect(counter).toBe(0);
+  });
+
+  it('prevents event at capture phase', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+
+    var val;
+    parent.addListener('yo', event => event.preventDefault(), true);
+    child.addListener('yo', event => val = event.defaultPrevented, true);
+
+    child.emit('yo');
+
+    expect(val).toBe(true);
+  });
+
+  it('prevents event at bubble phase', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+
+    var val;
+    parent.addListener('yo', event => val = event.defaultPrevented);
+    child.addListener('yo', event => event.preventDefault());
+
+    child.emit('yo');
+
+    expect(val).toBe(true);
+  });
+
+  it('emits nested events in order at capture phase', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+
+    var logs = [];
+
+    var listener = (event) => {
+      var {currentTarget, type} = event;
+      logs.push({
+        currentTarget,
+        type,
+      });
+    };
+
+    child.addListener('yo', event => {
+      // event `didyo` should be fired after the full propagation cycle of the
+      // `yo` event.
+      child.emit('didyo');
+    });
+
+    parent.addListener('yo', listener, true);
+    parent.addListener('didyo', listener, true);
+    child.addListener('yo', listener, true);
+
+    child.emit('yo');
+
+    expect(logs).toEqual([
+      {type: 'yo', currentTarget: parent},
+      {type: 'yo', currentTarget: child},
+      {type: 'didyo', currentTarget: parent},
+    ]);
+  });
+
+  it('emits nested events in order at bubbling phase', () => {
+    var parent = new NavigationContext();
+    var child = new NavigationContext();
+    parent.appendChild(child);
+
+    var logs = [];
+
+    var listener = (event) => {
+      var {currentTarget, type} = event;
+      logs.push({
+        currentTarget,
+        type,
+      });
+    };
+
+    child.addListener('yo', event => {
+      // event `didyo` should be fired after the full propagation cycle of the
+      // `yo` event.
+      child.emit('didyo');
+    });
+
+    parent.addListener('yo', listener);
+    child.addListener('yo', listener);
+    parent.addListener('didyo', listener);
+
+    child.emit('yo');
+
+    expect(logs).toEqual([
+      {type: 'yo', currentTarget: child},
+      {type: 'yo', currentTarget: parent},
+      {type: 'didyo', currentTarget: parent},
+    ]);
+  });
+});

+/**
+ * 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.
+ */
+'use strict';
+
+jest
+  .unmock('NavigationEvent')
+  .unmock('fbjs/lib/invariant');
+
+var NavigationEvent = require('NavigationEvent');
+
+describe('NavigationEvent', () => {
+  it('constructs', () => {
+    var target = {};
+    var event = new NavigationEvent('foo', target, 123);
+    expect(event.type).toBe('foo');
+    expect(event.target).toBe(target);
+    expect(event.data).toBe(123);
+  });
+
+  it('constructs from pool', () => {
+    var target = {};
+    var event = NavigationEvent.pool('foo', target, 123);
+    expect(event.type).toBe('foo');
+    expect(event.target).toBe(target);
+    expect(event.data).toBe(123);
+  });
+
+  it('prevents default', () => {
+    var event = new NavigationEvent('foo', {}, 123);
+    expect(event.defaultPrevented).toBe(false);
+    event.preventDefault();
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('recycles', () => {
+    var event1 = NavigationEvent.pool('foo', {}, 123);
+    event1.dispose();
+    expect(event1.type).toBeFalsy();
+    expect(event1.data).toBe(null);
+    expect(event1.target).toBe(null);
+
+    var event2 = NavigationEvent.pool('bar', {}, 456);
+    expect(event2.type).toBe('bar');
+    expect(event2).toBe(event1);
+  });
+});

+/**
+ * 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.
+ */
+'use strict';
+
+jest
+  .unmock('EmitterSubscription')
+  .unmock('EventSubscription')
+  .unmock('EventEmitter')
+  .unmock('EventSubscriptionVendor')
+  .unmock('NavigationEvent')
+  .unmock('NavigationEventEmitter');
+
+var NavigationEventEmitter = require('NavigationEventEmitter');
+
+describe('NavigationEventEmitter', () => {
+  it('emits event', () => {
+    var context = {};
+    var emitter = new NavigationEventEmitter(context);
+    var logs = [];
+
+    emitter.addListener('ping', (event) => {
+      var {type, data, target, defaultPrevented} = event;
+
+      logs.push({
+        data,
+        defaultPrevented,
+        target,
+        type,
+      });
+
+    });
+
+    emitter.emit('ping', 'hello');
+
+    expect(logs.length).toBe(1);
+    expect(logs[0].target).toBe(context);
+    expect(logs[0].type).toBe('ping');
+    expect(logs[0].data).toBe('hello');
+    expect(logs[0].defaultPrevented).toBe(false);
+  });
+
+  it('does not emit event that has no listeners', () => {
+    var context = {};
+    var emitter = new NavigationEventEmitter(context);
+    var pinged = false;
+
+    emitter.addListener('ping', () => {
+      pinged = true;
+    });
+
+    emitter.emit('yo', 'bo');
+    expect(pinged).toBe(false);
+  });
+
+  it('puts nested emit call in a queue', () => {
+    var context = {};
+    var emitter = new NavigationEventEmitter(context);
+    var logs = [];
+
+    emitter.addListener('one', () => {
+      logs.push(1);
+      emitter.emit('two');
+      logs.push(2);
+    });
+
+    emitter.addListener('two', () => {
+      logs.push(3);
+      emitter.emit('three');
+      logs.push(4);
+    });
+
+    emitter.addListener('three', () => {
+      logs.push(5);
+    });
+
+    emitter.emit('one');
+
+    expect(logs).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('puts nested emit call in a queue should be in sequence order', () => {
+    var context = {};
+    var emitter = new NavigationEventEmitter(context);
+    var logs = [];
+
+    emitter.addListener('one', () => {
+      logs.push(1);
+      emitter.emit('two');
+      emitter.emit('three');
+      logs.push(2);
+    });
+
+    emitter.addListener('two', () => {
+      logs.push(3);
+      logs.push(4);
+    });
+
+    emitter.addListener('three', () => {
+      logs.push(5);
+    });
+
+    emitter.emit('one');
+
+    expect(logs).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('calls callback after emitting', () => {
+    var context = {};
+    var emitter = new NavigationEventEmitter(context);
+    var logs = [];
+
+    emitter.addListener('ping', (event) => {
+      var {type, data, target, defaultPrevented} = event;
+      logs.push({
+        data,
+        defaultPrevented,
+        target,
+        type,
+      });
+      event.preventDefault();
+    });
+
+    emitter.emit('ping', 'hello', (event) => {
+      var {type, data, target, defaultPrevented} = event;
+      logs.push({
+        data,
+        defaultPrevented,
+        target,
+        type,
+      });
+    });
+
+    expect(logs.length).toBe(2);
+    expect(logs[1].target).toBe(context);
+    expect(logs[1].type).toBe('ping');
+    expect(logs[1].data).toBe('hello');
+    expect(logs[1].defaultPrevented).toBe(true);
+  });
+
+  it('calls callback after emitting the current event and before ' +
+       'emitting the next event', () => {
+    var context = {};
+    var emitter = new NavigationEventEmitter(context);
+    var logs = [];
+
+    emitter.addListener('ping', (event) => {
+      logs.push('ping');
+      emitter.emit('pong');
+    });
+
+    emitter.addListener('pong', (event) => {
+      logs.push('pong');
+    });
+
+    emitter.emit('ping', null, () => {
+      logs.push('did-ping');
+    });
+
+    expect(logs).toEqual([
+      'ping',
+      'did-ping',
+      'pong',
+    ]);
+  });
+});

+/**
+ * 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.
+ */
+'use strict';
+
+
+jest
+ .disableAutomock()
+ .mock('ErrorUtils');
+
+var NavigationRouteStack = require('NavigationRouteStack');
+
+function assetStringNotEmpty(str) {
+  expect(!!str && typeof str === 'string').toBe(true);
+}
+
+describe('NavigationRouteStack:', () => {
+  // Different types of routes.
+  var ROUTES = [
+    'foo',
+    1,
+    true,
+    {foo: 'bar'},
+    ['foo'],
+  ];
+
+  // Basic
+  it('gets index', () => {
+    var stack = new NavigationRouteStack(1, ['a', 'b', 'c']);
+    expect(stack.index).toBe(1);
+  });
+
+  it('gets size', () => {
+    var stack = new NavigationRouteStack(1, ['a', 'b', 'c']);
+    expect(stack.size).toBe(3);
+  });
+
+  it('gets route', () => {
+    var stack = new NavigationRouteStack(0, ['a', 'b', 'c']);
+    expect(stack.get(2)).toBe('c');
+  });
+
+  it('converts to an array', () => {
+    var stack = new NavigationRouteStack(0, ['a', 'b']);
+    expect(stack.toArray()).toEqual(['a', 'b']);
+  });
+
+  it('creates a new stack after mutation', () => {
+    var stack1 = new NavigationRouteStack(0, ['a', 'b']);
+    var stack2 = stack1.push('c');
+    expect(stack1).not.toBe(stack2);
+  });
+
+  it('throws at index out of bound', () => {
+    expect(() => {
+      new NavigationRouteStack(-1, ['a', 'b']);
+    }).toThrow();
+
+    expect(() => {
+      new NavigationRouteStack(100, ['a', 'b']);
+    }).toThrow();
+  });
+
+  it('finds index', () => {
+    var stack = new NavigationRouteStack(0, ['a', 'b']);
+    expect(stack.indexOf('b')).toBe(1);
+    expect(stack.indexOf('c')).toBe(-1);
+  });
+
+  // Key
+  it('gets key for route', () => {
+    var test = (route) => {
+      var stack = new NavigationRouteStack(0, ['a']);
+      var key = stack.push(route).keyOf(route);
+      expect(typeof key).toBe('string');
+      expect(!!key).toBe(true);
+    };
+
+    ROUTES.forEach(test);
+  });
+
+  it('gets a key of larger value for route', () => {
+    var lastKey = '';
+    var test = (route) => {
+      var stack = new NavigationRouteStack(0, ['a']);
+      var key = stack.push(route).keyOf(route);
+      expect(key > lastKey).toBe(true);
+      lastKey = key;
+    };
+
+    ROUTES.forEach(test);
+  });
+
+  it('gets an unique key for a different route', () => {
+    var stack = new NavigationRouteStack(0, ['a']);
+    var keys = {};
+
+    var test = (route) => {
+      stack = stack.push(route);
+      var key = stack.keyOf(route);
+      expect(keys[key]).toBe(undefined);
+      keys[key] = true;
+    };
+
+    ROUTES.forEach(test);
+  });
+
+  it('gets the same unique key for the same route', () => {
+    var test = (route) => {
+      var stack = new NavigationRouteStack(0, [route]);
+      expect(stack.keyOf(route)).toBe(stack.keyOf(route));
+    };
+
+    ROUTES.forEach(test);
+  });
+
+
+  it('gets the same unique key form the derived stack', () => {
+    var test = (route) => {
+      var stack = new NavigationRouteStack(0, [route]);
+      var derivedStack = stack.push('wow').pop().slice(0, 10).push('blah');
+      expect(derivedStack.keyOf(route)).toBe(stack.keyOf(route));
+    };
+
+    ROUTES.forEach(test);
+  });
+
+  it('gets a different key from a different stack', () => {
+    var test = (route) => {
+      var stack1 = new NavigationRouteStack(0, [route]);
+      var stack2 = new NavigationRouteStack(0, [route]);
+      expect(stack1.keyOf(route)).not.toBe(stack2.keyOf(route));
+    };
+
+    ROUTES.forEach(test);
+  });
+
+  it('gets no key for a route that does not contains this route', () => {
+     var stack = new NavigationRouteStack(0, ['a']);
+     expect(stack.keyOf('b')).toBe(null);
+  });
+
+  it('gets a new key for a route that was removed and added again', () => {
+    var test = (route) => {
+      var stack = new NavigationRouteStack(0, ['a']);
+
+      var key1 = stack.push(route).keyOf(route);
+      var key2 = stack.push(route).pop().push(route).keyOf(route);
+      expect(key1).not.toBe(key2);
+    };
+
+    ROUTES.forEach(test);
+  });
+
+  // Slice
+  it('slices', () => {
+    var stack1 = new NavigationRouteStack(1, ['a', 'b', 'c', 'd']);
+    var stack2 = stack1.slice(1, 3);
+    expect(stack2).not.toBe(stack1);
+    expect(stack2.toArray()).toEqual(['b', 'c']);
+  });
+
+  it('may update index after slicing', () => {
+    var stack = new NavigationRouteStack(2, ['a', 'b', 'c']);
+    expect(stack.slice().index).toBe(2);
+    expect(stack.slice(0, 1).index).toBe(0);
+    expect(stack.slice(0, 2).index).toBe(1);
+    expect(stack.slice(0, 3).index).toBe(2);
+    expect(stack.slice(0, 100).index).toBe(2);
+    expect(stack.slice(-2).index).toBe(1);
+  });
+
+  it('slices without specifying params', () => {
+    var stack1 = new NavigationRouteStack(1, ['a', 'b', 'c']);
+    var stack2 = stack1.slice();
+    expect(stack2).toBe(stack1);
+  });
+
+  it('slices to from the end', () => {
+    var stack1 = new NavigationRouteStack(1, ['a', 'b', 'c', 'd']);
+    var stack2 = stack1.slice(-2);
+    expect(stack2.toArray()).toEqual(['c', 'd']);
+  });
+
+  it('throws when slicing to empty', () => {
+      expect(() => {
+        var stack = new NavigationRouteStack(1, ['a', 'b']);
+        stack.slice(100);
+      }).toThrow();
+  });
+
+  // Push
+  it('pushes route', () => {
+    var stack1 = new NavigationRouteStack(1, ['a', 'b']);
+    var stack2 = stack1.push('c');
+
+    expect(stack2).not.toBe(stack1);
+    expect(stack2.toArray()).toEqual(['a', 'b', 'c']);
+    expect(stack2.index).toBe(2);
+    expect(stack2.size).toBe(3);
+  });
+
+  it('throws when pushing empty route', () => {
+    expect(() => {
+      var stack = new NavigationRouteStack(1, ['a', 'b']);
+      stack.push(null);
+    }).toThrow();
+
+    expect(() => {
+      var stack = new NavigationRouteStack(1, ['a', 'b']);
+      stack.push('');
+    }).toThrow();
+
+    expect(() => {
+      var stack = new NavigationRouteStack(1, ['a', 'b']);
+      stack.push(undefined);
+    }).toThrow();
+  });
+
+  it('replaces routes on push', () => {
+    var stack1 = new NavigationRouteStack(1, ['a', 'b', 'c']);
+    var stack2 = stack1.push('d');
+    expect(stack2).not.toBe(stack1);
+    expect(stack2.toArray()).toEqual(['a', 'b', 'd']);
+    expect(stack2.index).toBe(2);
+  });
+
+  // Pop
+  it('pops route', () => {
+    var stack1 = new NavigationRouteStack(2, ['a', 'b', 'c']);
+    var stack2 = stack1.pop();
+    expect(stack2).not.toBe(stack1);
+    expect(stack2.toArray()).toEqual(['a', 'b']);
+    expect(stack2.index).toBe(1);
+    expect(stack2.size).toBe(2);
+  });
+
+  it('replaces routes on pop', () => {
+    var stack1 = new NavigationRouteStack(1, ['a', 'b', 'c']);
+    var stack2 = stack1.pop();
+    expect(stack2).not.toBe(stack1);
+    expect(stack2.toArray()).toEqual(['a']);
+    expect(stack2.index).toBe(0);
+  });
+
+  it('throws when popping to empty stack', () => {
+    expect(() => {
+      var stack = new NavigationRouteStack(0, ['a']);
+      stack.pop();
+    }).toThrow();
+  });
+
+  // Jump
+  it('jumps to index', () => {
+    var stack1 = new NavigationRouteStack(0, ['a', 'b', 'c']);
+    var stack2 = stack1.jumpToIndex(2);
+
+    expect(stack2).not.toBe(stack1);
+    expect(stack2.index).toBe(2);
+  });
+
+  it('throws then jumping to index out of bound', () => {
+    expect(() => {
+      var stack = new NavigationRouteStack(1, ['a', 'b']);
+      stack.jumpToIndex(2);
+    }).toThrow();
+
+    expect(() => {
+      var stack = new NavigationRouteStack(1, ['a', 'b']);
+      stack.jumpToIndex(-1);
+    }).toThrow();
+  });
+
+  // Replace
+  it('replaces route at index', () => {
+    var stack1 = new NavigationRouteStack(1, ['a', 'b']);
+    var stack2 = stack1.replaceAtIndex(0, 'x');
+
+    expect(stack2).not.toBe(stack1);
+    expect(stack2.toArray()).toEqual(['x', 'b']);
+    expect(stack2.index).toBe(0);
+  });
+
+  it('replaces route at negative index', () => {
+    var stack1 = new NavigationRouteStack(1, ['a', 'b']);
+    var stack2 = stack1.replaceAtIndex(-1, 'x');
+
+    expect(stack2).not.toBe(stack1);
+    expect(stack2.toArray()).toEqual(['a', 'x']);
+    expect(stack2.index).toBe(1);
+  });
+
+  it('throws when replacing empty route', () => {
+    expect(() => {
+      var stack = new NavigationRouteStack(1, ['a', 'b']);
+      stack.replaceAtIndex(1, null);
+    }).toThrow();
+  });
+
+  it('throws when replacing at index out of bound', () => {
+    expect(() => {
+      var stack = new NavigationRouteStack(1, ['a', 'b']);
+      stack.replaceAtIndex(100, 'x');
+    }).toThrow();
+  });
+
+  // Iteration
+  it('iterates each item', () => {
+    var stack = new NavigationRouteStack(0, ['a', 'b']);
+    var logs = [];
+    var keys = {};
+    var context = {name: 'yo'};
+
+    stack.forEach(function (route, index, key) {
+      assetStringNotEmpty(key);
+      if (!keys.hasOwnProperty(key)) {
+        keys[key] = true;
+        logs.push([
+          route,
+          index,
+          this.name,
+        ]);
+      }
+    }, context);
+
+    expect(logs).toEqual([
+      ['a', 0, 'yo'],
+      ['b', 1, 'yo'],
+    ]);
+  });
+
+  it('Maps to an array', () => {
+    var stack = new NavigationRouteStack(0, ['a', 'b']);
+    var keys = {};
+    var context = {name: 'yo'};
+
+    var logs = stack.mapToArray(function(route, index, key) {
+      assetStringNotEmpty(key);
+      if (!keys.hasOwnProperty(key)) {
+        keys[key] = true;
+        return [
+          route,
+          index,
+          this.name,
+        ];
+      }
+    }, context);
+
+    expect(logs).toEqual([
+      ['a', 0, 'yo'],
+      ['b', 1, 'yo'],
+    ]);
+  });
+
+  // Diff
+  it('subtracts stack', () => {
+    var stack1 = new NavigationRouteStack(2, ['a', 'b', 'c']);
+    var stack2 = stack1.pop().pop().push('x').push('y');
+
+    var diff = stack1.subtract(stack2);
+
+    var result = diff.toJS().map((record) => {
+      assetStringNotEmpty(record.key);
+      return {
+        index: record.index,
+        route: record.route,
+      };
+    });
+
+    // route `b` and `c` are no longer in the stack.
+    expect(result).toEqual([
+      {
+        index: 1,
+        route: 'b',
+      },
+      {
+        index: 2,
+        route: 'c',
+      },
+    ]);
+  });
+
+  it('only subtracts the derived stack', () => {
+    var stack1 = new NavigationRouteStack(2, ['a', 'b', 'c']);
+    var stack2 = new NavigationRouteStack(0, ['a']);
+    var diff = stack1.subtract(stack2);
+
+    var result = diff.toJS().map((record) => {
+      assetStringNotEmpty(record.key);
+      return {
+        index: record.index,
+        route: record.route,
+      };
+    });
+
+    expect(result).toEqual([
+      {
+        index: 0,
+        route: 'a',
+      },
+      {
+        index: 1,
+        route: 'b',
+      },
+      {
+        index: 2,
+        route: 'c',
+      },
+    ]);
+
+  });
+});

+/**
+ * Copyright (c) 2015, Facebook, Inc.  All rights reserved.
+ */
+
+'use strict';
+
+jest
+  .unmock('NavigationTreeNode')
+  .unmock('fbjs/lib/invariant')
+  .unmock('immutable');
+
+var NavigationTreeNode = require('NavigationTreeNode');
+
+describe('NavigationTreeNode-test', () => {
+  it('should be empty', () => {
+    var node = new NavigationTreeNode();
+    expect(node.getValue()).toEqual(undefined);
+    expect(node.getParent()).toEqual(null);
+    expect(node.getChildrenCount()).toEqual(0);
+    expect(node.getChildAt(0)).toEqual(null);
+  });
+
+
+  it('should contain value', () => {
+    var node = new NavigationTreeNode(123);
+    expect(node.getValue()).toEqual(123);
+  });
+
+  it('should appendChild', () => {
+    var papa = new NavigationTreeNode('hedger');
+    var baby = new NavigationTreeNode('hedger jr');
+    papa.appendChild(baby);
+    expect(papa.getChildAt(0)).toEqual(baby);
+    expect(papa.getChildrenCount()).toEqual(1);
+    expect(baby.getParent()).toEqual(papa);
+  });
+
+  it('should removeChild', () => {
+    var papa = new NavigationTreeNode('Eddard Stark');
+    var baby = new NavigationTreeNode('Robb Stark');
+    papa.appendChild(baby);
+
+    papa.removeChild(baby);
+    expect(papa.getChildAt(0)).toEqual(null);
+    expect(papa.getChildrenCount()).toEqual(0);
+    expect(baby.getParent()).toEqual(null);
+  });
+
+  it('should not remove non-child', () => {
+    var papa = new NavigationTreeNode('dog');
+    var baby = new NavigationTreeNode('cat');
+    expect(papa.removeChild.bind(papa, baby)).toThrow();
+  });
+
+  it('should find child', () => {
+    var papa = new NavigationTreeNode('Eddard Stark');
+    var baby = new NavigationTreeNode('Robb Stark');
+
+    papa.appendChild(baby);
+    expect(papa.indexOf(baby)).toEqual(0);
+
+    papa.removeChild(baby);
+    expect(papa.indexOf(baby)).toEqual(-1);
+  });
+
+
+  it('should traverse each child', () => {
+    var parent = new NavigationTreeNode();
+    parent.appendChild(new NavigationTreeNode('a'));
+    parent.appendChild(new NavigationTreeNode('b'));
+    parent.appendChild(new NavigationTreeNode('c'));
+    var result = [];
+    parent.forEach((child, index) => {
+      result[index] = child.getValue();
+    });
+
+    expect(result).toEqual(['a', 'b', 'c']);
+  });
+
+  it('should map children', () => {
+    var parent = new NavigationTreeNode();
+    parent.appendChild(new NavigationTreeNode('a'));
+    parent.appendChild(new NavigationTreeNode('b'));
+    parent.appendChild(new NavigationTreeNode('c'));
+    var result = parent.map((child, index) => {
+      return child.getValue();
+    });
+
+    expect(result).toEqual(['a', 'b', 'c']);
+  });
+
+  it('should traverse some children', () => {
+    var parent = new NavigationTreeNode();
+    parent.appendChild(new NavigationTreeNode('a'));
+    parent.appendChild(new NavigationTreeNode('b'));
+    parent.appendChild(new NavigationTreeNode('c'));
+
+    var result = [];
+    var value = parent.some((child, index) => {
+      if (index > 1) {
+        return true;
+      } else {
+        result[index] = child.getValue();
+      }
+    });
+
+    expect(value).toEqual(true);
+    expect(result).toEqual(['a', 'b']);
+  });
+});

+/**
+ * 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.
+ *
+ */
+
+/**
+ * Cannot "use strict" because we must use eval in this file.
+ */
+/* eslint-disable global-strict */
+
+var keyOf = require('fbjs/lib/keyOf');
+
+var X_DIM = keyOf({x: null});
+var Y_DIM = keyOf({y: null});
+var Z_DIM = keyOf({z: null});
+var W_DIM = keyOf({w: null});
+
+var TRANSFORM_ROTATE_NAME = keyOf({transformRotateRadians: null});
+
+var ShouldAllocateReusableOperationVars = {
+  transformRotateRadians: true,
+  transformScale: true,
+  transformTranslate: true,
+};
+
+var InitialOperationField = {
+  transformRotateRadians: [0, 0, 0, 1],
+  transformTranslate: [0, 0, 0],
+  transformScale: [1, 1, 1],
+};
+
+
+/**
+ * Creates a highly specialized animation function that may be evaluated every
+ * frame. For example:
+ *
+ *    var ToTheLeft = {
+ *      opacity: {
+ *        from: 1,
+ *        to: 0.7,
+ *        min: 0,
+ *        max: 1,
+ *        type: 'linear',
+ *        extrapolate: false,
+ *        round: 100,
+ *      },
+ *      left: {
+ *        from: 0,
+ *        to: -SCREEN_WIDTH * 0.3,
+ *        min: 0,
+ *        max: 1,
+ *        type: 'linear',
+ *        extrapolate: true,
+ *        round: PixelRatio.get(),
+ *      },
+ *    };
+ *
+ *    var toTheLeft = buildStyleInterpolator(ToTheLeft);
+ *
+ *  Would returns a specialized function of the form:
+ *
+ *    function(result, value) {
+ *      var didChange = false;
+ *      var nextScalarVal;
+ *      var ratio;
+ *      ratio = (value - 0) / 1;
+ *      ratio = ratio > 1 ? 1 : (ratio < 0 ? 0 : ratio);
+ *      nextScalarVal = Math.round(100 * (1 * (1 - ratio) + 0.7 * ratio)) / 100;
+ *      if (!didChange) {
+ *        var prevVal = result.opacity;
+ *        result.opacity = nextScalarVal;
+ *        didChange = didChange  || (nextScalarVal !== prevVal);
+ *      } else {
+ *        result.opacity = nextScalarVal;
+ *      }
+ *      ratio = (value - 0) / 1;
+ *      nextScalarVal = Math.round(2 * (0 * (1 - ratio) + -30 * ratio)) / 2;
+ *      if (!didChange) {
+ *        var prevVal = result.left;
+ *        result.left = nextScalarVal;
+ *        didChange = didChange  || (nextScalarVal !== prevVal);
+ *      } else {
+ *        result.left = nextScalarVal;
+ *      }
+ *      return didChange;
+ *    }
+ */
+
+var ARGUMENT_NAMES_RE = /([^\s,]+)/g;
+/**
+ * This is obviously a huge hack. Proper tooling would allow actual inlining.
+ * This only works in a few limited cases (where there is no function return
+ * value, and the function operates mutatively on parameters).
+ *
+ * Example:
+ *
+ *
+ *   var inlineMe(a, b) {
+ *      a = b + b;
+ *  };
+ *
+ *  inline(inlineMe, ['hi', 'bye']);  // "hi = bye + bye;"
+ *
+ * @param {string} fnStr Source of any simple function who's arguments can be
+ * replaced via a regex.
+ * @param {array<string>} replaceWithArgs Corresponding names of variables
+ * within an environment, to replace `func` args with.
+ * @return {string} Resulting function body string.
+ */
+var inline = function(fnStr, replaceWithArgs) {
+  var parameterNames = fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')'))
+    .match(ARGUMENT_NAMES_RE) ||
+    [];
+  var replaceRegexStr = parameterNames.map(function(paramName) {
+    return '\\b' + paramName + '\\b';
+  }).join('|');
+  var replaceRegex = new RegExp(replaceRegexStr, 'g');
+  var fnBody = fnStr.substring(fnStr.indexOf('{') + 1, fnStr.lastIndexOf('}'));
+  var newFnBody = fnBody.replace(replaceRegex, function(parameterName) {
+    var indexInParameterNames = parameterNames.indexOf(parameterName);
+    var replacementName = replaceWithArgs[indexInParameterNames];
+    return replacementName;
+  });
+  return newFnBody.split('\n');
+};
+
+/**
+ * Simply a convenient way to inline functions using the inline function.
+ */
+var MatrixOps = {
+  unroll: `function(matVar, m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11, m12, m13, m14, m15) {
+    m0 = matVar[0];
+    m1 = matVar[1];
+    m2 = matVar[2];
+    m3 = matVar[3];
+    m4 = matVar[4];
+    m5 = matVar[5];
+    m6 = matVar[6];
+    m7 = matVar[7];
+    m8 = matVar[8];
+    m9 = matVar[9];
+    m10 = matVar[10];
+    m11 = matVar[11];
+    m12 = matVar[12];
+    m13 = matVar[13];
+    m14 = matVar[14];
+    m15 = matVar[15];
+  }`,
+
+  matrixDiffers: `function(retVar, matVar, m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11, m12, m13, m14, m15) {
+    retVar = retVar ||
+    m0 !== matVar[0] ||
+    m1 !== matVar[1] ||
+    m2 !== matVar[2] ||
+    m3 !== matVar[3] ||
+    m4 !== matVar[4] ||
+    m5 !== matVar[5] ||
+    m6 !== matVar[6] ||
+    m7 !== matVar[7] ||
+    m8 !== matVar[8] ||
+    m9 !== matVar[9] ||
+    m10 !== matVar[10] ||
+    m11 !== matVar[11] ||
+    m12 !== matVar[12] ||
+    m13 !== matVar[13] ||
+    m14 !== matVar[14] ||
+    m15 !== matVar[15];
+  }`,
+
+  transformScale: `function(matVar, opVar) {
+    // Scaling matVar by opVar
+    var x = opVar[0];
+    var y = opVar[1];
+    var z = opVar[2];
+    matVar[0] = matVar[0] * x;
+    matVar[1] = matVar[1] * x;
+    matVar[2] = matVar[2] * x;
+    matVar[3] = matVar[3] * x;
+    matVar[4] = matVar[4] * y;
+    matVar[5] = matVar[5] * y;
+    matVar[6] = matVar[6] * y;
+    matVar[7] = matVar[7] * y;
+    matVar[8] = matVar[8] * z;
+    matVar[9] = matVar[9] * z;
+    matVar[10] = matVar[10] * z;
+    matVar[11] = matVar[11] * z;
+    matVar[12] = matVar[12];
+    matVar[13] = matVar[13];
+    matVar[14] = matVar[14];
+    matVar[15] = matVar[15];
+  }`,
+
+  /**
+   * All of these matrix transforms are not general purpose utilities, and are
+   * only suitable for being inlined for the use of building up interpolators.
+   */
+  transformTranslate: `function(matVar, opVar) {
+    // Translating matVar by opVar
+    var x = opVar[0];
+    var y = opVar[1];
+    var z = opVar[2];
+    matVar[12] = matVar[0] * x + matVar[4] * y + matVar[8] * z + matVar[12];
+    matVar[13] = matVar[1] * x + matVar[5] * y + matVar[9] * z + matVar[13];
+    matVar[14] = matVar[2] * x + matVar[6] * y + matVar[10] * z + matVar[14];
+    matVar[15] = matVar[3] * x + matVar[7] * y + matVar[11] * z + matVar[15];
+  }`,
+
+  /**
+   * @param {array} matVar Both the input, and the output matrix.
+   * @param {quaternion specification} q Four element array describing rotation.
+   */
+  transformRotateRadians: `function(matVar, q) {
+    // Rotating matVar by q
+    var xQuat = q[0], yQuat = q[1], zQuat = q[2], wQuat = q[3];
+    var x2Quat = xQuat + xQuat;
+    var y2Quat = yQuat + yQuat;
+    var z2Quat = zQuat + zQuat;
+    var xxQuat = xQuat * x2Quat;
+    var xyQuat = xQuat * y2Quat;
+    var xzQuat = xQuat * z2Quat;
+    var yyQuat = yQuat * y2Quat;
+    var yzQuat = yQuat * z2Quat;
+    var zzQuat = zQuat * z2Quat;
+    var wxQuat = wQuat * x2Quat;
+    var wyQuat = wQuat * y2Quat;
+    var wzQuat = wQuat * z2Quat;
+    // Step 1: Inlines the construction of a quaternion matrix ('quatMat')
+    var quatMat0 = 1 - (yyQuat + zzQuat);
+    var quatMat1 = xyQuat + wzQuat;
+    var quatMat2 = xzQuat - wyQuat;
+    var quatMat4 = xyQuat - wzQuat;
+    var quatMat5 = 1 - (xxQuat + zzQuat);
+    var quatMat6 = yzQuat + wxQuat;
+    var quatMat8 = xzQuat + wyQuat;
+    var quatMat9 = yzQuat - wxQuat;
+    var quatMat10 = 1 - (xxQuat + yyQuat);
+    // quatMat3/7/11/12/13/14 = 0, quatMat15 = 1
+
+    // Step 2: Inlines multiplication, takes advantage of constant quatMat cells
+    var a00 = matVar[0];
+    var a01 = matVar[1];
+    var a02 = matVar[2];
+    var a03 = matVar[3];
+    var a10 = matVar[4];
+    var a11 = matVar[5];
+    var a12 = matVar[6];
+    var a13 = matVar[7];
+    var a20 = matVar[8];
+    var a21 = matVar[9];
+    var a22 = matVar[10];
+    var a23 = matVar[11];
+
+    var b0  = quatMat0, b1 = quatMat1, b2 = quatMat2;
+    matVar[0] = b0 * a00 + b1 * a10 + b2 * a20;
+    matVar[1] = b0 * a01 + b1 * a11 + b2 * a21;
+    matVar[2] = b0 * a02 + b1 * a12 + b2 * a22;
+    matVar[3] = b0 * a03 + b1 * a13 + b2 * a23;
+    b0 = quatMat4; b1 = quatMat5; b2 = quatMat6;
+    matVar[4] = b0 * a00 + b1 * a10 + b2 * a20;
+    matVar[5] = b0 * a01 + b1 * a11 + b2 * a21;
+    matVar[6] = b0 * a02 + b1 * a12 + b2 * a22;
+    matVar[7] = b0 * a03 + b1 * a13 + b2 * a23;
+    b0 = quatMat8; b1 = quatMat9; b2 = quatMat10;
+    matVar[8] = b0 * a00 + b1 * a10 + b2 * a20;
+    matVar[9] = b0 * a01 + b1 * a11 + b2 * a21;
+    matVar[10] = b0 * a02 + b1 * a12 + b2 * a22;
+    matVar[11] = b0 * a03 + b1 * a13 + b2 * a23;
+  }`
+};
+
+// Optimized version of general operation applications that can be used when
+// the target matrix is known to be the identity matrix.
+var MatrixOpsInitial = {
+  transformScale: `function(matVar, opVar) {
+    // Scaling matVar known to be identity by opVar
+    matVar[0] = opVar[0];
+    matVar[1] = 0;
+    matVar[2] = 0;
+    matVar[3] = 0;
+    matVar[4] = 0;
+    matVar[5] = opVar[1];
+    matVar[6] = 0;
+    matVar[7] = 0;
+    matVar[8] = 0;
+    matVar[9] = 0;
+    matVar[10] = opVar[2];
+    matVar[11] = 0;
+    matVar[12] = 0;
+    matVar[13] = 0;
+    matVar[14] = 0;
+    matVar[15] = 1;
+  }`,
+
+  transformTranslate: `function(matVar, opVar) {
+    // Translating matVar known to be identity by opVar;
+    matVar[0] = 1;
+    matVar[1] = 0;
+    matVar[2] = 0;
+    matVar[3] = 0;
+    matVar[4] = 0;
+    matVar[5] = 1;
+    matVar[6] = 0;
+    matVar[7] = 0;
+    matVar[8] = 0;
+    matVar[9] = 0;
+    matVar[10] = 1;
+    matVar[11] = 0;
+    matVar[12] = opVar[0];
+    matVar[13] = opVar[1];
+    matVar[14] = opVar[2];
+    matVar[15] = 1;
+  }`,
+
+  /**
+   * @param {array} matVar Both the input, and the output matrix - assumed to be
+   * identity.
+   * @param {quaternion specification} q Four element array describing rotation.
+   */
+  transformRotateRadians: `function(matVar, q) {
+
+    // Rotating matVar which is known to be identity by q
+    var xQuat = q[0], yQuat = q[1], zQuat = q[2], wQuat = q[3];
+    var x2Quat = xQuat + xQuat;
+    var y2Quat = yQuat + yQuat;
+    var z2Quat = zQuat + zQuat;
+    var xxQuat = xQuat * x2Quat;
+    var xyQuat = xQuat * y2Quat;
+    var xzQuat = xQuat * z2Quat;
+    var yyQuat = yQuat * y2Quat;
+    var yzQuat = yQuat * z2Quat;
+    var zzQuat = zQuat * z2Quat;
+    var wxQuat = wQuat * x2Quat;
+    var wyQuat = wQuat * y2Quat;
+    var wzQuat = wQuat * z2Quat;
+    // Step 1: Inlines the construction of a quaternion matrix ('quatMat')
+    var quatMat0 = 1 - (yyQuat + zzQuat);
+    var quatMat1 = xyQuat + wzQuat;
+    var quatMat2 = xzQuat - wyQuat;
+    var quatMat4 = xyQuat - wzQuat;
+    var quatMat5 = 1 - (xxQuat + zzQuat);
+    var quatMat6 = yzQuat + wxQuat;
+    var quatMat8 = xzQuat + wyQuat;
+    var quatMat9 = yzQuat - wxQuat;
+    var quatMat10 = 1 - (xxQuat + yyQuat);
+    // quatMat3/7/11/12/13/14 = 0, quatMat15 = 1
+
+    // Step 2: Inlines the multiplication with identity matrix.
+    var b0  = quatMat0, b1 = quatMat1, b2 = quatMat2;
+    matVar[0] = b0;
+    matVar[1] = b1;
+    matVar[2] = b2;
+    matVar[3] = 0;
+    b0 = quatMat4; b1 = quatMat5; b2 = quatMat6;
+    matVar[4] = b0;
+    matVar[5] = b1;
+    matVar[6] = b2;
+    matVar[7] = 0;
+    b0 = quatMat8; b1 = quatMat9; b2 = quatMat10;
+    matVar[8] = b0;
+    matVar[9] = b1;
+    matVar[10] = b2;
+    matVar[11] = 0;
+    matVar[12] = 0;
+    matVar[13] = 0;
+    matVar[14] = 0;
+    matVar[15] = 1;
+  }`
+};
+
+
+var setNextValAndDetectChange = function(name, tmpVarName) {
+  return (
+    '  if (!didChange) {\n' +
+    '    var prevVal = result.' + name + ';\n' +
+    '    result.' + name + ' = ' + tmpVarName + ';\n' +
+    '    didChange = didChange  || (' + tmpVarName + ' !== prevVal);\n' +
+    '  } else {\n' +
+    '    result.' + name + ' = ' + tmpVarName + ';\n' +
+    '  }\n'
+  );
+};
+
+var computeNextValLinear = function(anim, from, to, tmpVarName) {
+  var hasRoundRatio = 'round' in anim;
+  var roundRatio = anim.round;
+  var fn = '  ratio = (value - ' + anim.min + ') / ' + (anim.max - anim.min) + ';\n';
+  if (!anim.extrapolate) {
+    fn += '  ratio = ratio > 1 ? 1 : (ratio < 0 ? 0 : ratio);\n';
+  }
+
+  var roundOpen = (hasRoundRatio ? 'Math.round(' + roundRatio + ' * ' : '' );
+  var roundClose = (hasRoundRatio ? ') / ' + roundRatio : '' );
+  fn +=
+    '  ' + tmpVarName + ' = ' +
+       roundOpen +
+       '(' + from + ' * (1 - ratio) + ' + to + ' * ratio)' +
+       roundClose + ';\n';
+  return fn;
+};
+
+var computeNextValLinearScalar = function(anim) {
+  return computeNextValLinear(anim, anim.from, anim.to, 'nextScalarVal');
+};
+
+var computeNextValConstant = function(anim) {
+  var constantExpression = JSON.stringify(anim.value);
+  return '  nextScalarVal = ' + constantExpression + ';\n';
+};
+
+var computeNextValStep = function(anim) {
+  return (
+    '  nextScalarVal = value >= ' +
+         (anim.threshold + ' ? ' + anim.to + ' : ' + anim.from) + ';\n'
+  );
+};
+
+var computeNextValIdentity = function(anim) {
+  return '  nextScalarVal = value;\n';
+};
+
+var operationVar = function(name) {
+  return name + 'ReuseOp';
+};
+
+var createReusableOperationVars = function(anims) {
+  var ret = '';
+  for (var name in anims) {
+    if (ShouldAllocateReusableOperationVars[name]) {
+      ret += 'var ' + operationVar(name) + ' = [];\n';
+    }
+  }
+  return ret;
+};
+
+var newlines = function(statements) {
+  return '\n' + statements.join('\n') + '\n';
+};
+
+/**
+ * @param {Animation} anim Configuration entry.
+ * @param {key} dimension Key to examine in `from`/`to`.
+ * @param {number} index Field in operationVar to set.
+ * @return {string} Code that sets the operation variable's field.
+ */
+var computeNextMatrixOperationField = function(anim, name, dimension, index) {
+  var fieldAccess = operationVar(name) + '[' + index + ']';
+  if (anim.from[dimension] !== undefined && anim.to[dimension] !== undefined) {
+    return '  ' + anim.from[dimension] !== anim.to[dimension] ?
+        computeNextValLinear(anim, anim.from[dimension], anim.to[dimension], fieldAccess) :
+        fieldAccess + ' = ' + anim.from[dimension] + ';';
+  } else {
+    return '  ' + fieldAccess + ' = ' + InitialOperationField[name][index] + ';';
+  }
+};
+
+var unrolledVars = [];
+for (var varIndex = 0; varIndex < 16; varIndex++) {
+  unrolledVars.push('m' + varIndex);
+}
+var setNextMatrixAndDetectChange = function(orderedMatrixOperations) {
+  var fn = [
+    '  var transform = result.transform !== undefined ? ' +
+    'result.transform : (result.transform = [{ matrix: [] }]);' +
+    '  var transformMatrix = transform[0].matrix;'
+  ];
+  fn.push.apply(
+    fn,
+    inline(MatrixOps.unroll, ['transformMatrix'].concat(unrolledVars))
+  );
+  for (var i = 0; i < orderedMatrixOperations.length; i++) {
+    var opName = orderedMatrixOperations[i];
+    if (i === 0) {
+      fn.push.apply(
+        fn,
+        inline(MatrixOpsInitial[opName], ['transformMatrix', operationVar(opName)])
+      );
+    } else {
+      fn.push.apply(
+        fn,
+        inline(MatrixOps[opName], ['transformMatrix', operationVar(opName)])
+      );
+    }
+  }
+  fn.push.apply(
+    fn,
+    inline(MatrixOps.matrixDiffers, ['didChange', 'transformMatrix'].concat(unrolledVars))
+  );
+  return fn;
+};
+
+var InterpolateMatrix = {
+  transformTranslate: true,
+  transformRotateRadians: true,
+  transformScale: true,
+};
+
+var createFunctionString = function(anims) {
+  // We must track the order they appear in so transforms are applied in the
+  // correct order.
+  var orderedMatrixOperations = [];
+
+  // Wrapping function allows the final function to contain state (for
+  // caching).
+  var fn = 'return (function() {\n';
+  fn += createReusableOperationVars(anims);
+  fn += 'return function(result, value) {\n';
+  fn += '  var didChange = false;\n';
+  fn += '  var nextScalarVal;\n';
+  fn += '  var ratio;\n';
+
+  for (var name in anims) {
+    var anim = anims[name];
+    if (anim.type === 'linear') {
+      if (InterpolateMatrix[name]) {
+        orderedMatrixOperations.push(name);
+        var setOperations = [
+          computeNextMatrixOperationField(anim, name, X_DIM, 0),
+          computeNextMatrixOperationField(anim, name, Y_DIM, 1),
+          computeNextMatrixOperationField(anim, name, Z_DIM, 2)
+        ];
+        if (name === TRANSFORM_ROTATE_NAME) {
+          setOperations.push(computeNextMatrixOperationField(anim, name, W_DIM, 3));
+        }
+        fn += newlines(setOperations);
+      } else {
+        fn += computeNextValLinearScalar(anim, 'nextScalarVal');
+        fn += setNextValAndDetectChange(name, 'nextScalarVal');
+      }
+    } else if (anim.type === 'constant') {
+      fn += computeNextValConstant(anim);
+      fn += setNextValAndDetectChange(name, 'nextScalarVal');
+    } else if (anim.type === 'step') {
+      fn += computeNextValStep(anim);
+      fn += setNextValAndDetectChange(name, 'nextScalarVal');
+    } else if (anim.type === 'identity') {
+      fn += computeNextValIdentity(anim);
+      fn += setNextValAndDetectChange(name, 'nextScalarVal');
+    }
+  }
+  if (orderedMatrixOperations.length) {
+    fn += newlines(setNextMatrixAndDetectChange(orderedMatrixOperations));
+  }
+  fn += '  return didChange;\n';
+  fn += '};\n';
+  fn += '})()';
+  return fn;
+};
+
+/**
+ * @param {object} anims Animation configuration by style property name.
+ * @return {function} Function accepting style object, that mutates that style
+ * object and returns a boolean describing if any update was actually applied.
+ */
+var buildStyleInterpolator = function(anims) {
+  // Defer compiling this method until we really need it.
+  var interpolator = null;
+  function lazyStyleInterpolator(result, value) {
+    if (interpolator === null) {
+      interpolator = Function(createFunctionString(anims))();
+    }
+    return interpolator(result, value);
+  }
+  return lazyStyleInterpolator;
+};
+
+module.exports = buildStyleInterpolator;

+/**
+ * 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.
+ *
+ * @typechecks
+ */
+'use strict';
+
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ */
+function clamp(min, value, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+module.exports = clamp;

+/**
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+var invariant = require('fbjs/lib/invariant');
+
+import type { StyleObj } from 'StyleSheetTypes';
+
+function getStyle(style) {
+  if (style && typeof style === 'number') {
+    debugger;
+    invariant(false, "Error when using Navigator from react-native-custom-components. Please provide a raw object to `props.sceneStyle` instead of a StyleSheet reference.");
+  }
+  return style;
+}
+
+function flattenStyle(style: ?StyleObj): ?Object {
+  if (!style) {
+    return undefined;
+  }
+  invariant(style !== true, 'style may be false but not true');
+
+  if (!Array.isArray(style)) {
+    return getStyle(style);
+  }
+
+  var result = {};
+  for (var i = 0, styleLength = style.length; i < styleLength; ++i) {
+    var computedStyle = flattenStyle(style[i]);
+    if (computedStyle) {
+      for (var key in computedStyle) {
+        result[key] = computedStyle[key];
+      }
+    }
+  }
+  return result;
+}
+
+module.exports = flattenStyle;

+/**
+ * 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.
+ *
+ */
+
+/* eslint-disable no-bitwise */
+
+'use strict';
+
+/**
+ * Module that provides a function for creating a unique identifier.
+ * The returned value does not conform to the GUID standard, but should
+ * be globally unique in the context of the browser.
+ */
+function guid() {
+  return 'f' + (Math.random() * (1 << 30)).toString(16).replace('.', '');
+}
+
+module.exports = guid;

+/**
+ * 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.
+ *
+ */
+
+"use strict";
+
+var mergeInto = require('./mergeInto');
+
+/**
+ * Shallow merges two structures into a return value, without mutating either.
+ *
+ * @param {?object} one Optional object with properties to merge from.
+ * @param {?object} two Optional object with properties to merge from.
+ * @return {object} The shallow extension of one by two.
+ */
+var merge = function(one, two) {
+  var result = {};
+  mergeInto(result, one);
+  mergeInto(result, two);
+  return result;
+};
+
+module.exports = merge;

+/**
+ * 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.
+ *
+ * requiresPolyfills: Array.isArray
+ */
+
+"use strict";
+
+var invariant = require('fbjs/lib/invariant');
+var keyMirror = require('fbjs/lib/keyMirror');
+
+/**
+ * Maximum number of levels to traverse. Will catch circular structures.
+ * @const
+ */
+var MAX_MERGE_DEPTH = 36;
+
+/**
+ * We won't worry about edge cases like new String('x') or new Boolean(true).
+ * Functions are considered terminals, and arrays are not.
+ * @param {*} o The item/object/value to test.
+ * @return {boolean} true iff the argument is a terminal.
+ */
+var isTerminal = function(o) {
+  return typeof o !== 'object' || o === null;
+};
+
+var mergeHelpers = {
+
+  MAX_MERGE_DEPTH: MAX_MERGE_DEPTH,
+
+  isTerminal: isTerminal,
+
+  /**
+   * Converts null/undefined values into empty object.
+   *
+   * @param {?Object=} arg Argument to be normalized (nullable optional)
+   * @return {!Object}
+   */
+  normalizeMergeArg: function(arg) {
+    return arg === undefined || arg === null ? {} : arg;
+  },
+
+  /**
+   * If merging Arrays, a merge strategy *must* be supplied. If not, it is
+   * likely the caller's fault. If this function is ever called with anything
+   * but `one` and `two` being `Array`s, it is the fault of the merge utilities.
+   *
+   * @param {*} one Array to merge into.
+   * @param {*} two Array to merge from.
+   */
+  checkMergeArrayArgs: function(one, two) {
+    invariant(
+      Array.isArray(one) && Array.isArray(two),
+      'Tried to merge arrays, instead got %s and %s.',
+      one,
+      two
+    );
+  },
+
+  /**
+   * @param {*} one Object to merge into.
+   * @param {*} two Object to merge from.
+   */
+  checkMergeObjectArgs: function(one, two) {
+    mergeHelpers.checkMergeObjectArg(one);
+    mergeHelpers.checkMergeObjectArg(two);
+  },
+
+  /**
+   * @param {*} arg
+   */
+  checkMergeObjectArg: function(arg) {
+    invariant(
+      !isTerminal(arg) && !Array.isArray(arg),
+      'Tried to merge an object, instead got %s.',
+      arg
+    );
+  },
+
+  /**
+   * @param {*} arg
+   */
+  checkMergeIntoObjectArg: function(arg) {
+    invariant(
+      (!isTerminal(arg) || typeof arg === 'function') && !Array.isArray(arg),
+      'Tried to merge into an object, instead got %s.',
+      arg
+    );
+  },
+
+  /**
+   * Checks that a merge was not given a circular object or an object that had
+   * too great of depth.
+   *
+   * @param {number} Level of recursion to validate against maximum.
+   */
+  checkMergeLevel: function(level) {
+    invariant(
+      level < MAX_MERGE_DEPTH,
+      'Maximum deep merge depth exceeded. You may be attempting to merge ' +
+      'circular structures in an unsupported way.'
+    );
+  },
+
+  /**
+   * Checks that the supplied merge strategy is valid.
+   *
+   * @param {string} Array merge strategy.
+   */
+  checkArrayStrategy: function(strategy) {
+    invariant(
+      strategy === undefined || strategy in mergeHelpers.ArrayStrategies,
+      'You must provide an array strategy to deep merge functions to ' +
+      'instruct the deep merge how to resolve merging two arrays.'
+    );
+  },
+
+  /**
+   * Set of possible behaviors of merge algorithms when encountering two Arrays
+   * that must be merged together.
+   * - `clobber`: The left `Array` is ignored.
+   * - `indexByIndex`: The result is achieved by recursively deep merging at
+   *   each index. (not yet supported.)
+   */
+  ArrayStrategies: keyMirror({
+    Clobber: true,
+    IndexByIndex: true
+  })
+
+};
+
+module.exports = mergeHelpers;

+/**
+ * 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.
+ *
+ * @typechecks static-only
+ */
+
+"use strict";
+
+var mergeHelpers = require('./mergeHelpers');
+
+var checkMergeObjectArg = mergeHelpers.checkMergeObjectArg;
+var checkMergeIntoObjectArg = mergeHelpers.checkMergeIntoObjectArg;
+
+/**
+ * Shallow merges two structures by mutating the first parameter.
+ *
+ * @param {object|function} one Object to be merged into.
+ * @param {?object} two Optional object with properties to merge from.
+ */
+function mergeInto(one, two) {
+  checkMergeIntoObjectArg(one);
+  if (two != null) {
+    checkMergeObjectArg(two);
+    for (var key in two) {
+      if (!two.hasOwnProperty(key)) {
+        continue;
+      }
+      one[key] = two[key];
+    }
+  }
+}
+
+module.exports = mergeInto;