react-native-reanimated 2.3.3 → 2.5.0

package/src/reanimated2/hook/utils.ts

@@ -1,5 +1,4 @@
 import { MutableRefObject, useEffect, useRef } from 'react';
-import { AnimationObject } from '../animation';
 import { processColor } from '../Colors';
 import {
   AnimatedStyle,
@@ -7,9 +6,10 @@ import {
   NestedObjectValues,
   StyleProps,
   WorkletFunction,
+  AnimationObject,
 } from '../commonTypes';
 import { makeRemote } from '../core';
-import { isWeb } from '../PlatformChecker';
+import { isWeb, isJest } from '../PlatformChecker';
 import { colorProps } from '../UpdateProps';
 import WorkletEventHandler from '../WorkletEventHandler';
 import {
@@ -80,7 +80,7 @@ export function useHandler<T, TContext extends Context>(
     savedDependencies
   );
   initRef.current.savedDependencies = dependencies;
-  const useWeb = isWeb();
+  const useWeb = isWeb() || isJest();
 
   return { context, doDependenciesDiffer, useWeb };
 }
@@ -163,7 +163,12 @@ export function parseColors(updates: AnimatedStyle): void {
   'worklet';
   for (const key in updates) {
     if (colorProps.indexOf(key) !== -1) {
-      updates[key] = processColor(updates[key]);
+      // value could be an animation in which case processColor will recognize it and will return undefined
+      // -> in such a case we don't want to override style of that key
+      const processedColor = processColor(updates[key]);
+      if (processedColor !== undefined) {
+        updates[key] = processedColor;
+      }
     }
   }
 }
@@ -182,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);
@@ -201,33 +207,29 @@ export function isAnimated(prop: NestedObjectValues<AnimationObject>): boolean {
   return false;
 }
 
-export function styleDiff(
+export function styleDiff<T extends AnimatedStyle>(
   oldStyle: AnimatedStyle,
   newStyle: AnimatedStyle
-): AnimatedStyle {
+): Partial<T> {
   'worklet';
-  const diff: AnimatedStyle = {};
-  Object.keys(oldStyle).forEach((key) => {
+  const diff: any = {};
+  for (const key in oldStyle) {
     if (newStyle[key] === undefined) {
       diff[key] = null;
     }
-  });
-  Object.keys(newStyle).forEach((key) => {
+  }
+  for (const key in newStyle) {
     const value = newStyle[key];
     const oldValue = oldStyle[key];
 
     if (isAnimated(value)) {
       // do nothing
-      return;
+      continue;
     }
-    if (
-      oldValue !== value &&
-      JSON.stringify(oldValue) !== JSON.stringify(value)
-    ) {
-      // I'd use deep equal here but that'd take additional work and this was easier
+    if (oldValue !== value) {
       diff[key] = value;
     }
-  });
+  }
   return diff;
 }
 

package/src/reanimated2/index.ts

@@ -2,9 +2,11 @@ export * from './core';
 export * from './hook';
 export * from './animation';
 export * from './interpolation';
+export * from './interpolateColor';
 export * from './Easing';
 export * from './NativeMethods';
 export * from './Colors';
 export * from './PropAdapters';
 export * from './layoutReanimation';
 export * from './utils';
+export * from './commonTypes';

package/src/reanimated2/interpolateColor.ts

@@ -0,0 +1,178 @@
+import {
+  hsvToColor,
+  RGBtoHSV,
+  rgbaColor,
+  processColor,
+  red,
+  green,
+  blue,
+  opacity,
+} from './Colors';
+import { makeMutable } from './core';
+import { interpolate } from './interpolation';
+// @ts-ignore JS file
+import { Extrapolate } from '../reanimated1/derived';
+import { SharedValue } from './commonTypes';
+import { useSharedValue } from './hook/useSharedValue';
+
+const interpolateColorsHSV = (
+  value: number,
+  inputRange: readonly number[],
+  colors: InterpolateHSV
+) => {
+  'worklet';
+  const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP);
+  const s = interpolate(value, inputRange, colors.s, Extrapolate.CLAMP);
+  const v = interpolate(value, inputRange, colors.v, Extrapolate.CLAMP);
+  return hsvToColor(h, s, v);
+};
+
+const interpolateColorsRGB = (
+  value: number,
+  inputRange: readonly number[],
+  colors: InterpolateRGB
+) => {
+  'worklet';
+  const r = interpolate(value, inputRange, colors.r, Extrapolate.CLAMP);
+  const g = interpolate(value, inputRange, colors.g, Extrapolate.CLAMP);
+  const b = interpolate(value, inputRange, colors.b, Extrapolate.CLAMP);
+  const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
+  return rgbaColor(r, g, b, a);
+};
+
+interface InterpolateRGB {
+  r: number[];
+  g: number[];
+  b: number[];
+  a: number[];
+}
+
+const getInterpolateRGB = (
+  colors: readonly (string | number)[]
+): InterpolateRGB => {
+  'worklet';
+
+  const r = [];
+  const g = [];
+  const b = [];
+  const a = [];
+  for (let i = 0; i < colors.length; ++i) {
+    const color = colors[i];
+    const proocessedColor = 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));
+    }
+  }
+  return { r, g, b, a };
+};
+
+interface InterpolateHSV {
+  h: number[];
+  s: number[];
+  v: number[];
+}
+
+const getInterpolateHSV = (
+  colors: readonly (string | number)[]
+): InterpolateHSV => {
+  'worklet';
+  const h = [];
+  const s = [];
+  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);
+    }
+  }
+  return { h, s, v };
+};
+
+export const interpolateColor = (
+  value: number,
+  inputRange: readonly number[],
+  outputRange: readonly (string | number)[],
+  colorSpace: 'RGB' | 'HSV' = 'RGB'
+): string | number => {
+  'worklet';
+  if (colorSpace === 'HSV') {
+    return interpolateColorsHSV(
+      value,
+      inputRange,
+      getInterpolateHSV(outputRange)
+    );
+  } else if (colorSpace === 'RGB') {
+    return interpolateColorsRGB(
+      value,
+      inputRange,
+      getInterpolateRGB(outputRange)
+    );
+  }
+  throw new Error(
+    `Invalid color space provided: ${colorSpace}. Supported values are: ['RGB', 'HSV']`
+  );
+};
+
+export enum ColorSpace {
+  RGB = 0,
+  HSV = 1,
+}
+
+export interface InterpolateConfig {
+  inputRange: readonly number[];
+  outputRange: readonly (string | number)[];
+  colorSpace: ColorSpace;
+  cache: SharedValue<InterpolateRGB | InterpolateHSV | null>;
+}
+
+export function useInterpolateConfig(
+  inputRange: readonly number[],
+  outputRange: readonly (string | number)[],
+  colorSpace = ColorSpace.RGB
+): SharedValue<InterpolateConfig> {
+  return useSharedValue({
+    inputRange,
+    outputRange,
+    colorSpace,
+    cache: makeMutable(null),
+  });
+}
+
+export const interpolateSharableColor = (
+  value: number,
+  interpolateConfig: SharedValue<InterpolateConfig>
+): string | number => {
+  'worklet';
+  let colors = interpolateConfig.value.cache.value;
+  if (interpolateConfig.value.colorSpace === ColorSpace.RGB) {
+    if (!colors) {
+      colors = getInterpolateRGB(interpolateConfig.value.outputRange);
+      interpolateConfig.value.cache.value = colors;
+    }
+    return interpolateColorsRGB(
+      value,
+      interpolateConfig.value.inputRange,
+      colors as InterpolateRGB
+    );
+  } else if (interpolateConfig.value.colorSpace === ColorSpace.HSV) {
+    if (!colors) {
+      colors = getInterpolateHSV(interpolateConfig.value.outputRange);
+      interpolateConfig.value.cache.value = colors;
+    }
+    return interpolateColorsHSV(
+      value,
+      interpolateConfig.value.inputRange,
+      colors as InterpolateHSV
+    );
+  }
+  throw new Error(
+    `Invalid color space provided: ${interpolateConfig.value.colorSpace}. Supported values are: ['RGB', 'HSV']`
+  );
+};

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

@@ -1,22 +1,22 @@
 import MapperRegistry from './MapperRegistry';
-import MutableValue from './MutableValue';
 import Mapper from './Mapper';
+import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
-import { Timestamp } from '../animation/commonTypes';
-import { NestedObjectValues } from '../commonTypes';
+import { Timestamp, NestedObjectValues } from '../commonTypes';
+import { isJest } from '../PlatformChecker';
 
 export default class JSReanimated extends NativeReanimated {
   _valueSetter?: <T>(value: T) => void = undefined;
 
   _renderRequested = false;
-  _mapperRegistry = new MapperRegistry(this);
+  _mapperRegistry: MapperRegistry<any> = new MapperRegistry(this);
   _frames: ((timestamp: Timestamp) => void)[] = [];
   timeProvider: { now: () => number };
 
   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() };
     }
@@ -104,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/Mapper.ts

@@ -1,5 +1,5 @@
 import { NestedObjectValues } from '../commonTypes';
-import JSReanimated from './JSReanimated';
+import { JSReanimated } from './commonTypes';
 import MutableValue from './MutableValue';
 
 export default class Mapper<T> {

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

@@ -1,4 +1,4 @@
-import JSReanimated from './JSReanimated';
+import { JSReanimated } from './commonTypes';
 import Mapper from './Mapper';
 
 export default class MapperRegistry<T> {

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

@@ -0,0 +1,51 @@
+import { Timestamp, NestedObjectValues } from '../commonTypes';
+import MutableValue from './MutableValue';
+
+export interface Mapper<T> {
+  MAPPER_ID?: number;
+  id: number;
+  inputs: MutableValue<T>[];
+  outputs: MutableValue<T>[];
+  mapper: () => void;
+  dirty: boolean;
+  execute(): void;
+  extractMutablesFromArray<T>(
+    array: NestedObjectValues<MutableValue<T>>
+  ): MutableValue<T>[];
+}
+
+export interface MapperRegistry<T> {
+  sortedMappers: Mapper<T>[];
+  mappers: Map<number, Mapper<T>>;
+  _module: JSReanimated;
+  updatedSinceLastExecute: boolean;
+  startMapper(mapper: Mapper<T>): number;
+  stopMapper(id: number): void;
+  execute(): void;
+  updateOrder(): void;
+}
+
+export interface JSReanimated {
+  _valueSetter?: <T>(value: T) => void;
+  _renderRequested: boolean;
+  _mapperRegistry: MapperRegistry<any>;
+  _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;
+  makeShareable<T>(value: T): T;
+  makeMutable<T>(value: T): MutableValue<T>;
+  makeRemote<T>(object: Record<string, any>): T;
+  startMapper(
+    mapper: () => void,
+    inputs: NestedObjectValues<MutableValue<unknown>>[],
+    outputs: NestedObjectValues<MutableValue<unknown>>[]
+  ): number;
+  stopMapper(mapperId: number): void;
+  registerEventHandler<T>(_: string, __: (event: T) => void): string;
+  unregisterEventHandler(_: string): void;
+  enableLayoutAnimations(): void;
+}

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 {