react-native-reanimated 3.0.0-rc.9 → 3.0.0

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

@@ -3,11 +3,8 @@ import {
   IEntryExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 import { withSequence, withTiming } from '../../animation';
-import { Dimensions } from 'react-native';
 import { ComplexAnimationBuilder } from '../animationBuilder/ComplexAnimationBuilder';
 
-const { width, height } = Dimensions.get('window');
-
 export class BounceIn
   extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder
@@ -82,7 +79,7 @@ export class BounceInDown
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -103,7 +100,7 @@ export class BounceInDown
         initialValues: {
           transform: [
             {
-              translateY: height,
+              translateY: values.windowHeight,
             },
           ],
           ...initialValues,
@@ -137,7 +134,7 @@ export class BounceInUp
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -156,7 +153,7 @@ export class BounceInUp
           ],
         },
         initialValues: {
-          transform: [{ translateY: -height }],
+          transform: [{ translateY: -values.windowHeight }],
           ...initialValues,
         },
         callback: callback,
@@ -188,7 +185,7 @@ export class BounceInLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -207,7 +204,7 @@ export class BounceInLeft
           ],
         },
         initialValues: {
-          transform: [{ translateX: -width }],
+          transform: [{ translateX: -values.windowWidth }],
           ...initialValues,
         },
         callback: callback,
@@ -239,7 +236,7 @@ export class BounceInRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -258,7 +255,7 @@ export class BounceInRight
           ],
         },
         initialValues: {
-          transform: [{ translateX: width }],
+          transform: [{ translateX: values.windowWidth }],
           ...initialValues,
         },
         callback: callback,
@@ -341,7 +338,7 @@ export class BounceOutDown
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -353,7 +350,7 @@ export class BounceOutDown
                   withTiming(-10, { duration: duration * 0.15 }),
                   withTiming(10, { duration: duration * 0.15 }),
                   withTiming(-20, { duration: duration * 0.15 }),
-                  withTiming(height, {
+                  withTiming(values.windowHeight, {
                     duration: duration * 0.55,
                   })
                 )
@@ -394,7 +391,7 @@ export class BounceOutUp
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -406,7 +403,7 @@ export class BounceOutUp
                   withTiming(10, { duration: duration * 0.15 }),
                   withTiming(-10, { duration: duration * 0.15 }),
                   withTiming(20, { duration: duration * 0.15 }),
-                  withTiming(-height, {
+                  withTiming(-values.windowHeight, {
                     duration: duration * 0.55,
                   })
                 )
@@ -447,7 +444,7 @@ export class BounceOutLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -459,7 +456,7 @@ export class BounceOutLeft
                   withTiming(10, { duration: duration * 0.15 }),
                   withTiming(-10, { duration: duration * 0.15 }),
                   withTiming(20, { duration: duration * 0.15 }),
-                  withTiming(-width, {
+                  withTiming(-values.windowWidth, {
                     duration: duration * 0.55,
                   })
                 )
@@ -500,7 +497,7 @@ export class BounceOutRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -512,7 +509,7 @@ export class BounceOutRight
                   withTiming(-10, { duration: duration * 0.15 }),
                   withTiming(10, { duration: duration * 0.15 }),
                   withTiming(-20, { duration: duration * 0.15 }),
-                  withTiming(width, {
+                  withTiming(values.windowWidth, {
                     duration: duration * 0.55,
                   })
                 )

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

@@ -1,4 +1,3 @@
-import { Dimensions } from 'react-native';
 import { withSequence, withTiming } from '../../animation';
 import { ComplexAnimationBuilder } from '../animationBuilder';
 import {
@@ -6,8 +5,6 @@ import {
   IEntryExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 
-const { width } = Dimensions.get('window');
-
 export class LightSpeedInRight
   extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder
@@ -24,7 +21,7 @@ export class LightSpeedInRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -50,7 +47,7 @@ export class LightSpeedInRight
         },
         initialValues: {
           opacity: 0,
-          transform: [{ translateX: width }, { skewX: '-45deg' }],
+          transform: [{ translateX: values.windowWidth }, { skewX: '-45deg' }],
           ...initialValues,
         },
         callback: callback,
@@ -75,7 +72,7 @@ export class LightSpeedInLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -101,7 +98,7 @@ export class LightSpeedInLeft
         },
         initialValues: {
           opacity: 0,
-          transform: [{ translateX: -width }, { skewX: '45deg' }],
+          transform: [{ translateX: -values.windowWidth }, { skewX: '45deg' }],
           ...initialValues,
         },
         callback: callback,
@@ -125,14 +122,17 @@ export class LightSpeedOutRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
           opacity: delayFunction(delay, animation(0, config)),
           transform: [
             {
-              translateX: delayFunction(delay, animation(width, config)),
+              translateX: delayFunction(
+                delay,
+                animation(values.windowWidth, config)
+              ),
             },
             {
               skewX: delayFunction(delay, animation('-45deg', config)),
@@ -165,14 +165,17 @@ export class LightSpeedOutLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
           opacity: delayFunction(delay, animation(0, config)),
           transform: [
             {
-              translateX: delayFunction(delay, animation(-width, config)),
+              translateX: delayFunction(
+                delay,
+                animation(-values.windowWidth, config)
+              ),
             },
             {
               skewX: delayFunction(delay, animation('45deg', config)),

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

@@ -1,12 +1,9 @@
-import { Dimensions } from 'react-native';
 import { ComplexAnimationBuilder } from '../animationBuilder';
 import {
   EntryExitAnimationFunction,
   IEntryExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 
-const { width } = Dimensions.get('window');
-
 export class RollInLeft
   extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder
@@ -22,7 +19,7 @@ export class RollInLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -32,7 +29,10 @@ export class RollInLeft
           ],
         },
         initialValues: {
-          transform: [{ translateX: -width }, { rotate: '-180deg' }],
+          transform: [
+            { translateX: -values.windowWidth },
+            { rotate: '-180deg' },
+          ],
           ...initialValues,
         },
         callback: callback,
@@ -56,7 +56,7 @@ export class RollInRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -66,7 +66,7 @@ export class RollInRight
           ],
         },
         initialValues: {
-          transform: [{ translateX: width }, { rotate: '180deg' }],
+          transform: [{ translateX: values.windowWidth }, { rotate: '180deg' }],
           ...initialValues,
         },
         callback: callback,
@@ -90,12 +90,17 @@ export class RollOutLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
           transform: [
-            { translateX: delayFunction(delay, animation(-width, config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(-values.windowWidth, config)
+              ),
+            },
             { rotate: delayFunction(delay, animation('-180deg', config)) },
           ],
         },
@@ -124,12 +129,17 @@ export class RollOutRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
           transform: [
-            { translateX: delayFunction(delay, animation(width, config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(values.windowWidth, config)
+              ),
+            },
             { rotate: delayFunction(delay, animation('180deg', config)) },
           ],
         },

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

@@ -5,11 +5,8 @@ import {
   IEntryAnimationBuilder,
   IExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
-import { Dimensions } from 'react-native';
 import { ComplexAnimationBuilder } from '../animationBuilder';
 
-const { width, height } = Dimensions.get('window');
-
 export class SlideInRight
   extends ComplexAnimationBuilder
   implements IEntryAnimationBuilder
@@ -35,7 +32,7 @@ export class SlideInRight
           ),
         },
         initialValues: {
-          originX: values.targetOriginX + width,
+          originX: values.targetOriginX + values.windowWidth,
           ...initialValues,
         },
         callback: callback,
@@ -69,7 +66,7 @@ export class SlideInLeft
           ),
         },
         initialValues: {
-          originX: values.targetOriginX - width,
+          originX: values.targetOriginX - values.windowWidth,
           ...initialValues,
         },
         callback: callback,
@@ -99,7 +96,13 @@ export class SlideOutRight
         animations: {
           originX: delayFunction(
             delay,
-            animation(Math.max(values.currentOriginX + width, width), config)
+            animation(
+              Math.max(
+                values.currentOriginX + values.windowWidth,
+                values.windowWidth
+              ),
+              config
+            )
           ),
         },
         initialValues: {
@@ -133,7 +136,13 @@ export class SlideOutLeft
         animations: {
           originX: delayFunction(
             delay,
-            animation(Math.min(values.currentOriginX - width, -width), config)
+            animation(
+              Math.min(
+                values.currentOriginX - values.windowWidth,
+                -values.windowWidth
+              ),
+              config
+            )
           ),
         },
         initialValues: {
@@ -171,7 +180,7 @@ export class SlideInUp
           ),
         },
         initialValues: {
-          originY: -height,
+          originY: -values.windowHeight,
           ...initialValues,
         },
         callback: callback,
@@ -205,7 +214,7 @@ export class SlideInDown
           ),
         },
         initialValues: {
-          originY: values.targetOriginY + height,
+          originY: values.targetOriginY + values.windowHeight,
           ...initialValues,
         },
         callback: callback,
@@ -235,7 +244,13 @@ export class SlideOutUp
         animations: {
           originY: delayFunction(
             delay,
-            animation(Math.min(values.currentOriginY - height, -height), config)
+            animation(
+              Math.min(
+                values.currentOriginY - values.windowHeight,
+                -values.windowHeight
+              ),
+              config
+            )
           ),
         },
         initialValues: { originY: values.currentOriginY, ...initialValues },
@@ -266,7 +281,13 @@ export class SlideOutDown
         animations: {
           originY: delayFunction(
             delay,
-            animation(Math.max(values.currentOriginY + height, height), config)
+            animation(
+              Math.max(
+                values.currentOriginY + values.windowHeight,
+                values.windowHeight
+              ),
+              config
+            )
           ),
         },
         initialValues: { originY: values.currentOriginY, ...initialValues },

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

@@ -7,11 +7,8 @@ import {
   IEntryAnimationBuilder,
   IExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
-import { Dimensions } from 'react-native';
 import { ComplexAnimationBuilder } from '../animationBuilder';
 
-const { width, height } = Dimensions.get('window');
-
 export class ZoomIn
   extends ComplexAnimationBuilder
   implements IEntryExitAnimationBuilder
@@ -93,7 +90,7 @@ export class ZoomInLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -103,7 +100,7 @@ export class ZoomInLeft
           ],
         },
         initialValues: {
-          transform: [{ translateX: -width }, { scale: 0 }],
+          transform: [{ translateX: -values.windowWidth }, { scale: 0 }],
           ...initialValues,
         },
         callback: callback,
@@ -127,7 +124,7 @@ export class ZoomInRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -137,7 +134,7 @@ export class ZoomInRight
           ],
         },
         initialValues: {
-          transform: [{ translateX: width }, { scale: 0 }],
+          transform: [{ translateX: values.windowWidth }, { scale: 0 }],
           ...initialValues,
         },
         callback: callback,
@@ -161,7 +158,7 @@ export class ZoomInUp
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -171,7 +168,7 @@ export class ZoomInUp
           ],
         },
         initialValues: {
-          transform: [{ translateY: -height }, { scale: 0 }],
+          transform: [{ translateY: -values.windowHeight }, { scale: 0 }],
           ...initialValues,
         },
         callback: callback,
@@ -195,7 +192,7 @@ export class ZoomInDown
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
@@ -205,7 +202,7 @@ export class ZoomInDown
           ],
         },
         initialValues: {
-          transform: [{ translateY: height }, { scale: 0 }],
+          transform: [{ translateY: values.windowHeight }, { scale: 0 }],
           ...initialValues,
         },
         callback: callback,
@@ -363,12 +360,17 @@ export class ZoomOutLeft
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
           transform: [
-            { translateX: delayFunction(delay, animation(-width, config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(-values.windowWidth, config)
+              ),
+            },
             { scale: delayFunction(delay, animation(0, config)) },
           ],
         },
@@ -397,12 +399,17 @@ export class ZoomOutRight
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
           transform: [
-            { translateX: delayFunction(delay, animation(width, config)) },
+            {
+              translateX: delayFunction(
+                delay,
+                animation(values.windowWidth, config)
+              ),
+            },
             { scale: delayFunction(delay, animation(0, config)) },
           ],
         },
@@ -431,12 +438,17 @@ export class ZoomOutUp
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
           transform: [
-            { translateY: delayFunction(delay, animation(-height, config)) },
+            {
+              translateY: delayFunction(
+                delay,
+                animation(-values.windowHeight, config)
+              ),
+            },
             { scale: delayFunction(delay, animation(0, config)) },
           ],
         },
@@ -465,12 +477,17 @@ export class ZoomOutDown
     const callback = this.callbackV;
     const initialValues = this.initialValues;
 
-    return () => {
+    return (values) => {
       'worklet';
       return {
         animations: {
           transform: [
-            { translateY: delayFunction(delay, animation(height, config)) },
+            {
+              translateY: delayFunction(
+                delay,
+                animation(values.windowHeight, config)
+              ),
+            },
             { scale: delayFunction(delay, animation(0, config)) },
           ],
         },

package/src/reanimated2/layoutReanimation/index.ts

@@ -2,3 +2,4 @@ import './animationsManager';
 export * from './animationBuilder';
 export * from './defaultAnimations';
 export * from './defaultTransitions';
+export * from './sharedTransitions';

package/src/reanimated2/layoutReanimation/sharedTransitions/index.ts

@@ -0,0 +1,87 @@
+import { withTiming } from '../../animation';
+import {
+  ILayoutAnimationBuilder,
+  LayoutAnimationFunction,
+  LayoutAnimationsValues,
+} from '../animationBuilder/commonTypes';
+import { StyleProps } from '../../commonTypes';
+
+const supportedProps = ['width', 'height', 'originX', 'originY', 'transform'];
+
+type AnimationFactoryType = (values: LayoutAnimationsValues) => StyleProps;
+
+export class SharedTransition implements ILayoutAnimationBuilder {
+  animationFactory: AnimationFactoryType | null = null;
+  defaultDuration = 500;
+
+  static createInstance(): SharedTransition {
+    return new SharedTransition();
+  }
+
+  static custom(animationFactory: AnimationFactoryType): SharedTransition {
+    return this.createInstance().custom(animationFactory);
+  }
+
+  custom(animationFactory: AnimationFactoryType): SharedTransition {
+    this.animationFactory = animationFactory;
+    return this;
+  }
+
+  static build(): LayoutAnimationFunction {
+    return this.createInstance().build();
+  }
+
+  build(): LayoutAnimationFunction {
+    const animationFactory = this.animationFactory;
+    const animationDuration = this.defaultDuration;
+    return (values: LayoutAnimationsValues) => {
+      'worklet';
+      let animations: {
+        [key: string]: any;
+      } = {};
+      const initialValues: {
+        [key: string]: any;
+      } = {};
+
+      if (animationFactory) {
+        animations = animationFactory(values);
+        for (const key in animations) {
+          if (!supportedProps.includes(key)) {
+            throw Error(`The prop '${key}' is not supported yet.`);
+          }
+        }
+      } else {
+        for (const propName of supportedProps) {
+          if (propName === 'transform') {
+            const matrix = values.targetTransformMatrix;
+            animations.transformMatrix = withTiming(matrix, {
+              // native screen transition takes around 500ms
+              duration: animationDuration,
+            });
+          } else {
+            const keyToTargetValue =
+              'target' + propName.charAt(0).toUpperCase() + propName.slice(1);
+            animations[propName] = withTiming(values[keyToTargetValue], {
+              // native screen transition takes around 500ms
+              duration: animationDuration,
+            });
+          }
+        }
+      }
+
+      for (const propName in animations) {
+        if (propName === 'transform') {
+          initialValues.transformMatrix = values.currentTransformMatrix;
+        } else {
+          const keyToCurrentValue =
+            'current' + propName.charAt(0).toUpperCase() + propName.slice(1);
+          initialValues[propName] = values[keyToCurrentValue];
+        }
+      }
+
+      return { initialValues, animations };
+    };
+  }
+}
+
+export const DefaultSharedTransition = SharedTransition;