fix: add memoization of spring nodes

Author: osdnk

jest-setup.js

@@ -97,6 +97,8 @@ jest.mock('react-native-reanimated', () => {
       timing: NOOP,
       spring: NOOP,
 
+      proc: a => a,
+
       useCode: NOOP,
     },
 

package.json

@@ -81,7 +81,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
-    "react-native-reanimated": "^1.0.0",
+    "react-native-reanimated": "^1.3.0-alpha",
     "react-native-screens": "^1.0.0 || ^1.0.0-alpha"
   },
   "jest": {

src/views/Stack/Card.tsx

@@ -85,6 +85,8 @@ const {
   onChange,
   set,
   spring,
+  // @ts-ignore
+  proc,
   sub,
   timing,
   startClock,
@@ -94,6 +96,79 @@ const {
   Value,
 } = Animated;
 
+const springHelper = proc(
+  (
+    finished: Animated.Value<number>,
+    velocity: Animated.Value<number>,
+    position: Animated.Value<number>,
+    time: Animated.Value<number>,
+    prevPosition: Animated.Value<number>,
+    toValue: Animated.Adaptable<number>,
+    damping: Animated.Adaptable<number>,
+    mass: Animated.Adaptable<number>,
+    stiffness: Animated.Adaptable<number>,
+    overshootClamping: Animated.Adaptable<number>,
+    restSpeedThreshold: Animated.Adaptable<number>,
+    restDisplacementThreshold: Animated.Adaptable<number>,
+    clock: Animated.Clock
+  ) =>
+    spring(
+      clock,
+      {
+        finished,
+        velocity,
+        position,
+        time,
+        // @ts-ignore
+        prevPosition,
+      },
+      {
+        toValue,
+        damping,
+        mass,
+        stiffness,
+        overshootClamping,
+        restDisplacementThreshold,
+        restSpeedThreshold,
+      }
+    )
+);
+
+function memoizedSpring(
+  clock: Animated.Clock,
+  state: {
+    finished: Animated.Value<number>;
+    velocity: Animated.Value<number>;
+    position: Animated.Value<number>;
+    time: Animated.Value<number>;
+  },
+  config: {
+    toValue: Animated.Adaptable<number>;
+    damping: Animated.Adaptable<number>;
+    mass: Animated.Adaptable<number>;
+    stiffness: Animated.Adaptable<number>;
+    overshootClamping: Animated.Adaptable<boolean>;
+    restSpeedThreshold: Animated.Adaptable<number>;
+    restDisplacementThreshold: Animated.Adaptable<number>;
+  }
+) {
+  return springHelper(
+    state.finished,
+    state.velocity,
+    state.position,
+    state.time,
+    new Value(0),
+    config.toValue,
+    config.damping,
+    config.mass,
+    config.stiffness,
+    config.overshootClamping,
+    config.restSpeedThreshold,
+    config.restDisplacementThreshold,
+    clock
+  );
+}
+
 export default class Card extends React.Component<Props> {
   static defaultProps = {
     overlayEnabled: Platform.OS !== 'ios',
@@ -203,7 +278,7 @@ export default class Card extends React.Component<Props> {
       cond(
         eq(isVisible, 1),
         openingSpec.timing === 'spring'
-          ? spring(
+          ? memoizedSpring(
               this.clock,
               { ...this.transitionState, velocity: this.transitionVelocity },
               { ...openingSpec.config, toValue: this.toValue }
@@ -214,7 +289,7 @@ export default class Card extends React.Component<Props> {
               { ...openingSpec.config, toValue: this.toValue }
             ),
         closingSpec.timing === 'spring'
-          ? spring(
+          ? memoizedSpring(
               this.clock,
               { ...this.transitionState, velocity: this.transitionVelocity },
               { ...closingSpec.config, toValue: this.toValue }