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

package/lib/reanimated2/layoutReanimation/defaultAnimations/Stretch.js

@@ -1,11 +1,11 @@
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
-export class StretchInX extends BaseAnimationBuilder {
+import { ComplexAnimationBuilder } from '../animationBuilder';
+export class StretchInX extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -25,13 +25,13 @@ export class StretchInX extends BaseAnimationBuilder {
         return new StretchInX();
     }
 }
-export class StretchInY extends BaseAnimationBuilder {
+export class StretchInY extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -51,13 +51,13 @@ export class StretchInY extends BaseAnimationBuilder {
         return new StretchInY();
     }
 }
-export class StretchOutX extends BaseAnimationBuilder {
+export class StretchOutX extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -77,13 +77,13 @@ export class StretchOutX extends BaseAnimationBuilder {
         return new StretchOutX();
     }
 }
-export class StretchOutY extends BaseAnimationBuilder {
+export class StretchOutY extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';

package/lib/reanimated2/layoutReanimation/defaultAnimations/Zoom.js

@@ -1,13 +1,13 @@
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
 import { Dimensions } from 'react-native';
+import { ComplexAnimationBuilder } from '../animationBuilder';
 const { width, height } = Dimensions.get('window');
-export class ZoomIn extends BaseAnimationBuilder {
+export class ZoomIn extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -27,13 +27,13 @@ export class ZoomIn extends BaseAnimationBuilder {
         return new ZoomIn();
     }
 }
-export class ZoomInRotate extends BaseAnimationBuilder {
+export class ZoomInRotate extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const rotate = this.rotateV ? this.rotateV : '0.3';
             const callback = this.callbackV;
             return () => {
@@ -57,13 +57,13 @@ export class ZoomInRotate extends BaseAnimationBuilder {
         return new ZoomInRotate();
     }
 }
-export class ZoomInLeft extends BaseAnimationBuilder {
+export class ZoomInLeft extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -86,13 +86,13 @@ export class ZoomInLeft extends BaseAnimationBuilder {
         return new ZoomInLeft();
     }
 }
-export class ZoomInRight extends BaseAnimationBuilder {
+export class ZoomInRight extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -115,13 +115,13 @@ export class ZoomInRight extends BaseAnimationBuilder {
         return new ZoomInRight();
     }
 }
-export class ZoomInUp extends BaseAnimationBuilder {
+export class ZoomInUp extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -144,13 +144,13 @@ export class ZoomInUp extends BaseAnimationBuilder {
         return new ZoomInUp();
     }
 }
-export class ZoomInDown extends BaseAnimationBuilder {
+export class ZoomInDown extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -173,13 +173,13 @@ export class ZoomInDown extends BaseAnimationBuilder {
         return new ZoomInDown();
     }
 }
-export class ZoomInEasyUp extends BaseAnimationBuilder {
+export class ZoomInEasyUp extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return (values) => {
                 'worklet';
@@ -202,13 +202,13 @@ export class ZoomInEasyUp extends BaseAnimationBuilder {
         return new ZoomInEasyUp();
     }
 }
-export class ZoomInEasyDown extends BaseAnimationBuilder {
+export class ZoomInEasyDown extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return (values) => {
                 'worklet';
@@ -231,13 +231,13 @@ export class ZoomInEasyDown extends BaseAnimationBuilder {
         return new ZoomInEasyDown();
     }
 }
-export class ZoomOut extends BaseAnimationBuilder {
+export class ZoomOut extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -257,13 +257,13 @@ export class ZoomOut extends BaseAnimationBuilder {
         return new ZoomOut();
     }
 }
-export class ZoomOutRotate extends BaseAnimationBuilder {
+export class ZoomOutRotate extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const rotate = this.rotateV ? this.rotateV : '0.3';
             const callback = this.callbackV;
             return () => {
@@ -287,13 +287,13 @@ export class ZoomOutRotate extends BaseAnimationBuilder {
         return new ZoomOutRotate();
     }
 }
-export class ZoomOutLeft extends BaseAnimationBuilder {
+export class ZoomOutLeft extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -316,13 +316,13 @@ export class ZoomOutLeft extends BaseAnimationBuilder {
         return new ZoomOutLeft();
     }
 }
-export class ZoomOutRight extends BaseAnimationBuilder {
+export class ZoomOutRight extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -345,13 +345,13 @@ export class ZoomOutRight extends BaseAnimationBuilder {
         return new ZoomOutRight();
     }
 }
-export class ZoomOutUp extends BaseAnimationBuilder {
+export class ZoomOutUp extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -374,13 +374,13 @@ export class ZoomOutUp extends BaseAnimationBuilder {
         return new ZoomOutUp();
     }
 }
-export class ZoomOutDown extends BaseAnimationBuilder {
+export class ZoomOutDown extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -403,13 +403,13 @@ export class ZoomOutDown extends BaseAnimationBuilder {
         return new ZoomOutDown();
     }
 }
-export class ZoomOutEasyUp extends BaseAnimationBuilder {
+export class ZoomOutEasyUp extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return (values) => {
                 'worklet';
@@ -434,13 +434,13 @@ export class ZoomOutEasyUp extends BaseAnimationBuilder {
         return new ZoomOutEasyUp();
     }
 }
-export class ZoomOutEasyDown extends BaseAnimationBuilder {
+export class ZoomOutEasyDown extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
-            const delay = this.delayV;
+            const delay = this.getDelay();
             const callback = this.callbackV;
             return (values) => {
                 'worklet';

package/lib/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.js

@@ -0,0 +1,78 @@
+import { BaseAnimationBuilder } from '../animationBuilder';
+import { Easing } from '../../Easing';
+import { withTiming } from '../../animation';
+export class CurvedTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.easingXV = Easing.in(Easing.ease);
+        this.easingYV = Easing.out(Easing.ease);
+        this.easingWidthV = Easing.in(Easing.exp);
+        this.easingHeightV = Easing.out(Easing.exp);
+        this.build = () => {
+            var _a;
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const duration = (_a = this.durationV) !== null && _a !== void 0 ? _a : 300;
+            const easing = {
+                easingX: this.easingXV,
+                easingY: this.easingYV,
+                easingWidth: this.easingWidthV,
+                easingHeight: this.easingHeightV,
+            };
+            return (values) => {
+                'worklet';
+                return {
+                    initialValues: {
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        originX: delayFunction(delay, withTiming(values.originX, { duration, easing: easing.easingX })),
+                        originY: delayFunction(delay, withTiming(values.originY, { duration, easing: easing.easingY })),
+                        width: delayFunction(delay, withTiming(values.width, { duration, easing: easing.easingWidth })),
+                        height: delayFunction(delay, withTiming(values.height, { duration, easing: easing.easingHeight })),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new CurvedTransition();
+    }
+    static easingX(easing) {
+        const instance = this.createInstance();
+        return instance.easingX(easing);
+    }
+    easingX(easing) {
+        this.easingXV = easing;
+        return this;
+    }
+    static easingY(easing) {
+        const instance = this.createInstance();
+        return instance.easingY(easing);
+    }
+    easingY(easing) {
+        this.easingYV = easing;
+        return this;
+    }
+    static easingWidth(easing) {
+        const instance = this.createInstance();
+        return instance.easingWidth(easing);
+    }
+    easingWidth(easing) {
+        this.easingWidthV = easing;
+        return this;
+    }
+    static easingHeight(easing) {
+        const instance = this.createInstance();
+        return instance.easingHeight(easing);
+    }
+    easingHeight(easing) {
+        this.easingHeightV = easing;
+        return this;
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/EntryExitTransition.js

@@ -0,0 +1,128 @@
+import { BaseAnimationBuilder } from '../animationBuilder';
+import { withSequence, withTiming } from '../../animation';
+import { FadeIn, FadeOut } from '../defaultAnimations/Fade';
+export class EntryExitTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.enteringV = FadeIn;
+        this.exitingV = FadeOut;
+        this.build = () => {
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const enteringAnimation = this.enteringV.build();
+            const exitingAnimation = this.exitingV.build();
+            const exitingDuration = this.exitingV.getDuration();
+            return (values) => {
+                'worklet';
+                var _a, _b, _c, _d;
+                const enteringValues = enteringAnimation(values);
+                const exitingValues = exitingAnimation(values);
+                const animations = {
+                    transform: [],
+                };
+                for (const prop of Object.keys(exitingValues.animations)) {
+                    if (prop === 'transform') {
+                        (_a = exitingValues.animations[prop]) === null || _a === void 0 ? void 0 : _a.forEach((value, index) => {
+                            var _a;
+                            for (const transformProp of Object.keys(value)) {
+                                (_a = animations.transform) === null || _a === void 0 ? void 0 : _a.push({
+                                    [transformProp]: delayFunction(delay, withSequence(value[transformProp], withTiming(exitingValues.initialValues.transform
+                                        ? exitingValues.initialValues.transform[index][transformProp]
+                                        : 0, { duration: 0 }))),
+                                });
+                            }
+                        });
+                    }
+                    else {
+                        const sequence = enteringValues.animations[prop] !== undefined
+                            ? [
+                                exitingValues.animations[prop],
+                                withTiming(enteringValues.initialValues[prop], {
+                                    duration: 0,
+                                }),
+                                enteringValues.animations[prop],
+                            ]
+                            : [
+                                exitingValues.animations[prop],
+                                withTiming(Object.keys(values).includes(prop)
+                                    ? values[prop]
+                                    : exitingValues.initialValues[prop], { duration: 0 }),
+                            ];
+                        animations[prop] = delayFunction(delay, withSequence(...sequence));
+                    }
+                }
+                for (const prop of Object.keys(enteringValues.animations)) {
+                    if (prop === 'transform') {
+                        (_b = enteringValues.animations[prop]) === null || _b === void 0 ? void 0 : _b.forEach((value, index) => {
+                            var _a;
+                            for (const transformProp of Object.keys(value)) {
+                                (_a = animations.transform) === null || _a === void 0 ? void 0 : _a.push({
+                                    [transformProp]: delayFunction(delay + exitingDuration, withSequence(withTiming(enteringValues.initialValues.transform
+                                        ? enteringValues.initialValues.transform[index][transformProp]
+                                        : 0, { duration: exitingDuration }), value[transformProp])),
+                                });
+                            }
+                        });
+                    }
+                    else if (animations[prop] !== undefined) {
+                        // it was already added in the previous loop
+                        continue;
+                    }
+                    else {
+                        animations[prop] = delayFunction(delay, withSequence(withTiming(enteringValues.initialValues[prop], { duration: 0 }), enteringValues.animations[prop]));
+                    }
+                }
+                const mergedTransform = ((_c = exitingValues.initialValues.transform) !== null && _c !== void 0 ? _c : []).concat(((_d = enteringValues.animations.transform) !== null && _d !== void 0 ? _d : []).map((value) => {
+                    for (const transformProp of Object.keys(value)) {
+                        const current = value[transformProp].current;
+                        if (typeof current === 'string') {
+                            if (current.includes('deg'))
+                                return {
+                                    [transformProp]: '0deg',
+                                };
+                            else
+                                return {
+                                    [transformProp]: '0',
+                                };
+                        }
+                        else if (transformProp.includes('translate')) {
+                            return { [transformProp]: 0 };
+                        }
+                        else {
+                            return { [transformProp]: 1 };
+                        }
+                    }
+                    return value;
+                }));
+                return {
+                    initialValues: Object.assign(Object.assign({}, exitingValues.initialValues), { originX: values.boriginX, originY: values.boriginY, width: values.bwidth, height: values.bheight, transform: mergedTransform }),
+                    animations: Object.assign({ originX: delayFunction(delay + exitingDuration, withTiming(values.originX, { duration: exitingDuration })), originY: delayFunction(delay + exitingDuration, withTiming(values.originY, { duration: exitingDuration })), width: delayFunction(delay + exitingDuration, withTiming(values.width, { duration: exitingDuration })), height: delayFunction(delay + exitingDuration, withTiming(values.height, { duration: exitingDuration })) }, animations),
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new EntryExitTransition();
+    }
+    static entering(animation) {
+        const instance = this.createInstance();
+        return instance.entering(animation);
+    }
+    entering(animation) {
+        this.enteringV = animation;
+        return this;
+    }
+    static exiting(animation) {
+        const instance = this.createInstance();
+        return instance.exiting(animation);
+    }
+    exiting(animation) {
+        this.exitingV = animation;
+        return this;
+    }
+}
+export function combineTransition(exiting, entering) {
+    return EntryExitTransition.entering(entering).exiting(exiting);
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/FadingTransition.js

@@ -0,0 +1,37 @@
+import { withSequence, withTiming } from '../../animation';
+import { BaseAnimationBuilder } from '../animationBuilder';
+export class FadingTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            var _a;
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const duration = (_a = this.durationV) !== null && _a !== void 0 ? _a : 500;
+            return (values) => {
+                'worklet';
+                return {
+                    initialValues: {
+                        opacity: 1,
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        opacity: delayFunction(delay, withSequence(withTiming(0, { duration: duration }), withTiming(1, { duration: duration }))),
+                        originX: delayFunction(delay + duration, withTiming(values.originX, { duration: 50 })),
+                        originY: delayFunction(delay + duration, withTiming(values.originY, { duration: 50 })),
+                        width: delayFunction(delay + duration, withTiming(values.width, { duration: 50 })),
+                        height: delayFunction(delay + duration, withTiming(values.height, { duration: 50 })),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new FadingTransition();
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/JumpingTransition.js

@@ -0,0 +1,41 @@
+import { withSequence, withTiming } from '../../animation';
+import { Easing } from '../../Easing';
+import { BaseAnimationBuilder } from '../animationBuilder';
+export class JumpingTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            var _a;
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const duration = ((_a = this.durationV) !== null && _a !== void 0 ? _a : 300) / 2;
+            const config = { duration: duration * 2 };
+            return (values) => {
+                'worklet';
+                const d = Math.max(Math.abs(values.originX - values.boriginX), Math.abs(values.originY - values.boriginY));
+                return {
+                    initialValues: {
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        originX: delayFunction(delay, withTiming(values.originX, config)),
+                        originY: delayFunction(delay, withSequence(withTiming(Math.min(values.originY, values.boriginY) - d, {
+                            duration,
+                            easing: Easing.out(Easing.exp),
+                        }), withTiming(values.originY, Object.assign(Object.assign({}, config), { duration, easing: Easing.bounce })))),
+                        width: delayFunction(delay, withTiming(values.width, config)),
+                        height: delayFunction(delay, withTiming(values.height, config)),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new JumpingTransition();
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/LinearTransition.js

@@ -0,0 +1,34 @@
+import { ComplexAnimationBuilder } from '../animationBuilder/ComplexAnimationBuilder';
+export class LinearTransition extends ComplexAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.build = () => {
+            const delayFunction = this.getDelayFunction();
+            const [animation, config] = this.getAnimationAndConfig();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            return (values) => {
+                'worklet';
+                return {
+                    initialValues: {
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    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)),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new LinearTransition();
+    }
+}
+export const Layout = LinearTransition;