Tweak iOS animation easing, gesture tweaks

packages/react-navigation/src/views/CardStack.js

@@ -72,24 +72,24 @@ type Props = {
  * The actual duration should be always less then that because the rest distance 
  * is always less then the full distance of the layout.
  */
-const ANIMATION_DURATION = 250;
+const ANIMATION_DURATION = 500;
 
 /**
  * The gesture distance threshold to trigger the back behavior. For instance,
- * `1 / 3` means that moving greater than 1 / 3 of the width of the screen will
+ * `1/2` means that moving greater than 1/2 of the width of the screen will
  * trigger a back action
  */
-const POSITION_THRESHOLD = 1 / 3;
+const POSITION_THRESHOLD = 1 / 2;
 
 /**
  * The threshold (in pixels) to start the gesture action.
  */
-const RESPOND_THRESHOLD = 12;
+const RESPOND_THRESHOLD = 20;
 
 /**
  * The distance of touch start from the edge of the screen where the gesture will be recognized
  */
-const GESTURE_RESPONSE_DISTANCE_HORIZONTAL = 35;
+const GESTURE_RESPONSE_DISTANCE_HORIZONTAL = 25;
 const GESTURE_RESPONSE_DISTANCE_VERTICAL = 135;
 
 const animatedSubscribeValue = (animatedValue: Animated.Value) => {
@@ -202,7 +202,7 @@ class CardStack extends Component {
     Animated.timing(this.props.position, {
       toValue: resetToIndex,
       duration,
-      easing: Easing.inOut(Easing.ease),
+      easing: Easing.linear(),
       useNativeDriver: this.props.position.__isNative,
     }).start();
   }
@@ -218,7 +218,7 @@ class CardStack extends Component {
     Animated.timing(position, {
       toValue,
       duration,
-      easing: Easing.inOut(Easing.ease),
+      easing: Easing.linear(),
       useNativeDriver: position.__isNative,
     }).start(() => {
       this._immediateIndex = null;
@@ -276,7 +276,7 @@ class CardStack extends Component {
         const gestureResponseDistance = isVertical
           ? GESTURE_RESPONSE_DISTANCE_VERTICAL
           : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
-        // GESTURE_RESPONSE_DISTANCE is about 30 or 35. Or 135 for modals
+        // 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;
@@ -382,7 +382,7 @@ class CardStack extends Component {
   _renderInnerScene(
     SceneComponent: ReactClass<*>,
     scene: NavigationScene
-  ): React.Element<any> {
+  ): View | SceneView {
     const { navigation } = this._getScreenDetails(scene);
     const { screenProps } = this.props;
     const headerMode = this._getHeaderMode();

packages/react-navigation/src/views/TransitionConfigs.js

@@ -17,13 +17,21 @@ const DefaultTransitionSpec = ({
   timing: Animated.timing,
 }: NavigationTransitionSpec);
 
+const IOSTransitionSpec = ({
+  duration: 500,
+  easing: Easing.bezier(0.2833, 0.99, 0.31833, 0.99),
+  timing: Animated.timing,
+}: NavigationTransitionSpec);
+
 // Standard iOS navigation transition
 const SlideFromRightIOS = ({
+  transitionSpec: IOSTransitionSpec,
   screenInterpolator: CardStackStyleInterpolator.forHorizontal,
 }: TransitionConfig);
 
 // Standard iOS navigation transition for modals
 const ModalSlideFromBottomIOS = ({
+  transitionSpec: IOSTransitionSpec,
   screenInterpolator: CardStackStyleInterpolator.forVertical,
 }: TransitionConfig);