feat: export extra animation options for Pager (#747)

Sometimes I suppose a user might want to define own behavior of timing of spring and I want to make it possible with this PR

Author: osdnk

README.md

@@ -283,6 +283,22 @@ Callback which is called when the swipe gesture starts, i.e. the user touches th
 
 Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture.
 
+##### `timingConfig`
+
+Configuration object for the timing animation which occurs when tapping on tabs. Supported properties are:
+
+- `duration` (`number`)
+
+##### `springConfig`
+
+Configuration object for the spring animation which occurs after swiping. Supported properties are:
+
+- `damping` (`number`)
+- `mass` (`number`)
+- `stiffness` (`number`)
+- `restSpeedThreshold` (`number`)
+- `restDisplacementThreshold` (`number`)
+
 ##### `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.js

@@ -150,6 +150,48 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
     ) {
       this._swipeVelocityThreshold.setValue(this.props.swipeVelocityThreshold);
     }
+
+    if (prevProps.springConfig !== this.props.springConfig) {
+      const { springConfig } = this.props;
+
+      this._springConfig.damping.setValue(
+        springConfig.damping !== undefined
+          ? springConfig.damping
+          : SPRING_CONFIG.damping
+      );
+
+      this._springConfig.mass.setValue(
+        springConfig.mass !== undefined ? springConfig.mass : SPRING_CONFIG.mass
+      );
+
+      this._springConfig.stiffness.setValue(
+        springConfig.stiffness !== undefined
+          ? springConfig.stiffness
+          : SPRING_CONFIG.stiffness
+      );
+
+      this._springConfig.restSpeedThreshold.setValue(
+        springConfig.restSpeedThreshold !== undefined
+          ? springConfig.restSpeedThreshold
+          : SPRING_CONFIG.restSpeedThreshold
+      );
+
+      this._springConfig.restDisplacementThreshold.setValue(
+        springConfig.restDisplacementThreshold !== undefined
+          ? springConfig.restDisplacementThreshold
+          : SPRING_CONFIG.restDisplacementThreshold
+      );
+    }
+
+    if (prevProps.timingConfig !== this.props.timingConfig) {
+      const { timingConfig } = this.props;
+
+      this._timingConfig.duration.setValue(
+        timingConfig.duration !== undefined
+          ? timingConfig.duration
+          : TIMING_CONFIG.duration
+      );
+    }
   }
 
   // Clock used for tab transition animations
@@ -190,6 +232,43 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
   _swipeDistanceThreshold = new Value(this.props.swipeDistanceThreshold || 180);
   _swipeVelocityThreshold = new Value(this.props.swipeVelocityThreshold);
 
+  // Animation configuration
+  _springConfig = {
+    damping: new Value(
+      this.props.springConfig.damping !== undefined
+        ? this.props.springConfig.damping
+        : SPRING_CONFIG.damping
+    ),
+    mass: new Value(
+      this.props.springConfig.mass !== undefined
+        ? this.props.springConfig.mass
+        : SPRING_CONFIG.mass
+    ),
+    stiffness: new Value(
+      this.props.springConfig.stiffness !== undefined
+        ? this.props.springConfig.stiffness
+        : SPRING_CONFIG.stiffness
+    ),
+    restSpeedThreshold: new Value(
+      this.props.springConfig.restSpeedThreshold !== undefined
+        ? this.props.springConfig.restSpeedThreshold
+        : SPRING_CONFIG.restSpeedThreshold
+    ),
+    restDisplacementThreshold: new Value(
+      this.props.springConfig.restDisplacementThreshold !== undefined
+        ? this.props.springConfig.restDisplacementThreshold
+        : SPRING_CONFIG.restDisplacementThreshold
+    ),
+  };
+
+  _timingConfig = {
+    duration: new Value(
+      this.props.timingConfig.duration !== undefined
+        ? this.props.timingConfig.duration
+        : TIMING_CONFIG.duration
+    ),
+  };
+
   // The reason for using this value instead of simply passing `this._velocity`
   // into a spring animation is that we need to reverse it if we're using RTL mode.
   // Also, it's not possible to pass multiplied value there, because
@@ -310,14 +389,14 @@ export default class Pager<T: Route> extends React.Component<Props<T>> {
           spring(
             this._clock,
             { ...state, velocity: this._initialVelocityForSpring },
-            { ...SPRING_CONFIG, toValue }
+            { ...SPRING_CONFIG, ...this._springConfig, toValue }
           ),
         ],
         // Otherwise use a timing animation for faster switching
         timing(
           this._clock,
           { ...state, frameTime },
-          { ...TIMING_CONFIG, toValue }
+          { ...TIMING_CONFIG, ...this._timingConfig, toValue }
         )
       ),
       cond(state.finished, [

src/TabView.js

@@ -53,6 +53,8 @@ export default class TabView<T: Route> extends React.Component<
     swipeEnabled: true,
     lazy: false,
     removeClippedSubviews: false,
+    springConfig: {},
+    timingConfig: {},
   };
 
   state = {
@@ -94,6 +96,8 @@ export default class TabView<T: Route> extends React.Component<
       swipeEnabled,
       swipeDistanceThreshold,
       swipeVelocityThreshold,
+      timingConfig,
+      springConfig,
       tabBarPosition,
       renderTabBar,
       renderScene,
@@ -112,6 +116,8 @@ export default class TabView<T: Route> extends React.Component<
           swipeEnabled={swipeEnabled}
           swipeDistanceThreshold={swipeDistanceThreshold}
           swipeVelocityThreshold={swipeVelocityThreshold}
+          timingConfig={timingConfig}
+          springConfig={springConfig}
           onSwipeStart={onSwipeStart}
           onSwipeEnd={onSwipeEnd}
           onIndexChange={this._jumpToIndex}

src/types.js

@@ -41,4 +41,14 @@ export type PagerCommonProps = {|
   swipeVelocityThreshold?: number,
   onSwipeStart?: () => mixed,
   onSwipeEnd?: () => mixed,
+  springConfig: {|
+    damping?: number,
+    mass?: number,
+    stiffness?: number,
+    restSpeedThreshold?: number,
+    restDisplacementThreshold?: number,
+  |},
+  timingConfig: {|
+    duration?: number,
+  |},
 |};