react-native-reanimated 2.4.1 → 2.5.0

package/src/reanimated1/derived/interpolate.js

@@ -128,15 +128,13 @@ export default function interpolate(value, config) {
   const right = extrapolateRight || extrapolate;
   let output = interpolateInternal(value, inputRange, outputRange);
 
-  if (left === Extrapolate.EXTEND) {
-  } else if (left === Extrapolate.CLAMP) {
+  if (left === Extrapolate.CLAMP) {
     output = cond(lessThan(value, inputRange[0]), outputRange[0], output);
   } else if (left === Extrapolate.IDENTITY) {
     output = cond(lessThan(value, inputRange[0]), value, output);
   }
 
-  if (right === Extrapolate.EXTEND) {
-  } else if (right === Extrapolate.CLAMP) {
+  if (right === Extrapolate.CLAMP) {
     output = cond(
       greaterThan(value, inputRange[inputRange.length - 1]),
       outputRange[outputRange.length - 1],

package/src/reanimated2/Colors.ts

@@ -64,7 +64,8 @@ function getMatchers(): Matchers {
       'hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)
     );
     cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-    cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+    cachedMatchers.hex4 =
+      /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
     cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
     cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
   }

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -1,31 +1,54 @@
-import { SharedValue } from '../commonTypes';
+import { NativeModules } from 'react-native';
+import {
+  SharedValue,
+  SensorValue3D,
+  SensorValueRotation,
+} from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
-const InnerNativeModule = global.__reanimatedModuleProxy;
-
 export class NativeReanimated {
   native: boolean;
-  useOnlyV1: boolean;
+  private InnerNativeModule: any;
 
   constructor(native = true) {
+    if (global.__reanimatedModuleProxy === undefined) {
+      const { ReanimatedModule } = NativeModules;
+      ReanimatedModule?.installTurboModule();
+    }
+    this.InnerNativeModule = global.__reanimatedModuleProxy;
     this.native = native;
-    this.useOnlyV1 = InnerNativeModule === null;
   }
 
   installCoreFunctions(valueSetter: <T>(value: T) => void): void {
-    return InnerNativeModule.installCoreFunctions(valueSetter);
+    return this.InnerNativeModule.installCoreFunctions(valueSetter);
   }
 
   makeShareable<T>(value: T): T {
-    return InnerNativeModule.makeShareable(value);
+    return this.InnerNativeModule.makeShareable(value);
   }
 
   makeMutable<T>(value: T): SharedValue<T> {
-    return InnerNativeModule.makeMutable(value);
+    return this.InnerNativeModule.makeMutable(value);
   }
 
   makeRemote<T>(object = {}): T {
-    return InnerNativeModule.makeRemote(object);
+    return this.InnerNativeModule.makeRemote(object);
+  }
+
+  registerSensor(
+    sensorType: number,
+    interval: number,
+    sensorData: SensorValue3D | SensorValueRotation
+  ) {
+    return this.InnerNativeModule.registerSensor(
+      sensorType,
+      interval,
+      sensorData
+    );
+  }
+
+  unregisterSensor(sensorId: number) {
+    return this.InnerNativeModule.unregisterSensor(sensorId);
   }
 
   startMapper(
@@ -35,7 +58,7 @@ export class NativeReanimated {
     updater: () => void,
     viewDescriptors: Descriptor[] | SharedValue<Descriptor[]>
   ): number {
-    return InnerNativeModule.startMapper(
+    return this.InnerNativeModule.startMapper(
       mapper,
       inputs,
       outputs,
@@ -45,18 +68,18 @@ export class NativeReanimated {
   }
 
   stopMapper(mapperId: number): void {
-    return InnerNativeModule.stopMapper(mapperId);
+    return this.InnerNativeModule.stopMapper(mapperId);
   }
 
   registerEventHandler<T>(
     eventHash: string,
     eventHandler: (event: T) => void
   ): string {
-    return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+    return this.InnerNativeModule.registerEventHandler(eventHash, eventHandler);
   }
 
   unregisterEventHandler(id: string): void {
-    return InnerNativeModule.unregisterEventHandler(id);
+    return this.InnerNativeModule.unregisterEventHandler(id);
   }
 
   getViewProp<T>(
@@ -64,10 +87,14 @@ export class NativeReanimated {
     propName: string,
     callback?: (result: T) => void
   ): Promise<T> {
-    return InnerNativeModule.getViewProp(viewTag, propName, callback);
+    return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
   }
 
   enableLayoutAnimations(flag: boolean): void {
-    InnerNativeModule.enableLayoutAnimations(flag);
+    this.InnerNativeModule.enableLayoutAnimations(flag);
+  }
+
+  configureProps(uiProps: string[], nativeProps: string[]): void {
+    this.InnerNativeModule.configureProps(uiProps, nativeProps);
   }
 }

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

@@ -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>
     );

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/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,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-const MockDate = require('mockdate');
+import { jestResetJsReanimatedModule } from './core';
 
 let config = {
   fps: 60,
@@ -129,26 +129,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 +178,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/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;