Release 2.0.2

This really is not ideal but it's an upstream bug on react-native Android
that we can't work around. Users may experience other unexpected behavior as a
result of this upstream bug.

examples/NavigationPlayground/yarn.lock

@@ -5737,9 +5737,9 @@ react-native@^0.54.0:
     xmldoc "^0.4.0"
     yargs "^9.0.0"
 
-react-navigation-deprecated-tab-navigator@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.1.0.tgz#58945c1c4c7c21b54954e814e8721e98423df75d"
+react-navigation-deprecated-tab-navigator@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.2.0.tgz#e0d969c196dcd3a4a440770a7bd97fa058eb4aaf"
   dependencies:
     react-native-tab-view "^0.0.74"
 
@@ -5758,6 +5758,16 @@ react-navigation-material-bottom-tabs@0.1.3:
     react-native-paper "=1.4.0"
     react-navigation-tabs "0.2.0-rc.0"
 
+react-navigation-tabs@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.2.0.tgz#d25be64e01a728c893a93cfeee6b176ab74d67de"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^1.0.2"
+    react-native-safe-area-view "^0.7.0"
+    react-native-tab-view "~0.0.77"
+
 react-navigation-tabs@0.2.0-rc.0:
   version "0.2.0-rc.0"
   resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.2.0-rc.0.tgz#671e8c9914b915796879329752f7240147494038"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {

src/__tests__/addNavigationHelpers-test.js

@@ -1,144 +0,0 @@
-import NavigationActions from '../NavigationActions';
-import addNavigationHelpers from '../addNavigationHelpers';
-
-const dummyEventSubscriber = (name: string, handler: (*) => void) => ({
-  remove: () => {},
-});
-
-describe('addNavigationHelpers', () => {
-  it('handles dismiss action', () => {
-    const mockedDispatch = jest
-      .fn(() => false)
-      .mockImplementationOnce(() => true);
-    const child = { key: 'A', routeName: 'Home' };
-    expect(
-      addNavigationHelpers({
-        state: child,
-        dispatch: mockedDispatch,
-        addListener: dummyEventSubscriber,
-        dangerouslyGetParent: () => ({
-          state: {
-            key: 'P',
-            routeName: 'Parent',
-            routes: [child],
-          },
-        }),
-      }).dismiss()
-    ).toEqual(true);
-    expect(mockedDispatch).toBeCalledWith({
-      type: NavigationActions.BACK,
-      key: 'P',
-    });
-    expect(mockedDispatch.mock.calls.length).toBe(1);
-  });
-
-  it('handles Back action', () => {
-    const mockedDispatch = jest
-      .fn(() => false)
-      .mockImplementationOnce(() => true);
-    expect(
-      addNavigationHelpers({
-        state: { key: 'A', routeName: 'Home' },
-        dispatch: mockedDispatch,
-        addListener: dummyEventSubscriber,
-      }).goBack('A')
-    ).toEqual(true);
-    expect(mockedDispatch).toBeCalledWith({
-      type: NavigationActions.BACK,
-      key: 'A',
-    });
-    expect(mockedDispatch.mock.calls.length).toBe(1);
-  });
-
-  it('handles Back action when the key is not defined', () => {
-    const mockedDispatch = jest
-      .fn(() => false)
-      .mockImplementationOnce(() => true);
-    expect(
-      addNavigationHelpers({
-        state: { routeName: 'Home' },
-        dispatch: mockedDispatch,
-        addListener: dummyEventSubscriber,
-      }).goBack()
-    ).toEqual(true);
-    expect(mockedDispatch).toBeCalledWith({ type: NavigationActions.BACK });
-    expect(mockedDispatch.mock.calls.length).toBe(1);
-  });
-
-  it('handles Navigate action', () => {
-    const mockedDispatch = jest
-      .fn(() => false)
-      .mockImplementationOnce(() => true);
-    expect(
-      addNavigationHelpers({
-        state: { routeName: 'Home' },
-        dispatch: mockedDispatch,
-        addListener: dummyEventSubscriber,
-      }).navigate('Profile', { name: 'Matt' })
-    ).toEqual(true);
-    expect(mockedDispatch).toBeCalledWith({
-      type: NavigationActions.NAVIGATE,
-      params: { name: 'Matt' },
-      routeName: 'Profile',
-    });
-    expect(mockedDispatch.mock.calls.length).toBe(1);
-  });
-
-  it('handles SetParams action', () => {
-    const mockedDispatch = jest
-      .fn(() => false)
-      .mockImplementationOnce(() => true);
-    expect(
-      addNavigationHelpers({
-        state: { key: 'B', routeName: 'Settings' },
-        dispatch: mockedDispatch,
-        addListener: dummyEventSubscriber,
-      }).setParams({ notificationsEnabled: 'yes' })
-    ).toEqual(true);
-    expect(mockedDispatch).toBeCalledWith({
-      type: NavigationActions.SET_PARAMS,
-      key: 'B',
-      params: { notificationsEnabled: 'yes' },
-    });
-    expect(mockedDispatch.mock.calls.length).toBe(1);
-  });
-
-  it('handles GetParams action', () => {
-    const mockedDispatch = jest
-      .fn(() => false)
-      .mockImplementationOnce(() => true);
-    expect(
-      addNavigationHelpers({
-        state: { key: 'B', routeName: 'Settings', params: { name: 'Peter' } },
-        dispatch: mockedDispatch,
-        addListener: dummyEventSubscriber,
-      }).getParam('name', 'Brent')
-    ).toEqual('Peter');
-  });
-
-  it('handles GetParams action with default param', () => {
-    const mockedDispatch = jest
-      .fn(() => false)
-      .mockImplementationOnce(() => true);
-    expect(
-      addNavigationHelpers({
-        state: { key: 'B', routeName: 'Settings' },
-        dispatch: mockedDispatch,
-        addListener: dummyEventSubscriber,
-      }).getParam('name', 'Brent')
-    ).toEqual('Brent');
-  });
-
-  it('handles GetParams action with param value as null', () => {
-    const mockedDispatch = jest
-      .fn(() => false)
-      .mockImplementationOnce(() => true);
-    expect(
-      addNavigationHelpers({
-        state: { key: 'B', routeName: 'Settings', params: { name: null } },
-        dispatch: mockedDispatch,
-        addListener: dummyEventSubscriber,
-      }).getParam('name')
-    ).toEqual(null);
-  });
-});

src/addNavigationHelpers.js

@@ -1,105 +0,0 @@
-/* Helpers for navigation */
-
-import NavigationActions from './NavigationActions';
-import invariant from './utils/invariant';
-export default function(navigation) {
-  return {
-    ...navigation,
-    // Go back from the given key, default to active key
-    goBack: key => {
-      let actualizedKey = key;
-      if (key === undefined && navigation.state.key) {
-        invariant(
-          typeof navigation.state.key === 'string',
-          'key should be a string'
-        );
-        actualizedKey = navigation.state.key;
-      }
-      return navigation.dispatch(
-        NavigationActions.back({ key: actualizedKey })
-      );
-    },
-    // Go back from the parent key. If this is a nested stack, the entire
-    // stack will be dismissed.
-    dismiss: () => {
-      let parent = navigation.dangerouslyGetParent();
-      if (parent && parent.state) {
-        return navigation.dispatch(
-          NavigationActions.back({ key: parent.state.key })
-        );
-      } else {
-        return false;
-      }
-    },
-    navigate: (navigateTo, params, action) => {
-      if (typeof navigateTo === 'string') {
-        return navigation.dispatch(
-          NavigationActions.navigate({ routeName: navigateTo, params, action })
-        );
-      }
-      invariant(
-        typeof navigateTo === 'object',
-        'Must navigateTo an object or a string'
-      );
-      invariant(
-        params == null,
-        'Params must not be provided to .navigate() when specifying an object'
-      );
-      invariant(
-        action == null,
-        'Child action must not be provided to .navigate() when specifying an object'
-      );
-      return navigation.dispatch(NavigationActions.navigate(navigateTo));
-    },
-    pop: (n, params) =>
-      navigation.dispatch(
-        NavigationActions.pop({ n, immediate: params && params.immediate })
-      ),
-    popToTop: params =>
-      navigation.dispatch(
-        NavigationActions.popToTop({ immediate: params && params.immediate })
-      ),
-    /**
-     * For updating current route params. For example the nav bar title and
-     * buttons are based on the route params.
-     * This means `setParams` can be used to update nav bar for example.
-     */
-    setParams: params => {
-      invariant(
-        navigation.state.key && typeof navigation.state.key === 'string',
-        'setParams cannot be called by root navigator'
-      );
-      const key = navigation.state.key;
-      return navigation.dispatch(NavigationActions.setParams({ params, key }));
-    },
-
-    getParam: (paramName, defaultValue) => {
-      const params = navigation.state.params;
-
-      if (params && paramName in params) {
-        return params[paramName];
-      }
-
-      return defaultValue;
-    },
-
-    push: (routeName, params, action) =>
-      navigation.dispatch(
-        NavigationActions.push({ routeName, params, action })
-      ),
-
-    replace: (routeName, params, action) =>
-      navigation.dispatch(
-        NavigationActions.replace({
-          routeName,
-          params,
-          action,
-          key: navigation.state.key,
-        })
-      ),
-
-    openDrawer: () => navigation.dispatch(NavigationActions.openDrawer()),
-    closeDrawer: () => navigation.dispatch(NavigationActions.closeDrawer()),
-    toggleDrawer: () => navigation.dispatch(NavigationActions.toggleDrawer()),
-  };
-}

src/createNavigationContainer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Linking, AsyncStorage } from 'react-native';
+import { AsyncStorage, Linking, Platform } from 'react-native';
 import { polyfill } from 'react-lifecycles-compat';
 
 import { BackHandler } from './PlatformHelpers';
@@ -185,9 +185,9 @@ export default function createNavigationContainer(Component) {
     }
 
     componentDidUpdate() {
-      // Clear cached _nav every tick
-      if (this._nav === this.state.nav) {
-        this._nav = null;
+      // Clear cached _navState every tick
+      if (this._navState === this.state.nav) {
+        this._navState = null;
       }
     }
 
@@ -199,11 +199,15 @@ export default function createNavigationContainer(Component) {
 
       if (__DEV__ && !this.props.detached) {
         if (_statefulContainerCount > 0) {
-          console.error(
-            `You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator. Full details at: ${docsUrl(
-              'common-mistakes.html#explicitly-rendering-more-than-one-navigator'
-            )}`
-          );
+          // Temporarily only show this on iOS due to this issue:
+          // https://github.com/react-navigation/react-navigation/issues/4196#issuecomment-390827829
+          if (Platform.OS === 'ios') {
+            console.warn(
+              `You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator. Full details at: ${docsUrl(
+                'common-mistakes.html#explicitly-rendering-more-than-one-navigator'
+              )}`
+            );
+          }
         }
       }
       _statefulContainerCount++;
@@ -308,32 +312,47 @@ export default function createNavigationContainer(Component) {
       if (this.props.navigation) {
         return this.props.navigation.dispatch(action);
       }
-      this._nav = this._nav || this.state.nav;
-      const oldNav = this._nav;
-      invariant(oldNav, 'should be set in constructor if stateful');
-      const nav = Component.router.getStateForAction(action, oldNav);
+
+      // navState will have the most up-to-date value, because setState sometimes behaves asyncronously
+      this._navState = this._navState || this.state.nav;
+      const lastNavState = this._navState;
+      invariant(lastNavState, 'should be set in constructor if stateful');
+      const reducedState = Component.router.getStateForAction(
+        action,
+        lastNavState
+      );
+      const navState = reducedState === null ? lastNavState : reducedState;
+
       const dispatchActionEvents = () => {
         this._actionEventSubscribers.forEach(subscriber =>
           subscriber({
             type: 'action',
             action,
-            state: nav,
-            lastState: oldNav,
+            state: navState,
+            lastState: lastNavState,
           })
         );
       };
-      if (nav && nav !== oldNav) {
+
+      if (reducedState === null) {
+        // The router will return null when action has been handled and the state hasn't changed.
+        // dispatch returns true when something has been handled.
+        dispatchActionEvents();
+        return true;
+      }
+
+      if (navState !== lastNavState) {
         // Cache updates to state.nav during the tick to ensure that subsequent calls will not discard this change
-        this._nav = nav;
-        this.setState({ nav }, () => {
-          this._onNavigationStateChange(oldNav, nav, action);
+        this._navState = navState;
+        this.setState({ nav: navState }, () => {
+          this._onNavigationStateChange(lastNavState, navState, action);
           dispatchActionEvents();
-          this._persistNavigationState(nav);
+          this._persistNavigationState(navState);
         });
         return true;
-      } else {
-        dispatchActionEvents();
       }
+
+      dispatchActionEvents();
       return false;
     };
 

src/routers/__tests__/createConfigGetter-test.js

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import createConfigGetter from '../createConfigGetter';
-import addNavigationHelpers from '../../addNavigationHelpers';
 
 const dummyEventSubscriber = (name: string, handler: (*) => void) => ({
   remove: () => {},
@@ -67,81 +66,81 @@ test('should get config for screen', () => {
 
   expect(
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[0],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     ).title
   ).toEqual('Welcome anonymous');
   expect(
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[1],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     ).title
   ).toEqual('Welcome jane');
   expect(
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[0],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     ).gesturesEnabled
   ).toEqual(true);
   expect(
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[2],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     ).title
   ).toEqual('Settings!!!');
   expect(
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[2],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     ).gesturesEnabled
   ).toEqual(false);
   expect(
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[3],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     ).title
   ).toEqual('10 new notifications');
   expect(
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[3],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     ).gesturesEnabled
   ).toEqual(true);
   expect(
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[4],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     ).gesturesEnabled
   ).toEqual(false);
@@ -164,11 +163,11 @@ test('should throw if the route does not exist', () => {
 
   expect(() =>
     getScreenOptions(
-      addNavigationHelpers({
+      {
         state: routes[0],
         dispatch: () => false,
         addListener: dummyEventSubscriber,
-      }),
+      },
       {}
     )
   ).toThrowError(

src/views/StackView/StackViewLayout.js

@@ -209,6 +209,186 @@ class StackViewLayout extends React.Component {
     }
   }
 
+  _panResponder = PanResponder.create({
+    onPanResponderTerminate: () => {
+      this._isResponding = false;
+      this._reset(index, 0);
+      this.props.onGestureCanceled && this.props.onGestureCanceled();
+    },
+    onPanResponderGrant: () => {
+      const {
+        transitionProps: { navigation, position, scene },
+      } = this.props;
+      const { index } = navigation.state;
+
+      if (index !== scene.index) {
+        return false;
+      }
+
+      position.stopAnimation((value: number) => {
+        this._isResponding = true;
+        this._gestureStartValue = value;
+      });
+      this.props.onGestureBegin && this.props.onGestureBegin();
+    },
+    onMoveShouldSetPanResponder: (event, gesture) => {
+      const {
+        transitionProps: { navigation, position, layout, scene, scenes },
+        mode,
+      } = this.props;
+      const { index } = navigation.state;
+      const isVertical = mode === 'modal';
+      const { options } = scene.descriptor;
+      const gestureDirection = options.gestureDirection;
+
+      const gestureDirectionInverted =
+        typeof gestureDirection === 'string'
+          ? gestureDirection === 'inverted'
+          : I18nManager.isRTL;
+
+      if (index !== scene.index) {
+        return false;
+      }
+
+      const immediateIndex =
+        this._immediateIndex == null ? index : this._immediateIndex;
+      const currentDragDistance = gesture[isVertical ? 'dy' : 'dx'];
+      const currentDragPosition =
+        event.nativeEvent[isVertical ? 'pageY' : 'pageX'];
+      const axisLength = isVertical
+        ? layout.height.__getValue()
+        : layout.width.__getValue();
+      const axisHasBeenMeasured = !!axisLength;
+
+      // Measure the distance from the touch to the edge of the screen
+      const screenEdgeDistance = gestureDirectionInverted
+        ? axisLength - (currentDragPosition - currentDragDistance)
+        : currentDragPosition - currentDragDistance;
+      // Compare to the gesture distance relavant to card or modal
+
+      const {
+        gestureResponseDistance: userGestureResponseDistance = {},
+      } = options;
+      const gestureResponseDistance = isVertical
+        ? userGestureResponseDistance.vertical ||
+          GESTURE_RESPONSE_DISTANCE_VERTICAL
+        : userGestureResponseDistance.horizontal ||
+          GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
+      // GESTURE_RESPONSE_DISTANCE is about 25 or 30. Or 135 for modals
+      if (screenEdgeDistance > gestureResponseDistance) {
+        // Reject touches that started in the middle of the screen
+        return false;
+      }
+
+      const hasDraggedEnough =
+        Math.abs(currentDragDistance) > RESPOND_THRESHOLD;
+
+      const isOnFirstCard = immediateIndex === 0;
+      const shouldSetResponder =
+        hasDraggedEnough && axisHasBeenMeasured && !isOnFirstCard;
+      return shouldSetResponder;
+    },
+    onPanResponderMove: (event, gesture) => {
+      const {
+        transitionProps: { navigation, position, layout, scene },
+        mode,
+      } = this.props;
+      const { index } = navigation.state;
+      const isVertical = mode === 'modal';
+      const { options } = scene.descriptor;
+      const gestureDirection = options.gestureDirection;
+
+      const gestureDirectionInverted =
+        typeof gestureDirection === 'string'
+          ? gestureDirection === 'inverted'
+          : I18nManager.isRTL;
+
+      // Handle the moving touches for our granted responder
+      const startValue = this._gestureStartValue;
+      const axis = isVertical ? 'dy' : 'dx';
+      const axisDistance = isVertical
+        ? layout.height.__getValue()
+        : layout.width.__getValue();
+      const currentValue =
+        axis === 'dx' && gestureDirectionInverted
+          ? startValue + gesture[axis] / axisDistance
+          : startValue - gesture[axis] / axisDistance;
+      const value = clamp(index - 1, currentValue, index);
+      position.setValue(value);
+    },
+    onPanResponderTerminationRequest: () =>
+      // Returning false will prevent other views from becoming responder while
+      // the navigation view is the responder (mid-gesture)
+      false,
+    onPanResponderRelease: (event, gesture) => {
+      const {
+        transitionProps: { navigation, position, layout, scene },
+        mode,
+      } = this.props;
+      const { index } = navigation.state;
+      const isVertical = mode === 'modal';
+      const { options } = scene.descriptor;
+      const gestureDirection = options.gestureDirection;
+
+      const gestureDirectionInverted =
+        typeof gestureDirection === 'string'
+          ? gestureDirection === 'inverted'
+          : I18nManager.isRTL;
+
+      if (!this._isResponding) {
+        return;
+      }
+      this._isResponding = false;
+
+      const immediateIndex =
+        this._immediateIndex == null ? index : this._immediateIndex;
+
+      // Calculate animate duration according to gesture speed and moved distance
+      const axisDistance = isVertical
+        ? layout.height.__getValue()
+        : layout.width.__getValue();
+      const movementDirection = gestureDirectionInverted ? -1 : 1;
+      const movedDistance =
+        movementDirection * gesture[isVertical ? 'dy' : 'dx'];
+      const gestureVelocity =
+        movementDirection * gesture[isVertical ? 'vy' : 'vx'];
+      const defaultVelocity = axisDistance / ANIMATION_DURATION;
+      const velocity = Math.max(Math.abs(gestureVelocity), defaultVelocity);
+      const resetDuration = gestureDirectionInverted
+        ? (axisDistance - movedDistance) / velocity
+        : movedDistance / velocity;
+      const goBackDuration = gestureDirectionInverted
+        ? movedDistance / velocity
+        : (axisDistance - movedDistance) / velocity;
+
+      // To asyncronously get the current animated value, we need to run stopAnimation:
+      position.stopAnimation(value => {
+        // If the speed of the gesture release is significant, use that as the indication
+        // of intent
+        if (gestureVelocity < -0.5) {
+          this.props.onGestureCanceled && this.props.onGestureCanceled();
+          this._reset(immediateIndex, resetDuration);
+          return;
+        }
+        if (gestureVelocity > 0.5) {
+          this.props.onGestureFinish && this.props.onGestureFinish();
+          this._goBack(immediateIndex, goBackDuration);
+          return;
+        }
+
+        // Then filter based on the distance the screen was moved. Over a third of the way swiped,
+        // and the back will happen.
+        if (value <= index - POSITION_THRESHOLD) {
+          this.props.onGestureFinish && this.props.onGestureFinish();
+          this._goBack(immediateIndex, goBackDuration);
+        } else {
+          this.props.onGestureCanceled && this.props.onGestureCanceled();
+          this._reset(immediateIndex, resetDuration);
+        }
+      });
+    },
+  });
+
   render() {
     let floatingHeader = null;
     const headerMode = this._getHeaderMode();
@@ -239,140 +419,7 @@ class StackViewLayout extends React.Component {
         ? options.gesturesEnabled
         : Platform.OS === 'ios';
 
-    const responder = !gesturesEnabled
-      ? null
-      : PanResponder.create({
-          onPanResponderTerminate: () => {
-            this._isResponding = false;
-            this._reset(index, 0);
-            this.props.onGestureCanceled && this.props.onGestureCanceled();
-          },
-          onPanResponderGrant: () => {
-            position.stopAnimation((value: number) => {
-              this._isResponding = true;
-              this._gestureStartValue = value;
-            });
-            this.props.onGestureBegin && this.props.onGestureBegin();
-          },
-          onMoveShouldSetPanResponder: (event, gesture) => {
-            if (index !== scene.index) {
-              return false;
-            }
-            const immediateIndex =
-              this._immediateIndex == null ? index : this._immediateIndex;
-            const currentDragDistance = gesture[isVertical ? 'dy' : 'dx'];
-            const currentDragPosition =
-              event.nativeEvent[isVertical ? 'pageY' : 'pageX'];
-            const axisLength = isVertical
-              ? layout.height.__getValue()
-              : layout.width.__getValue();
-            const axisHasBeenMeasured = !!axisLength;
-
-            // Measure the distance from the touch to the edge of the screen
-            const screenEdgeDistance = gestureDirectionInverted
-              ? axisLength - (currentDragPosition - currentDragDistance)
-              : currentDragPosition - currentDragDistance;
-            // Compare to the gesture distance relavant to card or modal
-
-            const { options } = scene.descriptor;
-
-            const {
-              gestureResponseDistance: userGestureResponseDistance = {},
-            } = options;
-            const gestureResponseDistance = isVertical
-              ? userGestureResponseDistance.vertical ||
-                GESTURE_RESPONSE_DISTANCE_VERTICAL
-              : userGestureResponseDistance.horizontal ||
-                GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
-            // GESTURE_RESPONSE_DISTANCE is about 25 or 30. Or 135 for modals
-            if (screenEdgeDistance > gestureResponseDistance) {
-              // Reject touches that started in the middle of the screen
-              return false;
-            }
-
-            const hasDraggedEnough =
-              Math.abs(currentDragDistance) > RESPOND_THRESHOLD;
-
-            const isOnFirstCard = immediateIndex === 0;
-            const shouldSetResponder =
-              hasDraggedEnough && axisHasBeenMeasured && !isOnFirstCard;
-            return shouldSetResponder;
-          },
-          onPanResponderMove: (event, gesture) => {
-            // Handle the moving touches for our granted responder
-            const startValue = this._gestureStartValue;
-            const axis = isVertical ? 'dy' : 'dx';
-            const axisDistance = isVertical
-              ? layout.height.__getValue()
-              : layout.width.__getValue();
-            const currentValue =
-              axis === 'dx' && gestureDirectionInverted
-                ? startValue + gesture[axis] / axisDistance
-                : startValue - gesture[axis] / axisDistance;
-            const value = clamp(index - 1, currentValue, index);
-            position.setValue(value);
-          },
-          onPanResponderTerminationRequest: () =>
-            // Returning false will prevent other views from becoming responder while
-            // the navigation view is the responder (mid-gesture)
-            false,
-          onPanResponderRelease: (event, gesture) => {
-            if (!this._isResponding) {
-              return;
-            }
-            this._isResponding = false;
-
-            const immediateIndex =
-              this._immediateIndex == null ? index : this._immediateIndex;
-
-            // Calculate animate duration according to gesture speed and moved distance
-            const axisDistance = isVertical
-              ? layout.height.__getValue()
-              : layout.width.__getValue();
-            const movementDirection = gestureDirectionInverted ? -1 : 1;
-            const movedDistance =
-              movementDirection * gesture[isVertical ? 'dy' : 'dx'];
-            const gestureVelocity =
-              movementDirection * gesture[isVertical ? 'vy' : 'vx'];
-            const defaultVelocity = axisDistance / ANIMATION_DURATION;
-            const velocity = Math.max(
-              Math.abs(gestureVelocity),
-              defaultVelocity
-            );
-            const resetDuration = gestureDirectionInverted
-              ? (axisDistance - movedDistance) / velocity
-              : movedDistance / velocity;
-            const goBackDuration = gestureDirectionInverted
-              ? movedDistance / velocity
-              : (axisDistance - movedDistance) / velocity;
-
-            // To asyncronously get the current animated value, we need to run stopAnimation:
-            position.stopAnimation(value => {
-              // If the speed of the gesture release is significant, use that as the indication
-              // of intent
-              if (gestureVelocity < -0.5) {
-                this.props.onGestureCanceled && this.props.onGestureCanceled();
-                this._reset(immediateIndex, resetDuration);
-                return;
-              }
-              if (gestureVelocity > 0.5) {
-                this.props.onGestureFinish && this.props.onGestureFinish();
-                this._goBack(immediateIndex, goBackDuration);
-                return;
-              }
-
-              // Then filter based on the distance the screen was moved. Over a third of the way swiped,
-              // and the back will happen.
-              if (value <= index - POSITION_THRESHOLD) {
-                this.props.onGestureFinish && this.props.onGestureFinish();
-                this._goBack(immediateIndex, goBackDuration);
-              } else {
-                this.props.onGestureCanceled && this.props.onGestureCanceled();
-                this._reset(immediateIndex, resetDuration);
-              }
-            });
-          },
-        });
+    const responder = !gesturesEnabled ? null : this._panResponder;
 
     const handlers = gesturesEnabled ? responder.panHandlers : {};
     const containerStyle = [