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

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

@@ -3,10 +3,15 @@ import {
   EntryExitAnimationFunction,
 } from '../animationBuilder/commonTypes';
 
-export const DefaultLayout: LayoutAnimationFunction = (_) => {
+export const DefaultLayout: LayoutAnimationFunction = (values) => {
   'worklet';
   return {
-    initialValues: {},
+    initialValues: {
+      originX: values.originX,
+      originY: values.originY,
+      width: values.width,
+      height: values.height,
+    },
     animations: {},
   };
 };

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

@@ -1,21 +1,21 @@
 import {
   IEntryExitAnimationBuilder,
-  EntryExitAnimationBuild,
+  EntryExitAnimationFunction,
 } from '../animationBuilder/commonTypes';
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
+import { ComplexAnimationBuilder } from '../animationBuilder';
 
 export class FadeIn
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeIn {
     return new FadeIn();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return (_) => {
       'worklet';
@@ -33,17 +33,17 @@ export class FadeIn
 }
 
 export class FadeInRight
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeInRight {
     return new FadeInRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return () => {
       'worklet';
@@ -65,17 +65,17 @@ export class FadeInRight
 }
 
 export class FadeInLeft
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeInLeft {
     return new FadeInLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return () => {
       'worklet';
@@ -97,17 +97,17 @@ export class FadeInLeft
 }
 
 export class FadeInUp
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeInUp {
     return new FadeInUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return () => {
       'worklet';
@@ -129,17 +129,17 @@ export class FadeInUp
 }
 
 export class FadeInDown
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeInDown {
     return new FadeInDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return () => {
       'worklet';
@@ -161,17 +161,17 @@ export class FadeInDown
 }
 
 export class FadeOut
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeOut {
     return new FadeOut();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return (_) => {
       'worklet';
@@ -189,17 +189,17 @@ export class FadeOut
 }
 
 export class FadeOutRight
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeOutRight {
     return new FadeOutRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return () => {
       'worklet';
@@ -221,17 +221,17 @@ export class FadeOutRight
 }
 
 export class FadeOutLeft
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeOutLeft {
     return new FadeOutLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return () => {
       'worklet';
@@ -253,17 +253,17 @@ export class FadeOutLeft
 }
 
 export class FadeOutUp
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeOutUp {
     return new FadeOutUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return () => {
       'worklet';
@@ -285,17 +285,17 @@ export class FadeOutUp
 }
 
 export class FadeOutDown
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FadeOutDown {
     return new FadeOutDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
-    const delay = this.delayV;
+    const delay = this.getDelay();
 
     return () => {
       'worklet';

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

@@ -1,20 +1,20 @@
 import {
   IEntryExitAnimationBuilder,
-  EntryExitAnimationBuild,
+  EntryExitAnimationFunction,
 } from '../animationBuilder/commonTypes';
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
+import { ComplexAnimationBuilder } from '../animationBuilder';
 
 export class FlipInXUp
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipInXUp {
     return new FlipInXUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (targetValues) => {
@@ -41,16 +41,16 @@ export class FlipInXUp
 }
 
 export class FlipInYLeft
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipInYLeft {
     return new FlipInYLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (targetValues) => {
@@ -77,16 +77,16 @@ export class FlipInYLeft
 }
 
 export class FlipInXDown
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipInXDown {
     return new FlipInXDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (targetValues) => {
@@ -113,16 +113,16 @@ export class FlipInXDown
 }
 
 export class FlipInYRight
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipInYRight {
     return new FlipInYRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (targetValues) => {
@@ -149,16 +149,16 @@ export class FlipInYRight
 }
 
 export class FlipInEasyX
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipInEasyX {
     return new FlipInEasyX();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -180,16 +180,16 @@ export class FlipInEasyX
 }
 
 export class FlipInEasyY
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipInEasyY {
     return new FlipInEasyY();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -211,16 +211,16 @@ export class FlipInEasyY
 }
 
 export class FlipOutXUp
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipOutXUp {
     return new FlipOutXUp();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (targetValues) => {
@@ -252,16 +252,16 @@ export class FlipOutXUp
 }
 
 export class FlipOutYLeft
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipOutYLeft {
     return new FlipOutYLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (targetValues) => {
@@ -293,16 +293,16 @@ export class FlipOutYLeft
 }
 
 export class FlipOutXDown
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipOutXDown {
     return new FlipOutXDown();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (targetValues) => {
@@ -334,16 +334,16 @@ export class FlipOutXDown
 }
 
 export class FlipOutYRight
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipOutYRight {
     return new FlipOutYRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (targetValues) => {
@@ -375,16 +375,16 @@ export class FlipOutYRight
 }
 
 export class FlipOutEasyX
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipOutEasyX {
     return new FlipOutEasyX();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -406,16 +406,16 @@ export class FlipOutEasyX
 }
 
 export class FlipOutEasyY
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): FlipOutEasyY {
     return new FlipOutEasyY();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {

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

@@ -1,44 +1,46 @@
 import { Dimensions } from 'react-native';
 import { withSequence, withTiming } from '../../animation';
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
+import { ComplexAnimationBuilder } from '../animationBuilder';
 import {
-  EntryExitAnimationBuild,
+  EntryExitAnimationFunction,
   IEntryExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 
 const { width } = Dimensions.get('window');
 
 export class LightSpeedInRight
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): LightSpeedInRight {
     return new LightSpeedInRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
     const callback = this.callbackV;
 
     return () => {
       'worklet';
       return {
         animations: {
-          opacity: delayFunction(
-            delay,
-            withTiming(1, { duration: duration * 1.5 })
-          ),
+          opacity: delayFunction(delay, withTiming(1, { duration: duration })),
           transform: [
-            { translateX: delayFunction(delay, animation(0, config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(0, { ...config, duration: duration * 0.7 })
+              ),
+            },
             {
               skewX: delayFunction(
                 delay,
                 withSequence(
-                  withTiming('10deg', { duration: duration }),
-                  withTiming('-5deg', { duration: duration / 5 }),
-                  withTiming('0deg', { duration: duration / 5 })
+                  withTiming('10deg', { duration: duration * 0.7 }),
+                  withTiming('-5deg', { duration: duration * 0.15 }),
+                  withTiming('0deg', { duration: duration * 0.15 })
                 )
               ),
             },
@@ -55,38 +57,38 @@ export class LightSpeedInRight
 }
 
 export class LightSpeedInLeft
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): LightSpeedInLeft {
     return new LightSpeedInLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
-    const duration = this.durationV ? this.durationV : 250;
+    const delay = this.getDelay();
+    const duration = this.getDuration();
     const callback = this.callbackV;
 
     return () => {
       'worklet';
       return {
         animations: {
-          opacity: delayFunction(
-            delay,
-            withTiming(1, { duration: duration * 1.5 })
-          ),
+          opacity: delayFunction(delay, withTiming(1, { duration: duration })),
           transform: [
             {
-              translateX: delayFunction(delay, animation(0, config)),
+              translateX: delayFunction(
+                delay,
+                animation(0, { ...config, duration: duration * 0.7 })
+              ),
             },
             {
               skewX: delayFunction(
                 delay,
                 withSequence(
-                  withTiming('-10deg', { duration: duration }),
-                  withTiming('5deg', { duration: duration / 5 }),
-                  withTiming('0deg', { duration: duration / 5 })
+                  withTiming('-10deg', { duration: duration * 0.7 }),
+                  withTiming('5deg', { duration: duration * 0.15 }),
+                  withTiming('0deg', { duration: duration * 0.15 })
                 )
               ),
             },
@@ -103,16 +105,16 @@ export class LightSpeedInLeft
 }
 
 export class LightSpeedOutRight
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): LightSpeedOutRight {
     return new LightSpeedOutRight();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {
@@ -140,16 +142,16 @@ export class LightSpeedOutRight
 }
 
 export class LightSpeedOutLeft
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): LightSpeedOutLeft {
     return new LightSpeedOutLeft();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return () => {

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

@@ -1,20 +1,20 @@
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
+import { ComplexAnimationBuilder } from '../animationBuilder';
 import {
-  EntryExitAnimationBuild,
+  EntryExitAnimationFunction,
   IEntryExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 
 export class PinwheelIn
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): PinwheelIn {
     return new PinwheelIn();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (_values) => {
@@ -49,16 +49,16 @@ export class PinwheelIn
 }
 
 export class PinwheelOut
-  extends BaseAnimationBuilder
+  extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder {
   static createInstance(): PinwheelOut {
     return new PinwheelOut();
   }
 
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
-    const delay = this.delayV;
+    const delay = this.getDelay();
     const callback = this.callbackV;
 
     return (_values) => {