Tweak the wipe animation to be more accurate

Author: satya164

src/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text, Button, StyleSheet, Platform } from 'react-native';
+import { View, Text, Button, StyleSheet } from 'react-native';
 import Stack, { SceneProps } from './components/Stack';
 import { Route } from './types';
 import { DefaultTransition } from './TransitionConfigs/TransitionPresets';

src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -1,7 +1,7 @@
 import Animated from 'react-native-reanimated';
 import { CardInterpolationProps, CardInterpolatedStyle } from '../types';
 
-const { cond, multiply, sub, interpolate } = Animated;
+const { cond, multiply, interpolate } = Animated;
 
 /**
  * Standard iOS-style slide in from the right.

src/TransitionConfigs/TransitionPresets.tsx

@@ -6,9 +6,8 @@ import {
 } from './CardStyleInterpolators';
 import { forUIKit, forNoAnimation } from './HeaderStyleInterpolators';
 import {
-  TransitionSpecIOS,
-  WipeInFromBottomAndroidSpec,
-  WipeOutToBottomAndroidSpec,
+  TransitionIOSSpec,
+  WipeFromBottomAndroidSpec,
   FadeOutToBottomAndroidSpec,
   FadeInFromBottomAndroidSpec,
 } from './TransitionSpecs';
@@ -22,8 +21,8 @@ export const SlideFromRightIOS: TransitionPreset = {
   direction: 'horizontal',
   headerMode: 'float',
   transitionSpec: {
-    open: TransitionSpecIOS,
-    close: TransitionSpecIOS,
+    open: TransitionIOSSpec,
+    close: TransitionIOSSpec,
   },
   cardStyleInterpolator: forHorizontalIOS,
   headerStyleInterpolator: forUIKit,
@@ -34,8 +33,8 @@ export const ModalSlideFromBottomIOS: TransitionPreset = {
   direction: 'vertical',
   headerMode: 'screen',
   transitionSpec: {
-    open: TransitionSpecIOS,
-    close: TransitionSpecIOS,
+    open: TransitionIOSSpec,
+    close: TransitionIOSSpec,
   },
   cardStyleInterpolator: forVerticalIOS,
   headerStyleInterpolator: forNoAnimation,
@@ -58,8 +57,8 @@ export const WipeFromBottomAndroid: TransitionPreset = {
   direction: 'vertical',
   headerMode: 'screen',
   transitionSpec: {
-    open: WipeInFromBottomAndroidSpec,
-    close: WipeOutToBottomAndroidSpec,
+    open: WipeFromBottomAndroidSpec,
+    close: WipeFromBottomAndroidSpec,
   },
   cardStyleInterpolator: forWipeFromBottomAndroid,
   headerStyleInterpolator: forNoAnimation,

src/TransitionConfigs/TransitionSpecs.tsx

@@ -1,7 +1,7 @@
 import { Easing } from 'react-native-reanimated';
 import { TransitionSpec } from '../types';
 
-export const TransitionSpecIOS: TransitionSpec = {
+export const TransitionIOSSpec: TransitionSpec = {
   timing: 'spring',
   config: {
     stiffness: 1000,
@@ -32,19 +32,12 @@ export const FadeOutToBottomAndroidSpec: TransitionSpec = {
 };
 
 // See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
-export const WipeInFromBottomAndroidSpec: TransitionSpec = {
+export const WipeFromBottomAndroidSpec: TransitionSpec = {
   timing: 'timing',
   config: {
     duration: 425,
-    easing: Easing.bezier(0.4, 0, 0.2, 1),
-  },
-};
-
-// See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
-export const WipeOutToBottomAndroidSpec: TransitionSpec = {
-  timing: 'timing',
-  config: {
-    duration: 425,
-    easing: Easing.bezier(0.4, 0, 0.2, 1),
+    // This is super rough approximation of the path used for the curve by android
+    // See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
+    easing: Easing.bezier(0.35, 0.45, 0, 1),
   },
 };