react-native-reanimated 2.3.0-beta.4 → 2.4.1

package/src/reanimated2/layoutReanimation/defaultTransitions/EntryExitTransition.ts

@@ -4,9 +4,13 @@ import {
   LayoutAnimationFunction,
 } from '../animationBuilder/commonTypes';
 import { BaseAnimationBuilder } from '../animationBuilder';
-import { AnimationObject, withSequence, withTiming } from '../../animation';
+import { withSequence, withTiming } from '../../animation';
 import { FadeIn, FadeOut } from '../defaultAnimations/Fade';
-import { StyleProps, TransformProperty } from '../../commonTypes';
+import {
+  StyleProps,
+  TransformProperty,
+  AnimationObject,
+} from '../../commonTypes';
 
 export class EntryExitTransition
   extends BaseAnimationBuilder
@@ -174,28 +178,28 @@ export class EntryExitTransition
       return {
         initialValues: {
           ...exitingValues.initialValues,
-          originX: values.boriginX,
-          originY: values.boriginY,
-          width: values.bwidth,
-          height: values.bheight,
+          originX: values.currentOriginX,
+          originY: values.currentOriginY,
+          width: values.currentWidth,
+          height: values.currentHeight,
           transform: mergedTransform,
         },
         animations: {
           originX: delayFunction(
             delay + exitingDuration,
-            withTiming(values.originX, { duration: exitingDuration })
+            withTiming(values.targetOriginX, { duration: exitingDuration })
           ),
           originY: delayFunction(
             delay + exitingDuration,
-            withTiming(values.originY, { duration: exitingDuration })
+            withTiming(values.targetOriginY, { duration: exitingDuration })
           ),
           width: delayFunction(
             delay + exitingDuration,
-            withTiming(values.width, { duration: exitingDuration })
+            withTiming(values.targetWidth, { duration: exitingDuration })
           ),
           height: delayFunction(
             delay + exitingDuration,
-            withTiming(values.height, { duration: exitingDuration })
+            withTiming(values.targetHeight, { duration: exitingDuration })
           ),
           ...animations,
         },

package/src/reanimated2/layoutReanimation/defaultTransitions/FadingTransition.ts

@@ -23,10 +23,10 @@ export class FadingTransition
       return {
         initialValues: {
           opacity: 1,
-          originX: values.boriginX,
-          originY: values.boriginY,
-          width: values.bwidth,
-          height: values.bheight,
+          originX: values.currentOriginX,
+          originY: values.currentOriginY,
+          width: values.currentWidth,
+          height: values.currentHeight,
         },
         animations: {
           opacity: delayFunction(
@@ -38,19 +38,19 @@ export class FadingTransition
           ),
           originX: delayFunction(
             delay + duration,
-            withTiming(values.originX, { duration: 50 })
+            withTiming(values.targetOriginX, { duration: 50 })
           ),
           originY: delayFunction(
             delay + duration,
-            withTiming(values.originY, { duration: 50 })
+            withTiming(values.targetOriginY, { duration: 50 })
           ),
           width: delayFunction(
             delay + duration,
-            withTiming(values.width, { duration: 50 })
+            withTiming(values.targetWidth, { duration: 50 })
           ),
           height: delayFunction(
             delay + duration,
-            withTiming(values.height, { duration: 50 })
+            withTiming(values.targetHeight, { duration: 50 })
           ),
         },
         callback: callback,

package/src/reanimated2/layoutReanimation/defaultTransitions/JumpingTransition.ts

@@ -22,34 +22,40 @@ export class JumpingTransition
     return (values) => {
       'worklet';
       const d = Math.max(
-        Math.abs(values.originX - values.boriginX),
-        Math.abs(values.originY - values.boriginY)
+        Math.abs(values.targetOriginX - values.currentOriginX),
+        Math.abs(values.targetOriginY - values.currentOriginY)
       );
       return {
         initialValues: {
-          originX: values.boriginX,
-          originY: values.boriginY,
-          width: values.bwidth,
-          height: values.bheight,
+          originX: values.currentOriginX,
+          originY: values.currentOriginY,
+          width: values.currentWidth,
+          height: values.currentHeight,
         },
         animations: {
-          originX: delayFunction(delay, withTiming(values.originX, config)),
+          originX: delayFunction(
+            delay,
+            withTiming(values.targetOriginX, config)
+          ),
           originY: delayFunction(
             delay,
             withSequence(
-              withTiming(Math.min(values.originY, values.boriginY) - d, {
-                duration,
-                easing: Easing.out(Easing.exp),
-              }),
-              withTiming(values.originY, {
+              withTiming(
+                Math.min(values.targetOriginY, values.currentOriginY) - d,
+                {
+                  duration,
+                  easing: Easing.out(Easing.exp),
+                }
+              ),
+              withTiming(values.targetOriginY, {
                 ...config,
                 duration,
                 easing: Easing.bounce,
               })
             )
           ),
-          width: delayFunction(delay, withTiming(values.width, config)),
-          height: delayFunction(delay, withTiming(values.height, config)),
+          width: delayFunction(delay, withTiming(values.targetWidth, config)),
+          height: delayFunction(delay, withTiming(values.targetHeight, config)),
         },
         callback: callback,
       };

package/src/reanimated2/layoutReanimation/defaultTransitions/LinearTransition.ts

@@ -21,16 +21,22 @@ export class LinearTransition
       'worklet';
       return {
         initialValues: {
-          originX: values.boriginX,
-          originY: values.boriginY,
-          width: values.bwidth,
-          height: values.bheight,
+          originX: values.currentOriginX,
+          originY: values.currentOriginY,
+          width: values.currentWidth,
+          height: values.currentHeight,
         },
         animations: {
-          originX: delayFunction(delay, animation(values.originX, config)),
-          originY: delayFunction(delay, animation(values.originY, config)),
-          width: delayFunction(delay, animation(values.width, config)),
-          height: delayFunction(delay, animation(values.height, config)),
+          originX: delayFunction(
+            delay,
+            animation(values.targetOriginX, config)
+          ),
+          originY: delayFunction(
+            delay,
+            animation(values.targetOriginY, config)
+          ),
+          width: delayFunction(delay, animation(values.targetWidth, config)),
+          height: delayFunction(delay, animation(values.targetHeight, config)),
         },
         callback: callback,
       };

package/src/reanimated2/layoutReanimation/defaultTransitions/SequencedTransition.ts

@@ -36,38 +36,50 @@ export class SequencedTransition
       'worklet';
       return {
         initialValues: {
-          originX: values.boriginX,
-          originY: values.boriginY,
-          width: values.bwidth,
-          height: values.bheight,
+          originX: values.currentOriginX,
+          originY: values.currentOriginY,
+          width: values.currentWidth,
+          height: values.currentHeight,
         },
         animations: {
           originX: delayFunction(
             delay,
             withSequence(
-              withTiming(reverse ? values.boriginX : values.originX, config),
-              withTiming(values.originX, config)
+              withTiming(
+                reverse ? values.currentOriginX : values.targetOriginX,
+                config
+              ),
+              withTiming(values.targetOriginX, config)
             )
           ),
           originY: delayFunction(
             delay,
             withSequence(
-              withTiming(reverse ? values.originY : values.boriginY, config),
-              withTiming(values.originY, config)
+              withTiming(
+                reverse ? values.targetOriginY : values.currentOriginY,
+                config
+              ),
+              withTiming(values.targetOriginY, config)
             )
           ),
           width: delayFunction(
             delay,
             withSequence(
-              withTiming(reverse ? values.bwidth : values.width, config),
-              withTiming(values.width, config)
+              withTiming(
+                reverse ? values.currentWidth : values.targetWidth,
+                config
+              ),
+              withTiming(values.targetWidth, config)
             )
           ),
           height: delayFunction(
             delay,
             withSequence(
-              withTiming(reverse ? values.height : values.bheight, config),
-              withTiming(values.height, config)
+              withTiming(
+                reverse ? values.targetHeight : values.currentHeight,
+                config
+              ),
+              withTiming(values.targetHeight, config)
             )
           ),
         },

package/src/reanimated2/utils.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { measure } from './NativeMethods';
-import { RefObjectFunction } from './hook/useAnimatedRef';
+import { RefObjectFunction } from './hook/commonTypes';
 
 export interface ComponentCoords {
   x: number;