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

package/src/reanimated2/layoutReanimation/defaultAnimations/Rotate.ts

@@ -1,17 +1,20 @@
 import { ComplexAnimationBuilder } from '../animationBuilder';
 import {
-  EntryExitAnimationFunction,
-  IEntryExitAnimationBuilder,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 
 export class RotateInDownLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): RotateInDownLeft {
     return new RotateInDownLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -32,8 +35,8 @@ export class RotateInDownLeft
           opacity: 0,
           transform: [
             { rotate: '-90deg' },
-            { translateX: values.width / 2 - values.height / 2 },
-            { translateY: -(values.width / 2 - values.height / 2) },
+            { translateX: values.targetWidth / 2 - values.targetHeight / 2 },
+            { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) },
           ],
         },
         callback: callback,
@@ -44,12 +47,12 @@ export class RotateInDownLeft
 
 export class RotateInDownRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): RotateInDownRight {
     return new RotateInDownRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -70,8 +73,8 @@ export class RotateInDownRight
           opacity: 0,
           transform: [
             { rotate: '90deg' },
-            { translateX: -(values.width / 2 - values.height / 2) },
-            { translateY: -(values.width / 2 - values.height / 2) },
+            { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) },
+            { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) },
           ],
         },
         callback: callback,
@@ -82,12 +85,12 @@ export class RotateInDownRight
 
 export class RotateInUpLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): RotateInUpLeft {
     return new RotateInUpLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -108,8 +111,8 @@ export class RotateInUpLeft
           opacity: 0,
           transform: [
             { rotate: '90deg' },
-            { translateX: values.width / 2 - values.height / 2 },
-            { translateY: values.width / 2 - values.height / 2 },
+            { translateX: values.targetWidth / 2 - values.targetHeight / 2 },
+            { translateY: values.targetWidth / 2 - values.targetHeight / 2 },
           ],
         },
         callback: callback,
@@ -120,12 +123,12 @@ export class RotateInUpLeft
 
 export class RotateInUpRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): RotateInUpRight {
     return new RotateInUpRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -146,8 +149,8 @@ export class RotateInUpRight
           opacity: 0,
           transform: [
             { rotate: '-90deg' },
-            { translateX: -(values.width / 2 - values.height / 2) },
-            { translateY: values.width / 2 - values.height / 2 },
+            { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) },
+            { translateY: values.targetWidth / 2 - values.targetHeight / 2 },
           ],
         },
         callback: callback,
@@ -158,12 +161,12 @@ export class RotateInUpRight
 
 export class RotateOutDownLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): RotateOutDownLeft {
     return new RotateOutDownLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -179,13 +182,19 @@ export class RotateOutDownLeft
             {
               translateX: delayFunction(
                 delay,
-                animation(values.width / 2 - values.height / 2, config)
+                animation(
+                  values.currentWidth / 2 - values.currentHeight / 2,
+                  config
+                )
               ),
             },
             {
               translateY: delayFunction(
                 delay,
-                animation(values.width / 2 - values.height / 2, config)
+                animation(
+                  values.currentWidth / 2 - values.currentHeight / 2,
+                  config
+                )
               ),
             },
           ],
@@ -202,12 +211,12 @@ export class RotateOutDownLeft
 
 export class RotateOutDownRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): RotateOutDownRight {
     return new RotateOutDownRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -223,13 +232,19 @@ export class RotateOutDownRight
             {
               translateX: delayFunction(
                 delay,
-                animation(-(values.width / 2 - values.height / 2), config)
+                animation(
+                  -(values.currentWidth / 2 - values.currentHeight / 2),
+                  config
+                )
               ),
             },
             {
               translateY: delayFunction(
                 delay,
-                animation(values.width / 2 - values.height / 2, config)
+                animation(
+                  values.currentWidth / 2 - values.currentHeight / 2,
+                  config
+                )
               ),
             },
           ],
@@ -246,12 +261,12 @@ export class RotateOutDownRight
 
 export class RotateOutUpLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): RotateOutUpLeft {
     return new RotateOutUpLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -267,13 +282,19 @@ export class RotateOutUpLeft
             {
               translateX: delayFunction(
                 delay,
-                animation(values.width / 2 - values.height / 2, config)
+                animation(
+                  values.currentWidth / 2 - values.currentHeight / 2,
+                  config
+                )
               ),
             },
             {
               translateY: delayFunction(
                 delay,
-                animation(-(values.width / 2 - values.height / 2), config)
+                animation(
+                  -(values.currentWidth / 2 - values.currentHeight / 2),
+                  config
+                )
               ),
             },
           ],
@@ -290,12 +311,12 @@ export class RotateOutUpLeft
 
 export class RotateOutUpRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): RotateOutUpRight {
     return new RotateOutUpRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -311,13 +332,19 @@ export class RotateOutUpRight
             {
               translateX: delayFunction(
                 delay,
-                animation(-(values.width / 2 - values.height / 2), config)
+                animation(
+                  -(values.currentWidth / 2 - values.currentHeight / 2),
+                  config
+                )
               ),
             },
             {
               translateY: delayFunction(
                 delay,
-                animation(-(values.width / 2 - values.height / 2), config)
+                animation(
+                  -(values.currentWidth / 2 - values.currentHeight / 2),
+                  config
+                )
               ),
             },
           ],

package/src/reanimated2/layoutReanimation/defaultAnimations/Slide.ts

@@ -1,6 +1,9 @@
 import {
-  IEntryExitAnimationBuilder,
-  EntryExitAnimationFunction,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 import { Dimensions } from 'react-native';
 import { ComplexAnimationBuilder } from '../animationBuilder';
@@ -9,12 +12,12 @@ const { width, height } = Dimensions.get('window');
 
 export class SlideInRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): SlideInRight {
     return new SlideInRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -24,10 +27,13 @@ export class SlideInRight
       'worklet';
       return {
         animations: {
-          originX: delayFunction(delay, animation(values.originX, config)),
+          originX: delayFunction(
+            delay,
+            animation(values.targetOriginX, config)
+          ),
         },
         initialValues: {
-          originX: values.originX + width,
+          originX: values.targetOriginX + width,
         },
         callback: callback,
       };
@@ -37,12 +43,12 @@ export class SlideInRight
 
 export class SlideInLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): SlideInLeft {
     return new SlideInLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -52,10 +58,13 @@ export class SlideInLeft
       'worklet';
       return {
         animations: {
-          originX: delayFunction(delay, animation(values.originX, config)),
+          originX: delayFunction(
+            delay,
+            animation(values.targetOriginX, config)
+          ),
         },
         initialValues: {
-          originX: values.originX - width,
+          originX: values.targetOriginX - width,
         },
         callback: callback,
       };
@@ -65,12 +74,12 @@ export class SlideInLeft
 
 export class SlideOutRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): SlideOutRight {
     return new SlideOutRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -82,11 +91,11 @@ export class SlideOutRight
         animations: {
           originX: delayFunction(
             delay,
-            animation(Math.max(values.originX + width, width), config)
+            animation(Math.max(values.currentOriginX + width, width), config)
           ),
         },
         initialValues: {
-          originX: values.originX,
+          originX: values.currentOriginX,
         },
         callback: callback,
       };
@@ -96,12 +105,12 @@ export class SlideOutRight
 
 export class SlideOutLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): SlideOutLeft {
     return new SlideOutLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -113,11 +122,11 @@ export class SlideOutLeft
         animations: {
           originX: delayFunction(
             delay,
-            animation(Math.min(values.originX - width, -width), config)
+            animation(Math.min(values.currentOriginX - width, -width), config)
           ),
         },
         initialValues: {
-          originX: values.originX,
+          originX: values.currentOriginX,
         },
         callback: callback,
       };
@@ -127,12 +136,12 @@ export class SlideOutLeft
 
 export class SlideInUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): SlideInUp {
     return new SlideInUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -142,7 +151,10 @@ export class SlideInUp
       'worklet';
       return {
         animations: {
-          originY: delayFunction(delay, animation(values.originY, config)),
+          originY: delayFunction(
+            delay,
+            animation(values.targetOriginY, config)
+          ),
         },
         initialValues: {
           originY: -height,
@@ -155,12 +167,12 @@ export class SlideInUp
 
 export class SlideInDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): SlideInDown {
     return new SlideInDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -170,10 +182,13 @@ export class SlideInDown
       'worklet';
       return {
         animations: {
-          originY: delayFunction(delay, animation(values.originY, config)),
+          originY: delayFunction(
+            delay,
+            animation(values.targetOriginY, config)
+          ),
         },
         initialValues: {
-          originY: values.originY + height,
+          originY: values.targetOriginY + height,
         },
         callback: callback,
       };
@@ -183,12 +198,12 @@ export class SlideInDown
 
 export class SlideOutUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): SlideOutUp {
     return new SlideOutUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -200,10 +215,10 @@ export class SlideOutUp
         animations: {
           originY: delayFunction(
             delay,
-            animation(Math.min(values.originY - height, -height), config)
+            animation(Math.min(values.currentOriginY - height, -height), config)
           ),
         },
-        initialValues: { originY: values.originY },
+        initialValues: { originY: values.currentOriginY },
         callback: callback,
       };
     };
@@ -212,12 +227,12 @@ export class SlideOutUp
 
 export class SlideOutDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): SlideOutDown {
     return new SlideOutDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -229,10 +244,10 @@ export class SlideOutDown
         animations: {
           originY: delayFunction(
             delay,
-            animation(Math.max(values.originY + height, height), config)
+            animation(Math.max(values.currentOriginY + height, height), config)
           ),
         },
-        initialValues: { originY: values.originY },
+        initialValues: { originY: values.currentOriginY },
         callback: callback,
       };
     };

package/src/reanimated2/layoutReanimation/defaultAnimations/Zoom.ts

@@ -1,6 +1,11 @@
 import {
   IEntryExitAnimationBuilder,
   EntryExitAnimationFunction,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 import { Dimensions } from 'react-native';
 import { ComplexAnimationBuilder } from '../animationBuilder';
@@ -193,12 +198,12 @@ export class ZoomInDown
 
 export class ZoomInEasyUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): ZoomInEasyUp {
     return new ZoomInEasyUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -214,7 +219,7 @@ export class ZoomInEasyUp
           ],
         },
         initialValues: {
-          transform: [{ translateY: -values.height }, { scale: 0 }],
+          transform: [{ translateY: -values.targetHeight }, { scale: 0 }],
         },
         callback: callback,
       };
@@ -224,12 +229,12 @@ export class ZoomInEasyUp
 
 export class ZoomInEasyDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): ZoomInEasyDown {
     return new ZoomInEasyDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -245,7 +250,7 @@ export class ZoomInEasyDown
           ],
         },
         initialValues: {
-          transform: [{ translateY: values.height }, { scale: 0 }],
+          transform: [{ translateY: values.targetHeight }, { scale: 0 }],
         },
         callback: callback,
       };
@@ -439,12 +444,12 @@ export class ZoomOutDown
 
 export class ZoomOutEasyUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): ZoomOutEasyUp {
     return new ZoomOutEasyUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -458,7 +463,7 @@ export class ZoomOutEasyUp
             {
               translateY: delayFunction(
                 delay,
-                animation(-values.height, config)
+                animation(-values.currentHeight, config)
               ),
             },
             { scale: delayFunction(delay, animation(0, config)) },
@@ -475,12 +480,12 @@ export class ZoomOutEasyUp
 
 export class ZoomOutEasyDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): ZoomOutEasyDown {
     return new ZoomOutEasyDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -494,7 +499,7 @@ export class ZoomOutEasyDown
             {
               translateY: delayFunction(
                 delay,
-                animation(values.height, config)
+                animation(values.currentHeight, config)
               ),
             },
             { scale: delayFunction(delay, animation(0, config)) },

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

@@ -74,27 +74,39 @@ export class CurvedTransition
 
       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, { duration, easing: easing.easingX })
+            withTiming(values.targetOriginX, {
+              duration,
+              easing: easing.easingX,
+            })
           ),
           originY: delayFunction(
             delay,
-            withTiming(values.originY, { duration, easing: easing.easingY })
+            withTiming(values.targetOriginY, {
+              duration,
+              easing: easing.easingY,
+            })
           ),
           width: delayFunction(
             delay,
-            withTiming(values.width, { duration, easing: easing.easingWidth })
+            withTiming(values.targetWidth, {
+              duration,
+              easing: easing.easingWidth,
+            })
           ),
           height: delayFunction(
             delay,
-            withTiming(values.height, { duration, easing: easing.easingHeight })
+            withTiming(values.targetHeight, {
+              duration,
+              easing: easing.easingHeight,
+            })
           ),
         },
         callback: callback,

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

@@ -174,28 +174,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,
         },