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

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,10 +151,13 @@ export class SlideInUp
       'worklet';
       return {
         animations: {
-          originY: delayFunction(delay, animation(values.originY, config)),
+          originY: delayFunction(
+            delay,
+            animation(values.targetOriginY, config)
+          ),
         },
         initialValues: {
-          originY: height,
+          originY: -height,
         },
         callback: callback,
       };
@@ -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

@@ -122,7 +122,7 @@ export class EntryExitTransition
                             transformProp as keyof TransformProperty
                           ]
                         : 0,
-                      { duration: 0 }
+                      { duration: exitingDuration }
                     ),
                     value[transformProp as keyof TransformProperty]
                   )
@@ -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: 0 })
+            withTiming(values.targetOriginX, { duration: exitingDuration })
           ),
           originY: delayFunction(
             delay + exitingDuration,
-            withTiming(values.originY, { duration: 0 })
+            withTiming(values.targetOriginY, { duration: exitingDuration })
           ),
           width: delayFunction(
             delay + exitingDuration,
-            withTiming(values.width, { duration: 0 })
+            withTiming(values.targetWidth, { duration: exitingDuration })
           ),
           height: delayFunction(
             delay + exitingDuration,
-            withTiming(values.height, { duration: 0 })
+            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/lib/Animated.js

@@ -1,25 +0,0 @@
-import { Image, ScrollView, Text, View } from 'react-native';
-import createAnimatedComponent from './createAnimatedComponent';
-import {
-  addWhitelistedNativeProps,
-  addWhitelistedUIProps,
-} from './ConfigHelper';
-import * as reanimated1 from './reanimated1';
-
-const Animated = {
-  // components
-  View: createAnimatedComponent(View),
-  Text: createAnimatedComponent(Text),
-  Image: createAnimatedComponent(Image),
-  ScrollView: createAnimatedComponent(ScrollView),
-  createAnimatedComponent,
-  // configuration
-  addWhitelistedNativeProps,
-  addWhitelistedUIProps,
-  // reanimated 1
-  ...reanimated1,
-};
-
-export * from './reanimated2';
-export * from './reanimated1';
-export default Animated;