react-native-reanimated 2.4.0 → 2.6.0

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

@@ -126,3 +126,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

@@ -63,7 +63,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 = () => {
@@ -362,32 +362,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 +416,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

@@ -27,6 +27,9 @@ declare global {
     animated: boolean
   ) => void;
   const _chronoNow: () => number;
+  const ReanimatedDataMock: {
+    now: () => number;
+  };
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
@@ -50,6 +53,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"
     );
   };
 }

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

@@ -6,6 +6,8 @@ import {
 } from './commonTypes';
 import { EasingFn } from '../../Easing';
 import { BaseAnimationBuilder } from './BaseAnimationBuilder';
+import { StyleProps } from '../../commonTypes';
+
 export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   easingV?: EasingFn;
   rotateV?: string;
@@ -16,6 +18,7 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   overshootClampingV?: number;
   restDisplacementThresholdV?: number;
   restSpeedThresholdV?: number;
+  initialValues?: StyleProps;
 
   static createInstance: () => ComplexAnimationBuilder;
 
@@ -115,6 +118,16 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  static withInitialValues(values: StyleProps): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.withInitialValues(values);
+  }
+
+  withInitialValues(values: StyleProps): BaseAnimationBuilder {
+    this.initialValues = values;
+    return this;
+  }
+
   getAnimationAndConfig(): LayoutAnimationAndConfig {
     const duration = this.durationV;
     const easing = this.easingV;

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

@@ -74,9 +74,8 @@ export class Keyframe implements IEntryExitAnimationBuilder {
       if (styleProp === 'transform') {
         initialValues[styleProp]?.forEach((transformStyle, index) => {
           Object.keys(transformStyle).forEach((transformProp: string) => {
-            parsedKeyframes[
-              index.toString() + '_transform:' + transformProp
-            ] = [];
+            parsedKeyframes[index.toString() + '_transform:' + transformProp] =
+              [];
           });
         });
       } else {