feat: swipe velocity impact as prop

src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap

@@ -42,6 +42,7 @@ Array [
             "top": 0,
           }
         }
+        swipeVelocityImpact={0.3}
         transitionSpec={
           Object {
             "close": Object {
@@ -209,6 +210,7 @@ Array [
                               "top": 0,
                             }
                           }
+                          swipeVelocityImpact={0.3}
                           transitionSpec={
                             Object {
                               "close": Object {

src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap

@@ -42,6 +42,7 @@ Array [
             "top": 0,
           }
         }
+        swipeVelocityImpact={0.3}
         transitionSpec={
           Object {
             "close": Object {
@@ -378,6 +379,7 @@ Array [
             "top": 0,
           }
         }
+        swipeVelocityImpact={0.3}
         transitionSpec={
           Object {
             "close": Object {

src/types.tsx

@@ -120,6 +120,7 @@ export type NavigationStackOptions = HeaderOptions &
     };
     onTransitionStart?: (props: TransitionCallbackProps) => void;
     onTransitionEnd?: (props: TransitionCallbackProps) => void;
+    swipeVelocityImpact?: number;
   };
 
 export type NavigationStackConfig = {

src/views/Stack/Card.tsx

@@ -53,6 +53,7 @@ type Props = ViewProps & {
     close: TransitionSpec;
   };
   styleInterpolator: CardStyleInterpolator;
+  swipeVelocityImpact: number;
   containerStyle?: StyleProp<ViewStyle>;
   contentStyle?: StyleProp<ViewStyle>;
 };
@@ -232,10 +233,16 @@ export default class Card extends React.Component<Props> {
     overlayEnabled: Platform.OS !== 'ios',
     shadowEnabled: true,
     gestureEnabled: true,
+    swipeVelocityImpact: SWIPE_VELOCITY_IMPACT,
   };
 
   componentDidUpdate(prevProps: Props) {
-    const { layout, gestureDirection, closing } = this.props;
+    const {
+      layout,
+      gestureDirection,
+      closing,
+      swipeVelocityImpact,
+    } = this.props;
     const { width, height } = layout;
 
     if (width !== prevProps.layout.width) {
@@ -246,6 +253,10 @@ export default class Card extends React.Component<Props> {
       this.layout.height.setValue(height);
     }
 
+    if (swipeVelocityImpact !== prevProps.swipeVelocityImpact) {
+      this.swipeVelocityImpact.setValue(swipeVelocityImpact);
+    }
+
     if (gestureDirection !== prevProps.gestureDirection) {
       this.direction.setValue(
         gestureDirection === 'vertical' ||
@@ -285,6 +296,9 @@ export default class Card extends React.Component<Props> {
   }
 
   private isVisible = new Value<Binary>(TRUE);
+  private swipeVelocityImpact = new Value<number>(
+    this.props.swipeVelocityImpact
+  );
   private isVisibleValue: Binary = TRUE;
   private nextIsVisible = new Value<Binary | -1>(UNSET);
   private verticalGestureDirection = new Value(
@@ -483,18 +497,19 @@ export default class Card extends React.Component<Props> {
 
   private extrapolatedPosition = add(
     this.gesture,
-    multiply(this.velocity, SWIPE_VELOCITY_IMPACT)
+    multiply(this.velocity, this.swipeVelocityImpact)
   );
 
   private exec = [
-    cond(
-      eq(this.direction, DIRECTION_HORIZONTAL),
-      set(
-        this.gesture,
+    set(
+      this.gesture,
+      cond(
+        eq(this.direction, DIRECTION_HORIZONTAL),
         multiply(
           this.gestureUntraversed,
           I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
-        )
+        ),
+        this.gestureUntraversed
       )
     ),
     set(
@@ -593,9 +608,13 @@ export default class Card extends React.Component<Props> {
                 cond(
                   this.distance,
                   divide(
-                    multiply(
-                      this.gestureUntraversed,
-                      I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+                    cond(
+                      eq(this.direction, DIRECTION_HORIZONTAL),
+                      multiply(
+                        this.gestureUntraversed,
+                        I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
+                      ),
+                      this.gestureUntraversed
                     ),
                     this.distance
                   ),

src/views/Stack/Stack.tsx

@@ -357,6 +357,7 @@ export default class Stack extends React.Component<Props, State> {
               transitionSpec = defaultTransitionPreset.transitionSpec,
               cardStyleInterpolator = defaultTransitionPreset.cardStyleInterpolator,
               headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+              swipeVelocityImpact,
             } = descriptor
               ? descriptor.options
               : ({} as NavigationStackOptions);
@@ -404,6 +405,7 @@ export default class Stack extends React.Component<Props, State> {
                   transitionSpec={transitionSpec}
                   cardStyleInterpolator={cardStyleInterpolator}
                   headerStyleInterpolator={headerStyleInterpolator}
+                  swipeVelocityImpact={swipeVelocityImpact}
                 />
               </MaybeScreen>
             );

src/views/Stack/StackItem.tsx

@@ -54,6 +54,7 @@ type Props = TransitionPreset & {
   headerTransparent?: boolean;
   floatingHeaderHeight: number;
   hasCustomHeader: boolean;
+  swipeVelocityImpact?: number;
 };
 
 export default class StackItem extends React.PureComponent<Props> {
@@ -120,6 +121,7 @@ export default class StackItem extends React.PureComponent<Props> {
       transitionSpec,
       cardStyleInterpolator,
       headerStyleInterpolator,
+      swipeVelocityImpact,
     } = this.props;
 
     return (
@@ -153,6 +155,7 @@ export default class StackItem extends React.PureComponent<Props> {
         }
         contentStyle={cardStyle}
         style={StyleSheet.absoluteFill}
+        swipeVelocityImpact={swipeVelocityImpact}
       >
         <View style={styles.container}>
           <View style={styles.scene}>