react-native-reanimated 2.4.1 → 2.7.0

package/src/reanimated2/NativeReanimated/index.ts

@@ -1,6 +1,5 @@
 import reanimatedJS from '../js-reanimated';
 import { shouldBeUseWeb } from '../PlatformChecker';
-import { Platform } from 'react-native';
 import { NativeReanimated } from './NativeReanimated';
 
 let exportedModule;
@@ -8,11 +7,6 @@ if (shouldBeUseWeb()) {
   exportedModule = reanimatedJS;
 } else {
   exportedModule = new NativeReanimated();
-  if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
-    console.warn(
-      `If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`
-    );
-  }
 }
 
 export default exportedModule as NativeReanimated;

package/src/reanimated2/ViewDescriptorsSet.ts

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { makeMutable } from './core';
 import { SharedValue } from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
-import { Platform } from 'react-native';
+import { shouldBeUseWeb } from './PlatformChecker';
 
 export interface ViewRefSet<T> {
   items: Set<T>;
@@ -24,8 +24,7 @@ export interface ViewDescriptorsSet {
   ) => void;
 }
 
-const scheduleUpdates =
-  Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
+const scheduleUpdates = shouldBeUseWeb() ? requestAnimationFrame : setImmediate;
 
 export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   const ref = useRef<ViewDescriptorsSet | null>(null);

package/src/reanimated2/animation/index.ts

@@ -1,6 +1,7 @@
 export {
   HigherOrderAnimation,
   NextAnimation,
+  DelayAnimation,
   RepeatAnimation,
   SequenceAnimation,
   StyleLayoutAnimation,

package/src/reanimated2/animation/styleAnimation.ts

@@ -57,9 +57,8 @@ export function setPath<T>(
     currObj = currObj[keys[i]];
   }
 
-  (currObj as { [key: string]: NestedObjectValues<T> })[
-    keys[keys.length - 1]
-  ] = value;
+  (currObj as { [key: string]: NestedObjectValues<T> })[keys[keys.length - 1]] =
+    value;
 }
 
 interface NestedObjectEntry<T> {
@@ -83,7 +82,8 @@ export function withStyleAnimation(
         { value: animation.styleAnimations, path: [] },
       ];
       while (entriesToCheck.length > 0) {
-        const currentEntry: NestedObjectEntry<AnimationObject> = entriesToCheck.pop() as NestedObjectEntry<AnimationObject>;
+        const currentEntry: NestedObjectEntry<AnimationObject> =
+          entriesToCheck.pop() as NestedObjectEntry<AnimationObject>;
         if (Array.isArray(currentEntry.value)) {
           for (let index = 0; index < currentEntry.value.length; index++) {
             entriesToCheck.push({
@@ -103,7 +103,8 @@ export function withStyleAnimation(
             });
           }
         } else {
-          const currentStyleAnimation: AnimationObject = currentEntry.value as AnimationObject;
+          const currentStyleAnimation: AnimationObject =
+            currentEntry.value as AnimationObject;
           if (currentStyleAnimation.finished) {
             continue;
           }
@@ -211,7 +212,8 @@ export function withStyleAnimation(
           styleAnimations,
         ];
         while (animationsToCheck.length > 0) {
-          const currentAnimation: NestedObjectValues<AnimationObject> = animationsToCheck.pop() as NestedObjectValues<AnimationObject>;
+          const currentAnimation: NestedObjectValues<AnimationObject> =
+            animationsToCheck.pop() as NestedObjectValues<AnimationObject>;
           if (Array.isArray(currentAnimation)) {
             for (const element of currentAnimation) {
               animationsToCheck.push(element);
@@ -224,7 +226,8 @@ export function withStyleAnimation(
               animationsToCheck.push(value);
             }
           } else {
-            const currentStyleAnimation: AnimationObject = currentAnimation as AnimationObject;
+            const currentStyleAnimation: AnimationObject =
+              currentAnimation as AnimationObject;
             if (
               !currentStyleAnimation.finished &&
               currentStyleAnimation.callback

package/src/reanimated2/animation/timing.ts

@@ -80,7 +80,9 @@ export function withTiming(
         // new timing over the old one with the same parameters. If so, we want
         // to copy animation timeline properties
         animation.startTime = (previousAnimation as TimingAnimation).startTime;
-        animation.startValue = (previousAnimation as TimingAnimation).startValue;
+        animation.startValue = (
+          previousAnimation as TimingAnimation
+        ).startValue;
       } else {
         animation.startTime = now;
         animation.startValue = value;

package/src/reanimated2/animation/util.ts

@@ -228,17 +228,16 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
   };
 }
 
-type AnimationToDecoration<
-  T extends AnimationObject | StyleLayoutAnimation
-> = T extends StyleLayoutAnimation
-  ? Record<string, unknown>
-  : T extends DelayAnimation
-  ? NextAnimation<DelayAnimation>
-  : T extends RepeatAnimation
-  ? NextAnimation<RepeatAnimation>
-  : T extends SequenceAnimation
-  ? NextAnimation<SequenceAnimation>
-  : AnimatableValue | T;
+type AnimationToDecoration<T extends AnimationObject | StyleLayoutAnimation> =
+  T extends StyleLayoutAnimation
+    ? Record<string, unknown>
+    : T extends DelayAnimation
+    ? NextAnimation<DelayAnimation>
+    : T extends RepeatAnimation
+    ? NextAnimation<RepeatAnimation>
+    : T extends SequenceAnimation
+    ? NextAnimation<SequenceAnimation>
+    : AnimatableValue | T;
 
 export function defineAnimation<
   T extends AnimationObject | StyleLayoutAnimation

package/src/reanimated2/commonTypes.ts

@@ -51,7 +51,6 @@ export interface WorkletFunction {
   _closure?: Context;
   __workletHash?: number;
   __optimalization?: number;
-  __worklet?: boolean;
 }
 
 export interface BasicWorkletFunction<T> extends WorkletFunction {
@@ -126,3 +125,23 @@ export type AnimationCallback = (
 ) => void;
 
 export type Timestamp = number;
+
+export type Value3D = {
+  x: number;
+  y: number;
+  z: number;
+};
+
+export type SensorValue3D = SharedValue<Value3D>;
+
+export type ValueRotation = {
+  qw: number;
+  qx: number;
+  qy: number;
+  qz: number;
+  yaw: number;
+  pitch: number;
+  roll: number;
+};
+
+export type SensorValueRotation = SharedValue<ValueRotation>;

package/src/reanimated2/component/FlatList.tsx

@@ -13,7 +13,8 @@ const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
     return (
       <WrappedComponents.View
         layout={itemLayoutAnimation}
-        onLayout={props.onLayout}>
+        onLayout={props.onLayout}
+      >
         {props.children}
       </WrappedComponents.View>
     );
@@ -22,7 +23,7 @@ const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
   return cellRenderer;
 };
 
-interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
+export interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
   itemLayoutAnimation?: ILayoutAnimationBuilder;
 }
 

package/src/reanimated2/core.ts

@@ -4,7 +4,6 @@ import { Platform } from 'react-native';
 import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
 import {
   BasicWorkletFunction,
-  WorkletFunction,
   ComplexWorkletFunction,
   SharedValue,
   AnimationObject,
@@ -14,10 +13,6 @@ import {
 import { Descriptor } from './hook/commonTypes';
 import JSReanimated from './js-reanimated/JSReanimated';
 
-global.__reanimatedWorkletInit = function (worklet: WorkletFunction) {
-  worklet.__worklet = true;
-};
-
 if (global._setGlobalConsole === undefined) {
   // it can happen when Reanimated plugin wasn't added, but the user uses the only API from version 1
   global._setGlobalConsole = () => {
@@ -63,7 +58,7 @@ export const checkPluginState: (throwError: boolean) => boolean = (
 export const isConfigured: (throwError?: boolean) => boolean = (
   throwError = false
 ) => {
-  return checkPluginState(throwError) && !NativeReanimatedModule.useOnlyV1;
+  return checkPluginState(throwError);
 };
 
 export const isConfiguredCheck: () => void = () => {
@@ -74,48 +69,6 @@ export const isConfiguredCheck: () => void = () => {
   }
 };
 
-function _toArrayReanimated<T>(object: Iterable<T> | ArrayLike<T> | T[]): T[] {
-  'worklet';
-  if (Array.isArray(object)) {
-    return object;
-  }
-  if (
-    typeof Symbol !== 'undefined' &&
-    (typeof Symbol === 'function' ? Symbol.iterator : '@@iterator') in
-      Object(object)
-  ) {
-    return Array.from(object);
-  }
-  throw new Error(
-    'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
-  );
-}
-
-function _mergeObjectsReanimated(): unknown {
-  'worklet';
-  // we can't use rest parameters in worklets at the moment
-  // eslint-disable-next-line prefer-rest-params
-  const arr = Array.from(arguments);
-  return Object.assign.apply(null, [arr[0], ...arr.slice(1)]);
-}
-
-global.__reanimatedWorkletInit = function (worklet: WorkletFunction) {
-  worklet.__worklet = true;
-
-  if (worklet._closure) {
-    const closure = worklet._closure;
-    Object.keys(closure).forEach((key) => {
-      if (key === '_toConsumableArray') {
-        closure[key] = _toArrayReanimated;
-      }
-
-      if (key === '_objectSpread') {
-        closure[key] = _mergeObjectsReanimated;
-      }
-    });
-  }
-};
-
 function pushFrame(frame: (timestamp: Timestamp) => void): void {
   (NativeReanimatedModule as JSReanimated).pushFrame(frame);
 }
@@ -362,32 +315,30 @@ export function runOnJS<A extends any[], R>(
   }
 }
 
-if (!NativeReanimatedModule.useOnlyV1) {
-  NativeReanimatedModule.installCoreFunctions(
-    NativeReanimatedModule.native
-      ? (workletValueSetter as <T>(value: T) => void)
-      : (workletValueSetterJS as <T>(value: T) => void)
-  );
+NativeReanimatedModule.installCoreFunctions(
+  NativeReanimatedModule.native
+    ? (workletValueSetter as <T>(value: T) => void)
+    : (workletValueSetterJS as <T>(value: T) => void)
+);
 
-  if (!isWeb() && isConfigured()) {
-    const capturableConsole = console;
-    runOnUI(() => {
-      'worklet';
-      const console = {
-        debug: runOnJS(capturableConsole.debug),
-        log: runOnJS(capturableConsole.log),
-        warn: runOnJS(capturableConsole.warn),
-        error: runOnJS(capturableConsole.error),
-        info: runOnJS(capturableConsole.info),
-      };
-      _setGlobalConsole(console);
-      if (global.performance == null) {
-        global.performance = {
-          now: global._chronoNow,
-        };
-      }
-    })();
-  }
+if (!isWeb() && isConfigured()) {
+  const capturableConsole = console;
+  runOnUI(() => {
+    'worklet';
+    const console = {
+      debug: runOnJS(capturableConsole.debug),
+      log: runOnJS(capturableConsole.log),
+      warn: runOnJS(capturableConsole.warn),
+      error: runOnJS(capturableConsole.error),
+      info: runOnJS(capturableConsole.info),
+    };
+    _setGlobalConsole(console);
+    if (global.performance == null) {
+      global.performance = {
+        now: global._chronoNow,
+      } as any; // due to conflict with lib.dom.d.ts -> Performance
+    }
+  })();
 }
 
 type FeaturesConfig = {
@@ -418,3 +369,13 @@ export function enableLayoutAnimations(
     NativeReanimatedModule.enableLayoutAnimations(flag);
   }
 }
+
+export function configureProps(uiProps: string[], nativeProps: string[]): void {
+  if (!nativeShouldBeMock()) {
+    NativeReanimatedModule.configureProps(uiProps, nativeProps);
+  }
+}
+
+export function jestResetJsReanimatedModule() {
+  (NativeReanimatedModule as JSReanimated).jestResetModule();
+}

package/src/reanimated2/globals.d.ts

@@ -1,4 +1,4 @@
-import { AnimatedStyle, StyleProps, WorkletFunction } from './commonTypes';
+import { AnimatedStyle, StyleProps } from './commonTypes';
 import { ReanimatedConsole } from './core';
 import { MeasuredDimensions } from './NativeMethods';
 import { NativeReanimated } from './NativeReanimated/NativeReanimated';
@@ -27,9 +27,11 @@ declare global {
     animated: boolean
   ) => void;
   const _chronoNow: () => number;
+  const ReanimatedDataMock: {
+    now: () => number;
+  };
   namespace NodeJS {
     interface Global {
-      __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
       _setGlobalConsole: (console?: ReanimatedConsole) => void;
       _log: (s: string) => void;
       _setGestureState: () => void;
@@ -50,6 +52,9 @@ declare global {
           yogaValues: unknown
         ): void;
       };
+      ReanimatedDataMock: {
+        now: () => number;
+      };
     }
   }
 }

package/src/reanimated2/hook/index.ts

@@ -23,3 +23,4 @@ export {
   ScrollHandlers,
 } from './useAnimatedScrollHandler';
 export { useDerivedValue, DerivedValue } from './useDerivedValue';
+export { useAnimatedSensor, SensorType } from './useAnimatedSensor';

package/src/reanimated2/hook/useAnimatedSensor.ts

@@ -0,0 +1,91 @@
+import { useEffect, useRef } from 'react';
+import { makeMutable } from '../core';
+import NativeReanimated from '../NativeReanimated';
+import { SensorValue3D, SensorValueRotation } from '../commonTypes';
+
+export enum SensorType {
+  ACCELEROMETER = 1,
+  GYROSCOPE = 2,
+  GRAVITY = 3,
+  MAGNETIC_FIELD = 4,
+  ROTATION = 5,
+}
+
+export type SensorConfig = {
+  interval: number;
+};
+
+export type AnimatedSensor = {
+  sensor: SensorValue3D | SensorValueRotation | null;
+  unregister: () => void;
+  isAvailable: boolean;
+  config: {
+    interval: number;
+  };
+};
+
+export function useAnimatedSensor(
+  sensorType: SensorType,
+  userConfig?: SensorConfig
+): AnimatedSensor {
+  const ref = useRef({
+    sensor: null,
+    unregister: () => {
+      // NOOP
+    },
+    isAvailable: false,
+    config: {
+      interval: 0,
+    },
+  });
+
+  if (ref.current.sensor === null) {
+    ref.current.config = { interval: 10, ...userConfig };
+    let sensorData;
+    if (sensorType === SensorType.ROTATION) {
+      sensorData = {
+        qw: 0,
+        qx: 0,
+        qy: 0,
+        qz: 0,
+        yaw: 0,
+        pitch: 0,
+        roll: 0,
+      };
+    } else {
+      sensorData = {
+        x: 0,
+        y: 0,
+        z: 0,
+      };
+    }
+    ref.current.sensor = makeMutable(sensorData) as any;
+  }
+
+  useEffect(() => {
+    ref.current.config = { interval: 10, ...userConfig };
+    const id = NativeReanimated.registerSensor(
+      sensorType,
+      ref.current.config.interval,
+      ref.current.sensor as any
+    );
+
+    if (id !== -1) {
+      // if sensor is available
+      ref.current.unregister = () => NativeReanimated.unregisterSensor(id);
+      ref.current.isAvailable = true;
+    } else {
+      // if sensor is unavailable
+      ref.current.unregister = () => {
+        // NOOP
+      };
+      ref.current.isAvailable = false;
+    }
+
+    return () => {
+      ref.current.unregister();
+    };
+  }, [sensorType, userConfig]);
+
+  return ref.current;
+}

package/src/reanimated2/hook/utils.ts

@@ -187,7 +187,8 @@ export function isAnimated(prop: NestedObjectValues<AnimationObject>): boolean {
   'worklet';
   const propsToCheck: NestedObjectValues<AnimationObject>[] = [prop];
   while (propsToCheck.length > 0) {
-    const currentProp: NestedObjectValues<AnimationObject> = propsToCheck.pop() as NestedObjectValues<AnimationObject>;
+    const currentProp: NestedObjectValues<AnimationObject> =
+      propsToCheck.pop() as NestedObjectValues<AnimationObject>;
     if (Array.isArray(currentProp)) {
       for (const item of currentProp) {
         propsToCheck.push(item);

package/src/reanimated2/interpolateColor.ts

@@ -58,13 +58,13 @@ const getInterpolateRGB = (
   const a = [];
   for (let i = 0; i < colors.length; ++i) {
     const color = colors[i];
-    const proocessedColor = processColor(color);
+    const processedColor = processColor(color);
     // explicit check in case if processedColor is 0
-    if (proocessedColor !== null && proocessedColor !== undefined) {
-      r.push(red(proocessedColor));
-      g.push(green(proocessedColor));
-      b.push(blue(proocessedColor));
-      a.push(opacity(proocessedColor));
+    if (processedColor !== null && processedColor !== undefined) {
+      r.push(red(processedColor));
+      g.push(green(processedColor));
+      b.push(blue(processedColor));
+      a.push(opacity(processedColor));
     }
   }
   return { r, g, b, a };
@@ -85,11 +85,11 @@ const getInterpolateHSV = (
   const v = [];
   for (let i = 0; i < colors.length; ++i) {
     const color = colors[i];
-    const proocessedColor = RGBtoHSV(processColor(color) as any);
-    if (proocessedColor) {
-      h.push(proocessedColor.h);
-      s.push(proocessedColor.s);
-      v.push(proocessedColor.v);
+    const processedColor = RGBtoHSV(processColor(color) as any);
+    if (processedColor) {
+      h.push(processedColor.h);
+      s.push(processedColor.s);
+      v.push(processedColor.v);
     }
   }
   return { h, s, v };

package/src/reanimated2/interpolation.ts

@@ -123,12 +123,8 @@ function internalInterpolate(
   extrapolationConfig: RequiredExtrapolationConfig
 ) {
   'worklet';
-  const {
-    leftEdgeInput,
-    rightEdgeInput,
-    leftEdgeOutput,
-    rightEdgeOutput,
-  } = narrowedInput;
+  const { leftEdgeInput, rightEdgeInput, leftEdgeOutput, rightEdgeOutput } =
+    narrowedInput;
   if (rightEdgeInput - leftEdgeInput === 0) return leftEdgeOutput;
   const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);
   const val = leftEdgeOutput + progress * (rightEdgeOutput - leftEdgeOutput);

package/src/reanimated2/jestUtils.ts

@@ -1,6 +1,17 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-const MockDate = require('mockdate');
+import { jestResetJsReanimatedModule } from './core';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    interface Matchers<R> {
+      toHaveAnimatedStyle(
+        style: Record<string, unknown>[] | Record<string, unknown>
+      ): R;
+    }
+  }
+}
 
 let config = {
   fps: 60,
@@ -129,26 +140,30 @@ const compareStyle = (received, expectedStyle, config) => {
 
 let frameTime = 1000 / config.fps;
 let requestAnimationFrameCopy;
+let currentTimestamp = 0;
 
 const requestAnimationFrame = (callback) => {
   setTimeout(callback, frameTime);
 };
 
 const beforeTest = () => {
+  jestResetJsReanimatedModule();
   requestAnimationFrameCopy = global.requestAnimationFrame;
   global.requestAnimationFrame = requestAnimationFrame;
-  MockDate.set(0);
+  global.ReanimatedDataMock = {
+    now: () => currentTimestamp,
+  };
+  currentTimestamp = 0;
   jest.useFakeTimers();
 };
 
 const afterTest = () => {
-  MockDate.reset();
   jest.useRealTimers();
   global.requestAnimationFrame = requestAnimationFrameCopy;
 };
 
 const tickTravel = () => {
-  MockDate.set(new Date(Date.now() + frameTime));
+  currentTimestamp += frameTime;
   jest.advanceTimersByTime(frameTime);
 };
 
@@ -174,6 +189,7 @@ export const advanceAnimationByFrame = (count) => {
 
 export const setUpTests = (userConfig = {}) => {
   const expect = require('expect');
+  require('setimmediate');
   frameTime = Math.round(1000 / config.fps);
 
   config = {

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

@@ -3,6 +3,7 @@ import Mapper from './Mapper';
 import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
 import { Timestamp, NestedObjectValues } from '../commonTypes';
+import { isJest } from '../PlatformChecker';
 
 export default class JSReanimated extends NativeReanimated {
   _valueSetter?: <T>(value: T) => void = undefined;
@@ -14,8 +15,8 @@ export default class JSReanimated extends NativeReanimated {
 
   constructor() {
     super(false);
-    if (process.env.JEST_WORKER_ID) {
-      this.timeProvider = { now: () => Date.now() };
+    if (isJest()) {
+      this.timeProvider = { now: () => global.ReanimatedDataMock.now() };
     } else {
       this.timeProvider = { now: () => window.performance.now() };
     }
@@ -103,4 +104,26 @@ export default class JSReanimated extends NativeReanimated {
       '[Reanimated] enableLayoutAnimations is not available for WEB yet'
     );
   }
+
+  registerSensor(): number {
+    console.warn('[Reanimated] useAnimatedSensor is not available on web yet.');
+    return -1;
+  }
+
+  unregisterSensor(): void {
+    // noop
+  }
+
+  jestResetModule() {
+    if (isJest()) {
+      /**
+       * If someone used timers to stop animation before the end,
+       * then _renderRequested was set as true
+       * and any new update from another test wasn't applied.
+       */
+      this._renderRequested = false;
+    } else {
+      throw Error('This method can be only use in Jest testing.');
+    }
+  }
 }

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

@@ -20,7 +20,7 @@ if (shouldBeUseWeb()) {
   };
   global._measure = () => {
     console.warn(
-      "[Reanimated] You can't use 'measue' method with Chrome Debugger or with web version"
+      "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"
     );
     return {
       x: 0,
@@ -33,12 +33,12 @@ if (shouldBeUseWeb()) {
   };
   global._scrollTo = () => {
     console.warn(
-      "[Reanimated] You can't use 'scrollTo' method with Chrome Debugger or with web version"
+      "[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version"
     );
   };
   global._setGestureState = () => {
     console.warn(
-      "[Reanimated] You can't use 'setGestureState' method with Chrome Debugger or with web version"
+      "[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version"
     );
   };
 }