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

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;

package/src/reanimated2/mappers.ts

@@ -1,6 +1,9 @@
 import { SharedValue } from './commonTypes';
+import { isJest } from './PlatformChecker';
 import { runOnUI } from './threads';
 
+const IS_JEST = isJest();
+
 export type Mapper = {
   id: number;
   dirty: boolean;
@@ -14,7 +17,7 @@ export function createMapperRegistry() {
   const mappers = new Map();
   let sortedMappers: Mapper[] = [];
 
-  let frameRequested = false;
+  let runRequested = false;
 
   function updateMappersOrder() {
     // sort mappers topologically
@@ -74,8 +77,8 @@ export function createMapperRegistry() {
     sortedMappers = newOrder;
   }
 
-  function mapperFrame() {
-    frameRequested = false;
+  function mapperRun() {
+    runRequested = false;
     if (mappers.size !== sortedMappers.length) {
       updateMappersOrder();
     }
@@ -88,9 +91,17 @@ export function createMapperRegistry() {
   }
 
   function maybeRequestUpdates() {
-    if (!frameRequested) {
-      requestAnimationFrame(mapperFrame);
-      frameRequested = true;
+    if (IS_JEST) {
+      // On Jest environment we avoid using setImmediate as that'd require test
+      // to advance the clock manually. This on other hand would require tests
+      // to know how many times mappers need to run. As we don't want tests to
+      // make any assumptions on that number it is easier to execute mappers
+      // immediately for testing purposes and only expect test to advance timers
+      // if they want to make any assertions on the effects of animations being run.
+      mapperRun();
+    } else if (!runRequested) {
+      setImmediate(mapperRun);
+      runRequested = true;
     }
   }
 

package/src/reanimated2/mock.ts

@@ -7,6 +7,44 @@ const NOOP = () => {
 const ID = (t) => t;
 const IMMEDIATE_CB_INVOCATION = (cb: () => unknown) => cb();
 
+class BaseAnimationMock {
+  duration(_: number) {
+    return this;
+  }
+
+  delay(_: number) {
+    return this;
+  }
+
+  springify(_: number) {
+    return this;
+  }
+
+  damping(_: number) {
+    return this;
+  }
+
+  stiffness(_: number) {
+    return this;
+  }
+
+  withCallback(_: (finsihed: boolean) => void) {
+    return this;
+  }
+
+  randomDelay() {
+    return this;
+  }
+
+  withInitialValues() {
+    return this;
+  }
+
+  build() {
+    return () => ({ initialValues: {}, animations: {} });
+  }
+}
+
 const ReanimatedV2 = {
   useSharedValue: (v) => ({ value: v }),
   useDerivedValue: (a) => ({ value: a() }),
@@ -75,6 +113,96 @@ const ReanimatedV2 = {
   runOnUI: (fn) => fn,
 };
 
+[
+  'FadeIn',
+  'FadeInRight',
+  'FadeInLeft',
+  'FadeInUp',
+  'FadeInDown',
+  'FadeOut',
+  'FadeOutRight',
+  'FadeOutLeft',
+  'FadeOutUp',
+  'FadeOutDown',
+
+  'FlipInYLeft',
+  'FlipInXDown',
+  'FlipInYRight',
+  'FlipInEasyX',
+  'FlipInEasyY',
+  'FlipOutXUp',
+  'FlipOutYLeft',
+  'FlipOutXDown',
+  'FlipOutYRight',
+  'FlipOutEasyX',
+  'FlipOutEasyY',
+
+  'StretchInY',
+  'StretchOutX',
+  'StretchOutY',
+  'SlideInLeft',
+  'SlideOutRight',
+  'SlideOutLeft',
+  'SlideInUp',
+  'SlideInDown',
+  'SlideOutUp',
+
+  'ZoomInRotate',
+  'ZoomInLeft',
+  'ZoomInRight',
+  'ZoomInUp',
+  'ZoomInDown',
+  'ZoomInEasyUp',
+  'ZoomInEasyDown',
+  'ZoomOut',
+  'ZoomOutRotate',
+  'ZoomOutLeft',
+  'ZoomOutRight',
+  'ZoomOutUp',
+  'ZoomOutDown',
+  'ZoomOutEasyUp',
+  'ZoomOutEasyDown',
+
+  'BounceInDown',
+  'BounceInUp',
+  'BounceInLeft',
+  'BounceInRight',
+  'BounceOut',
+  'BounceOutDown',
+  'BounceOutUp',
+  'BounceOutLeft',
+  'BounceOutRight',
+
+  'LightSpeedInLeft',
+  'LightSpeedOutRight',
+  'LightSpeedOutLeft',
+
+  'PinwheelOut',
+
+  'RotateInDownRight',
+  'RotateInUpLeft',
+  'RotateInUpRight',
+  'RotateOutDownLeft',
+  'RotateOutDownRight',
+  'RotateOutUpLeft',
+  'RotateOutUpRight',
+
+  'RollInRight',
+  'RollOutLeft',
+  'RollOutRight',
+
+  'Layout',
+  'CurvedTransition',
+  'JumpingTransition',
+  'SequencedTransition',
+  'FadingTransition',
+  'EntryExitTransition',
+].forEach((k) =>
+  Object.assign(ReanimatedV2, {
+    [k]: new BaseAnimationMock(),
+  })
+);
+
 module.exports = {
   ...ReanimatedV2,
 };

package/src/reanimated2/mutables.ts

@@ -53,6 +53,7 @@ export function makeUIMutable<T>(
       listeners.delete(id);
     },
     _animation: null,
+    _isReanimatedSharedValue: true,
   };
   return self;
 }
@@ -134,6 +135,7 @@ export function makeMutable<T>(
       }
       listeners!.delete(id);
     },
+    _isReanimatedSharedValue: true,
   };
   registerShareableMapping(mutable, handle);
   return mutable;

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

@@ -0,0 +1,39 @@
+/**
+ * We hardcode the version of Reanimated here in order to compare it
+ * with the version used to build the native part of the library in runtime.
+ * Remember to keep this in sync with the version declared in `package.json`
+ */
+const jsVersion = '3.0.0';
+
+/**
+ * Checks that native and js versions of reanimated match.
+ */
+export function checkVersion(): void {
+  const cppVersion = global._REANIMATED_VERSION_CPP;
+  if (cppVersion === undefined) {
+    console.error(
+      `[Reanimated] Couldn't determine the version of the native part of Reanimated. Did you forget to re-build the app after upgrading react-native-reanimated? If you use Expo Go, you must use the exact version which is bundled into Expo SDK.`
+    );
+    return;
+  }
+  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 {}

package/src/reanimated2/pluginUtils.ts

@@ -0,0 +1,8 @@
+export function getUseOfValueInStyleWarning() {
+  return (
+    "It looks like you might be using shared value's .value inside reanimated inline style. " +
+    'If you want a component to update when shared value changes you should use the shared value' +
+    ' directly instead of its current state represented by `.value`. See documentation here: ' +
+    'https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/animations#animations-in-inline-styles'
+  );
+}