react-native-reanimated 2.3.0-beta.3 → 2.3.2

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

@@ -1,42 +1,48 @@
 import {
   LayoutAnimationFunction,
-  EntryExitAnimationFunction,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
 } from '../animationBuilder/commonTypes';
 
 export const DefaultLayout: LayoutAnimationFunction = (values) => {
   'worklet';
   return {
     initialValues: {
-      originX: values.originX,
-      originY: values.originY,
-      width: values.width,
-      height: values.height,
+      originX: values.targetOriginX,
+      originY: values.targetOriginY,
+      width: values.targetWidth,
+      height: values.targetHeight,
     },
     animations: {},
   };
 };
 
-export const DefaultEntering: EntryExitAnimationFunction = (targetValues) => {
+export const DefaultEntering: AnimationConfigFunction<EntryAnimationsValues> = (
+  values
+) => {
   'worklet';
   return {
     initialValues: {
-      originX: targetValues.originX,
-      originY: targetValues.originY,
-      width: targetValues.width,
-      height: targetValues.height,
+      originX: values.targetOriginX,
+      originY: values.targetOriginY,
+      width: values.targetWidth,
+      height: values.targetHeight,
     },
     animations: {},
   };
 };
 
-export const DefaultExiting: EntryExitAnimationFunction = (startValues) => {
+export const DefaultExiting: AnimationConfigFunction<ExitAnimationsValues> = (
+  values
+) => {
   'worklet';
   return {
     initialValues: {
-      originX: startValues.originX,
-      originY: startValues.originY,
-      width: startValues.width,
-      height: startValues.height,
+      originX: values.currentOriginX,
+      originY: values.currentOriginY,
+      width: values.currentWidth,
+      height: values.currentHeight,
     },
     animations: {},
   };

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

@@ -1,17 +1,22 @@
 import {
   IEntryExitAnimationBuilder,
   EntryExitAnimationFunction,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 import { ComplexAnimationBuilder } from '../animationBuilder';
 
 export class FlipInXUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInXUp {
     return new FlipInXUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -24,7 +29,7 @@ export class FlipInXUp
           transform: [
             { perspective: 500 },
             { rotateX: '90deg' },
-            { translateY: -targetValues.height },
+            { translateY: -targetValues.targetHeight },
           ],
         },
         animations: {
@@ -42,12 +47,12 @@ export class FlipInXUp
 
 export class FlipInYLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInYLeft {
     return new FlipInYLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -60,7 +65,7 @@ export class FlipInYLeft
           transform: [
             { perspective: 500 },
             { rotateY: '-90deg' },
-            { translateX: -targetValues.width },
+            { translateX: -targetValues.targetWidth },
           ],
         },
         animations: {
@@ -78,12 +83,12 @@ export class FlipInYLeft
 
 export class FlipInXDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInXDown {
     return new FlipInXDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -96,7 +101,7 @@ export class FlipInXDown
           transform: [
             { perspective: 500 },
             { rotateX: '-90deg' },
-            { translateY: targetValues.height },
+            { translateY: targetValues.targetHeight },
           ],
         },
         animations: {
@@ -114,12 +119,12 @@ export class FlipInXDown
 
 export class FlipInYRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInYRight {
     return new FlipInYRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -132,7 +137,7 @@ export class FlipInYRight
           transform: [
             { perspective: 500 },
             { rotateY: '90deg' },
-            { translateX: targetValues.width },
+            { translateX: targetValues.targetWidth },
           ],
         },
         animations: {
@@ -212,12 +217,12 @@ export class FlipInEasyY
 
 export class FlipOutXUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutXUp {
     return new FlipOutXUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -240,7 +245,7 @@ export class FlipOutXUp
             {
               translateY: delayFunction(
                 delay,
-                animation(-targetValues.height, config)
+                animation(-targetValues.currentHeight, config)
               ),
             },
           ],
@@ -253,12 +258,12 @@ export class FlipOutXUp
 
 export class FlipOutYLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutYLeft {
     return new FlipOutYLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -281,7 +286,7 @@ export class FlipOutYLeft
             {
               translateX: delayFunction(
                 delay,
-                animation(-targetValues.width, config)
+                animation(-targetValues.currentWidth, config)
               ),
             },
           ],
@@ -294,12 +299,12 @@ export class FlipOutYLeft
 
 export class FlipOutXDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutXDown {
     return new FlipOutXDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -322,7 +327,7 @@ export class FlipOutXDown
             {
               translateY: delayFunction(
                 delay,
-                animation(targetValues.height, config)
+                animation(targetValues.currentHeight, config)
               ),
             },
           ],
@@ -335,12 +340,12 @@ export class FlipOutXDown
 
 export class FlipOutYRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutYRight {
     return new FlipOutYRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -363,7 +368,7 @@ export class FlipOutYRight
             {
               translateX: delayFunction(
                 delay,
-                animation(targetValues.width, config)
+                animation(targetValues.currentWidth, config)
               ),
             },
           ],

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
+                )
               ),
             },
           ],