react-native-reanimated 2.4.1 → 2.7.0

package/src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts

@@ -6,6 +6,8 @@ import {
 } from './commonTypes';
 import { EasingFn } from '../../Easing';
 import { BaseAnimationBuilder } from './BaseAnimationBuilder';
+import { StyleProps } from '../../commonTypes';
+
 export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   easingV?: EasingFn;
   rotateV?: string;
@@ -16,6 +18,7 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   overshootClampingV?: number;
   restDisplacementThresholdV?: number;
   restSpeedThresholdV?: number;
+  initialValues?: StyleProps;
 
   static createInstance: () => ComplexAnimationBuilder;
 
@@ -115,6 +118,16 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  static withInitialValues(values: StyleProps): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.withInitialValues(values);
+  }
+
+  withInitialValues(values: StyleProps): BaseAnimationBuilder {
+    this.initialValues = values;
+    return this;
+  }
+
   getAnimationAndConfig(): LayoutAnimationAndConfig {
     const duration = this.durationV;
     const easing = this.easingV;

package/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts

@@ -74,9 +74,8 @@ export class Keyframe implements IEntryExitAnimationBuilder {
       if (styleProp === 'transform') {
         initialValues[styleProp]?.forEach((transformStyle, index) => {
           Object.keys(transformStyle).forEach((transformProp: string) => {
-            parsedKeyframes[
-              index.toString() + '_transform:' + transformProp
-            ] = [];
+            parsedKeyframes[index.toString() + '_transform:' + transformProp] =
+              [];
           });
         });
       } else {

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

@@ -4,13 +4,14 @@ import {
 } from '../animationBuilder/commonTypes';
 import { withSequence, withTiming } from '../../animation';
 import { Dimensions } from 'react-native';
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
+import { ComplexAnimationBuilder } from '../animationBuilder/ComplexAnimationBuilder';
 
 const { width, height } = Dimensions.get('window');
 
 export class BounceIn
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceIn {
     return new BounceIn();
   }
@@ -28,6 +29,7 @@ export class BounceIn
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -49,6 +51,7 @@ export class BounceIn
         },
         initialValues: {
           transform: [{ scale: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -57,8 +60,9 @@ export class BounceIn
 }
 
 export class BounceInDown
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceInDown {
     return new BounceInDown();
   }
@@ -76,6 +80,7 @@ export class BounceInDown
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -101,6 +106,7 @@ export class BounceInDown
               translateY: height,
             },
           ],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -109,8 +115,9 @@ export class BounceInDown
 }
 
 export class BounceInUp
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceInUp {
     return new BounceInUp();
   }
@@ -128,6 +135,7 @@ export class BounceInUp
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -149,6 +157,7 @@ export class BounceInUp
         },
         initialValues: {
           transform: [{ translateY: -height }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -157,8 +166,9 @@ export class BounceInUp
 }
 
 export class BounceInLeft
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceInLeft {
     return new BounceInLeft();
   }
@@ -176,6 +186,7 @@ export class BounceInLeft
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -197,6 +208,7 @@ export class BounceInLeft
         },
         initialValues: {
           transform: [{ translateX: -width }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -205,8 +217,9 @@ export class BounceInLeft
 }
 
 export class BounceInRight
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceInRight {
     return new BounceInRight();
   }
@@ -224,6 +237,7 @@ export class BounceInRight
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -245,6 +259,7 @@ export class BounceInRight
         },
         initialValues: {
           transform: [{ translateX: width }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -253,8 +268,9 @@ export class BounceInRight
 }
 
 export class BounceOut
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceOut {
     return new BounceOut();
   }
@@ -272,6 +288,7 @@ export class BounceOut
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -293,6 +310,7 @@ export class BounceOut
         },
         initialValues: {
           transform: [{ scale: 1 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -301,8 +319,9 @@ export class BounceOut
 }
 
 export class BounceOutDown
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceOutDown {
     return new BounceOutDown();
   }
@@ -320,6 +339,7 @@ export class BounceOutDown
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -343,6 +363,7 @@ export class BounceOutDown
         },
         initialValues: {
           transform: [{ translateY: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -351,8 +372,9 @@ export class BounceOutDown
 }
 
 export class BounceOutUp
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceOutUp {
     return new BounceOutUp();
   }
@@ -370,6 +392,7 @@ export class BounceOutUp
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -393,6 +416,7 @@ export class BounceOutUp
         },
         initialValues: {
           transform: [{ translateY: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -401,8 +425,9 @@ export class BounceOutUp
 }
 
 export class BounceOutLeft
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceOutRight {
     return new BounceOutLeft();
   }
@@ -420,6 +445,7 @@ export class BounceOutLeft
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -443,6 +469,7 @@ export class BounceOutLeft
         },
         initialValues: {
           transform: [{ translateX: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -451,8 +478,9 @@ export class BounceOutLeft
 }
 
 export class BounceOutRight
-  extends BaseAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  extends ComplexAnimationBuilder
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): BounceOutRight {
     return new BounceOutRight();
   }
@@ -470,6 +498,7 @@ export class BounceOutRight
     const delay = this.getDelay();
     const duration = this.getDuration();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
 
     return () => {
       'worklet';
@@ -493,6 +522,7 @@ export class BounceOutRight
         },
         initialValues: {
           transform: [{ translateX: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };

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

@@ -6,7 +6,8 @@ import { ComplexAnimationBuilder } from '../animationBuilder';
 
 export class FadeIn
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeIn {
     return new FadeIn();
   }
@@ -15,6 +16,7 @@ export class FadeIn
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return (_) => {
@@ -25,6 +27,7 @@ export class FadeIn
         },
         initialValues: {
           opacity: 0,
+          ...initialValues,
         },
         callback: callback,
       };
@@ -34,7 +37,8 @@ export class FadeIn
 
 export class FadeInRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeInRight {
     return new FadeInRight();
   }
@@ -43,6 +47,7 @@ export class FadeInRight
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return () => {
@@ -57,6 +62,7 @@ export class FadeInRight
         initialValues: {
           opacity: 0,
           transform: [{ translateX: 25 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -66,7 +72,8 @@ export class FadeInRight
 
 export class FadeInLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeInLeft {
     return new FadeInLeft();
   }
@@ -75,6 +82,7 @@ export class FadeInLeft
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return () => {
@@ -89,6 +97,7 @@ export class FadeInLeft
         initialValues: {
           opacity: 0,
           transform: [{ translateX: -25 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -98,7 +107,8 @@ export class FadeInLeft
 
 export class FadeInUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeInUp {
     return new FadeInUp();
   }
@@ -107,6 +117,7 @@ export class FadeInUp
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return () => {
@@ -121,6 +132,7 @@ export class FadeInUp
         initialValues: {
           opacity: 0,
           transform: [{ translateY: -25 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -130,7 +142,8 @@ export class FadeInUp
 
 export class FadeInDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeInDown {
     return new FadeInDown();
   }
@@ -139,6 +152,7 @@ export class FadeInDown
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return () => {
@@ -153,6 +167,7 @@ export class FadeInDown
         initialValues: {
           opacity: 0,
           transform: [{ translateY: 25 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -162,7 +177,8 @@ export class FadeInDown
 
 export class FadeOut
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeOut {
     return new FadeOut();
   }
@@ -171,6 +187,7 @@ export class FadeOut
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return (_) => {
@@ -181,6 +198,7 @@ export class FadeOut
         },
         initialValues: {
           opacity: 1,
+          ...initialValues,
         },
         callback: callback,
       };
@@ -190,7 +208,8 @@ export class FadeOut
 
 export class FadeOutRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeOutRight {
     return new FadeOutRight();
   }
@@ -199,6 +218,7 @@ export class FadeOutRight
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return () => {
@@ -213,6 +233,7 @@ export class FadeOutRight
         initialValues: {
           opacity: 1,
           transform: [{ translateX: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -222,7 +243,8 @@ export class FadeOutRight
 
 export class FadeOutLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeOutLeft {
     return new FadeOutLeft();
   }
@@ -231,6 +253,7 @@ export class FadeOutLeft
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return () => {
@@ -245,6 +268,7 @@ export class FadeOutLeft
         initialValues: {
           opacity: 1,
           transform: [{ translateX: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -254,7 +278,8 @@ export class FadeOutLeft
 
 export class FadeOutUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeOutUp {
     return new FadeOutUp();
   }
@@ -263,6 +288,7 @@ export class FadeOutUp
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return () => {
@@ -277,6 +303,7 @@ export class FadeOutUp
         initialValues: {
           opacity: 1,
           transform: [{ translateY: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };
@@ -286,7 +313,8 @@ export class FadeOutUp
 
 export class FadeOutDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryExitAnimationBuilder
+{
   static createInstance(): FadeOutDown {
     return new FadeOutDown();
   }
@@ -295,6 +323,7 @@ export class FadeOutDown
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const callback = this.callbackV;
+    const initialValues = this.initialValues;
     const delay = this.getDelay();
 
     return () => {
@@ -309,6 +338,7 @@ export class FadeOutDown
         initialValues: {
           opacity: 1,
           transform: [{ translateY: 0 }],
+          ...initialValues,
         },
         callback: callback,
       };