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

package/src/reanimated2/js-reanimated/Mapper.ts

@@ -1,4 +1,5 @@
 import { NestedObjectValues } from '../commonTypes';
+import { shouldBeUseWeb } from '../PlatformChecker';
 import { JSReanimated } from './commonTypes';
 import MutableValue from './MutableValue';
 
@@ -49,6 +50,9 @@ export default class Mapper<T> {
         res.push(value);
       } else if (Array.isArray(value)) {
         value.forEach((v) => extractMutables(v));
+      } else if (isWebDomElement(value)) {
+        // do nothing on dom elements
+        // without this check, we get a "Maximum call size exceeded error"
       } else if (typeof value === 'object') {
         Object.keys(value).forEach((key) => {
           extractMutables(value[key]);
@@ -60,3 +64,31 @@ export default class Mapper<T> {
     return res;
   }
 }
+
+function isWebDomElement(value: any) {
+  if (!shouldBeUseWeb()) {
+    return false;
+  }
+
+  // https://stackoverflow.com/a/384380/7869175
+  function isWebNode(o: any) {
+    return typeof Node === 'object'
+      ? o instanceof Node
+      : o &&
+          typeof o === 'object' &&
+          typeof o.nodeType === 'number' &&
+          typeof o.nodeName === 'string';
+  }
+
+  function isWebElement(o: any) {
+    return typeof HTMLElement === 'object'
+      ? o instanceof HTMLElement // DOM2
+      : o &&
+          typeof o === 'object' &&
+          o !== null &&
+          o.nodeType === 1 &&
+          typeof o.nodeName === 'string';
+  }
+
+  return isWebNode(value) || isWebElement(value);
+}

package/src/reanimated2/js-reanimated/WebSensor.ts

@@ -0,0 +1,34 @@
+export declare class WebSensor {
+  start: () => void;
+  stop: () => void;
+  addEventListener: (eventType: string, eventHandler: () => void) => void;
+  quaternion: [number, number, number, number];
+  x: number;
+  y: number;
+  z: number;
+}
+
+type configOptions =
+  | {
+      referenceFrame: string;
+      frequency?: undefined;
+    }
+  | {
+      frequency: number;
+      referenceFrame?: undefined;
+    };
+
+interface Constructable<T> {
+  new (config: configOptions): T;
+}
+
+declare global {
+  interface Window {
+    Accelerometer: Constructable<WebSensor>;
+    GravitySensor: Constructable<WebSensor>;
+    Gyroscope: Constructable<WebSensor>;
+    Magnetometer: Constructable<WebSensor>;
+    AbsoluteOrientationSensor: Constructable<WebSensor>;
+    Sensor: Constructable<WebSensor>;
+  }
+}

package/src/reanimated2/js-reanimated/commonTypes.ts

@@ -32,7 +32,6 @@ export interface JSReanimated {
   _frames: ((timestamp: Timestamp) => void)[];
   timeProvider: { now: () => number };
   pushFrame(frame: (timestamp: Timestamp) => void): void;
-  getTimestamp(): number;
   maybeRequestRender(): void;
   _onRender(timestampMs: number): void;
   installCoreFunctions(valueSetter: <T>(value: T) => void): void;

package/src/reanimated2/js-reanimated/global.ts

@@ -3,10 +3,6 @@
 import { shouldBeUseWeb } from '../PlatformChecker';
 const initializeGlobalsForWeb = () => {
   if (shouldBeUseWeb()) {
-    global._frameTimestamp = null;
-    global._setGlobalConsole = (_val) => {
-      // noop
-    };
     global._measure = () => {
       console.warn(
         "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"
@@ -40,10 +36,10 @@ const initializeGlobalsForWeb = () => {
 };
 
 /*
-  If a file doesn't export anything, tree shaking doesn't pack 
-  it into the JS bundle. In effect, the code inside of this file 
-  will never execute. That is why we wrapped initialization code 
-  into a function, and we call this one during creating 
+  If a file doesn't export anything, tree shaking doesn't pack
+  it into the JS bundle. In effect, the code inside of this file
+  will never execute. That is why we wrapped initialization code
+  into a function, and we call this one during creating
   the module export object.
 */
 

package/src/reanimated2/js-reanimated/index.ts

@@ -5,7 +5,6 @@ const reanimatedJS = new JSReanimated();
 
 global._makeShareableClone = (c) => c;
 global._scheduleOnJS = setImmediate;
-global._getTimestamp = reanimatedJS.getTimestamp.bind(reanimatedJS);
 
 interface JSReanimatedComponent {
   previousStyle: StyleProps;

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

@@ -21,6 +21,8 @@ export interface EntryAnimationsValues {
   targetHeight: number;
   targetGlobalOriginX: number;
   targetGlobalOriginY: number;
+  windowWidth: number;
+  windowHeight: number;
 }
 
 export interface ExitAnimationsValues {
@@ -30,6 +32,8 @@ export interface ExitAnimationsValues {
   currentHeight: number;
   currentGlobalOriginX: number;
   currentGlobalOriginY: number;
+  windowWidth: number;
+  windowHeight: number;
 }
 
 export type EntryExitAnimationFunction = (
@@ -39,6 +43,7 @@ export type EntryExitAnimationFunction = (
 export type AnimationConfigFunction<T> = (targetValues: T) => LayoutAnimation;
 
 export interface LayoutAnimationsValues {
+  [key: string]: number;
   currentOriginX: number;
   currentOriginY: number;
   currentWidth: number;
@@ -55,13 +60,20 @@ export interface LayoutAnimationsValues {
   windowHeight: number;
 }
 
+export enum LayoutAnimationType {
+  ENTERING = 1,
+  EXITING = 2,
+  LAYOUT = 3,
+  SHARED_ELEMENT_TRANSITION = 4,
+}
+
 export type LayoutAnimationFunction = (
   targetValues: LayoutAnimationsValues
 ) => LayoutAnimation;
 
 export type LayoutAnimationStartFunction = (
   tag: number,
-  type: string,
+  type: LayoutAnimationType,
   yogaValues: LayoutAnimationsValues,
   config: LayoutAnimationFunction
 ) => void;

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

@@ -1,6 +1,7 @@
 export { BaseAnimationBuilder } from './BaseAnimationBuilder';
 export { ComplexAnimationBuilder } from './ComplexAnimationBuilder';
 export { Keyframe } from './Keyframe';
+export { LayoutAnimationType } from './commonTypes';
 export type {
   LayoutAnimation,
   AnimationFunction,

package/src/reanimated2/layoutReanimation/animationsManager.ts

@@ -1,24 +1,25 @@
-import { runOnUI } from '../core';
 import { withStyleAnimation } from '../animation/styleAnimation';
-import { LogBox } from 'react-native';
 import { SharedValue } from '../commonTypes';
 import { makeUIMutable } from '../mutables';
 import {
   LayoutAnimationFunction,
+  LayoutAnimationType,
   LayoutAnimationsValues,
 } from './animationBuilder';
-
-LogBox.ignoreLogs(['Overriding previous layout animation with']);
+import { runOnUIImmediately } from '../threads';
 
 const TAG_OFFSET = 1e9;
 
 function startObservingProgress(
   tag: number,
-  sharedValue: SharedValue<number>
+  sharedValue: SharedValue<number>,
+  animationType: LayoutAnimationType
 ): void {
   'worklet';
+  const isSharedTransition =
+    animationType === LayoutAnimationType.SHARED_ELEMENT_TRANSITION;
   sharedValue.addListener(tag + TAG_OFFSET, () => {
-    _notifyAboutProgress(tag, sharedValue.value);
+    _notifyAboutProgress(tag, sharedValue.value, isSharedTransition);
   });
 }
 
@@ -41,16 +42,16 @@ function createLayoutAnimationManager() {
   return {
     start(
       tag: number,
-      type: string,
+      type: LayoutAnimationType,
       yogaValues: LayoutAnimationsValues,
       config: LayoutAnimationFunction
     ) {
       const style = config(yogaValues);
       let currentAnimation = style.animations;
 
-      if (type === 'entering') {
+      if (type === LayoutAnimationType.ENTERING) {
         enteringAnimationForTag.set(tag, currentAnimation);
-      } else if (type === 'layout') {
+      } else if (type === LayoutAnimationType.LAYOUT) {
         // When layout animation is requested, but entering is still running, we merge
         // new layout animation targets into the ongoing animation
         const enteringAnimation = enteringAnimationForTag.get(tag);
@@ -75,20 +76,24 @@ function createLayoutAnimationManager() {
         if (finished) {
           enteringAnimationForTag.delete(tag);
           mutableValuesForTag.delete(tag);
-          const shouldRemoveView = type === 'exiting';
+          const shouldRemoveView = type === LayoutAnimationType.EXITING;
           stopObservingProgress(tag, value, finished, shouldRemoveView);
         }
         style.callback &&
           style.callback(finished === undefined ? false : finished);
       };
 
-      startObservingProgress(tag, value);
+      startObservingProgress(tag, value, type);
       value.value = animation;
     },
+    stop(tag: number) {
+      const value = mutableValuesForTag.get(tag);
+      stopObservingProgress(tag, value, true, true);
+    },
   };
 }
 
-runOnUI(() => {
+runOnUIImmediately(() => {
   'worklet';
   global.LayoutAnimationsManager = createLayoutAnimationManager();
 })();

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)) },
           ],
         },