react-native-reanimated 2.13.0 → 2.14.0

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/platform-specific/checkVersion.ts

@@ -0,0 +1,28 @@
+import { version as jsVersion } from '../../../package.json';
+
+/**
+ * Checks that native and js versions of reanimated match.
+ */
+export function checkVersion(): void {
+  const cppVersion = global._REANIMATED_VERSION_CPP;
+  const ok = (() => {
+    if (
+      jsVersion.match(/^\d+\.\d+\.\d+$/) &&
+      cppVersion.match(/^\d+\.\d+\.\d+$/)
+    ) {
+      // x.y.z, compare only major and minor, skip patch
+      const [jsMajor, jsMinor] = jsVersion.split('.');
+      const [cppMajor, cppMinor] = cppVersion.split('.');
+      return jsMajor === cppMajor && jsMinor === cppMinor;
+    } else {
+      // alpha, beta or rc, compare everything
+      return jsVersion === cppVersion;
+    }
+  })();
+  if (!ok) {
+    console.error(
+      `[Reanimated] Mismatch between JavaScript part and native part of Reanimated (${jsVersion} vs. ${cppVersion}). Did you forget to re-build the app after upgrading react-native-reanimated? If you use Expo Go, you must downgrade to ${cppVersion} which is bundled into Expo SDK.`
+    );
+    // TODO: detect Expo managed workflow
+  }
+}

package/src/reanimated2/platform-specific/checkVersion.web.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/**
+ * Checks that native and js versions of reanimated match.
+ * Stubbed for web, where this check is unnecessary.
+ */
+export function checkVersion(): void {}