feat: add springVelocityScale effect (#839)

Motivation
In this PR I add springVelocityScale parameter as a config of Pager. Toss defines how much velocity of gesture impacts on an initial velocity of Pager. Found it very useful in bottom sheet.


However, while writing this code I figured out interesting bug in Pager which led to fact that initial velocity of spring was always zero. It happened bc previously velocity was set only if clock was not running. However few lines above we made similar check and if clock was not running... then we were starting it, so as the result there was no chance that in current state clock was not running.
I fixed it by moving starting clock few lines below.

Test plan
You may add springVelocityScale ={4} param to ScrollableTabBarExample

Author: osdnk

README.md

@@ -341,7 +341,11 @@ Configuration object for the spring animation which occurs after swiping. Suppor
 - `restSpeedThreshold` (`number`)
 - `restDisplacementThreshold` (`number`)
 
-##### `initialLayout`
+##### `springVelocityScale`
+
+Number for determining how meaningful is gesture velocity for calculating initial velocity of spring animation. Defaults to `0`.
+
+##### `initialLayout
 
 Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. For most apps, this is a good default:
 

src/Pager.tsx

@@ -91,6 +91,8 @@ const SPRING_CONFIG = {
   restSpeedThreshold: 0.01,
 };
 
+const SPRING_VELOCITY_SCALE = 1;
+
 const TIMING_CONFIG = {
   duration: 200,
   easing: Easing.out(Easing.cubic),
@@ -99,13 +101,15 @@ const TIMING_CONFIG = {
 export default class Pager<T extends Route> extends React.Component<Props<T>> {
   static defaultProps = {
     swipeVelocityImpact: SWIPE_VELOCITY_IMPACT,
+    springVelocityScale: SPRING_VELOCITY_SCALE,
   };
 
   componentDidUpdate(prevProps: Props<T>) {
     const {
       navigationState,
       layout,
       swipeVelocityImpact,
+      springVelocityScale,
       springConfig,
       timingConfig,
     } = this.props;
@@ -138,12 +142,20 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
 
     if (prevProps.swipeVelocityImpact !== swipeVelocityImpact) {
       this.swipeVelocityImpact.setValue(
-        swipeVelocityImpact != null
+        swipeVelocityImpact !== undefined
           ? swipeVelocityImpact
           : SWIPE_VELOCITY_IMPACT
       );
     }
 
+    if (prevProps.springVelocityScale !== springVelocityScale) {
+      this.springVelocityScale.setValue(
+        springVelocityScale !== undefined
+          ? springVelocityScale
+          : SPRING_VELOCITY_SCALE
+      );
+    }
+
     if (prevProps.springConfig !== springConfig) {
       this.springConfig.damping.setValue(
         springConfig.damping !== undefined
@@ -228,7 +240,15 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
 
   // Determines how relevant is a velocity while calculating next position while swiping
   private swipeVelocityImpact = new Value(
-    this.props.swipeVelocityImpact || SWIPE_VELOCITY_IMPACT
+    this.props.swipeVelocityImpact !== undefined
+      ? this.props.swipeVelocityImpact
+      : SWIPE_VELOCITY_IMPACT
+  );
+
+  private springVelocityScale = new Value(
+    this.props.springVelocityScale !== undefined
+      ? this.props.springVelocityScale
+      : SPRING_VELOCITY_SCALE
   );
 
   // The position value represent the position of the pager on a scale of 0 - routes.length-1
@@ -381,7 +401,6 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
         set(state.time, 0),
         set(state.finished, FALSE),
         set(this.index, index),
-        startClock(this.clock),
       ]),
       cond(
         this.isSwipeGesture,
@@ -390,8 +409,14 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
           cond(
             not(clockRunning(this.clock)),
             I18nManager.isRTL
-              ? set(this.initialVelocityForSpring, multiply(-1, this.velocityX))
-              : set(this.initialVelocityForSpring, this.velocityX)
+              ? set(
+                  this.initialVelocityForSpring,
+                  multiply(-1, this.velocityX, this.springVelocityScale)
+                )
+              : set(
+                  this.initialVelocityForSpring,
+                  multiply(this.velocityX, this.springVelocityScale)
+                )
           ),
           spring(
             this.clock,
@@ -406,6 +431,7 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
           { ...TIMING_CONFIG, ...this.timingConfig, toValue }
         )
       ),
+      cond(not(clockRunning(this.clock)), startClock(this.clock)),
       cond(state.finished, [
         // Reset values
         set(this.isSwipeGesture, FALSE),

src/TabView.tsx

@@ -117,6 +117,7 @@ export default class TabView<T extends Route> extends React.Component<
       sceneContainerStyle,
       style,
       gestureHandlerProps,
+      springVelocityScale,
     } = this.props;
     const { layout } = this.state;
 
@@ -133,6 +134,7 @@ export default class TabView<T extends Route> extends React.Component<
           onSwipeStart={onSwipeStart}
           onSwipeEnd={onSwipeEnd}
           onIndexChange={this.jumpToIndex}
+          springVelocityScale={springVelocityScale}
           removeClippedSubviews={removeClippedSubviews}
           gestureHandlerProps={gestureHandlerProps}
         >

src/types.tsx

@@ -42,6 +42,7 @@ export type PagerCommonProps = {
   swipeVelocityImpact?: number;
   onSwipeStart?: () => void;
   onSwipeEnd?: () => void;
+  springVelocityScale?: number;
   springConfig: {
     damping?: number;
     mass?: number;