react-native-reanimated 2.3.1 → 2.4.0

package/src/reanimated2/hook/useAnimatedGestureHandler.ts

@@ -1,6 +1,5 @@
 import { MutableRefObject } from 'react';
 import { WorkletFunction } from '../commonTypes';
-import { isWeb } from '../PlatformChecker';
 import WorkletEventHandler from '../WorkletEventHandler';
 import { Context, DependencyList } from './commonTypes';
 import { useEvent, useHandler } from './Hooks';
@@ -98,7 +97,7 @@ export function useAnimatedGestureHandler<
     }
   };
 
-  if (isWeb()) {
+  if (useWeb) {
     return handler;
   }
 

package/src/reanimated2/hook/useAnimatedRef.ts

@@ -1,11 +1,7 @@
 import { Component, useRef } from 'react';
 import { getTag } from '../NativeMethods';
 import { useSharedValue } from './useSharedValue';
-
-export interface RefObjectFunction<T> {
-  current: T | null;
-  (component?: T): number;
-}
+import { RefObjectFunction } from './commonTypes';
 
 export function useAnimatedRef<T extends Component>(): RefObjectFunction<T> {
   const tag = useSharedValue<number | null>(-1);

package/src/reanimated2/hook/useAnimatedStyle.ts

@@ -10,7 +10,7 @@ import {
   makeMutable,
 } from '../core';
 import updateProps, { updatePropsJestWrapper } from '../UpdateProps';
-import { initialUpdaterRun, Timestamp } from '../animation';
+import { initialUpdaterRun } from '../animation';
 import NativeReanimatedModule from '../NativeReanimated';
 import { useSharedValue } from './useSharedValue';
 import {
@@ -31,11 +31,13 @@ import {
   ViewRefSet,
 } from '../ViewDescriptorsSet';
 import { isJest, shouldBeUseWeb } from '../PlatformChecker';
-import { AnimationObject } from '../animation/commonTypes';
 import {
+  AnimationObject,
+  Timestamp,
   AdapterWorkletFunction,
   AnimatedStyle,
   BasicWorkletFunction,
+  BasicWorkletFunctionOptional,
   NestedObjectValues,
   SharedValue,
 } from '../commonTypes';
@@ -259,7 +261,12 @@ function styleUpdater(
   } else {
     state.isAnimationCancelled = true;
     state.animations = [];
-    updateProps(viewDescriptors, newValues, maybeViewRef);
+
+    const diff = styleDiff(oldValues, newValues);
+    state.last = Object.assign({}, oldValues, newValues);
+    if (diff) {
+      updateProps(viewDescriptors, newValues, maybeViewRef);
+    }
   }
 }
 
@@ -446,10 +453,10 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
 
   useEffect(() => {
     let fun;
-    let upadterFn = updater;
+    let updaterFn = updater as BasicWorkletFunctionOptional<T>;
     let optimalization = updater.__optimalization;
     if (adapters) {
-      upadterFn = () => {
+      updaterFn = () => {
         'worklet';
         const newValues = updater();
         adaptersArray.forEach((adapter) => {
@@ -459,26 +466,38 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
       };
     }
 
-    if (canApplyOptimalisation(upadterFn) && !shouldBeUseWeb()) {
-      if (hasColorProps(upadterFn())) {
-        upadterFn = () => {
+    if (canApplyOptimalisation(updaterFn) && !shouldBeUseWeb()) {
+      if (hasColorProps(updaterFn())) {
+        updaterFn = () => {
+          'worklet';
+          const newValues = updaterFn();
+          const oldValues = remoteState.last;
+          const diff = styleDiff<T>(oldValues, newValues);
+          remoteState.last = Object.assign({}, oldValues, newValues);
+          parseColors(diff);
+          return diff;
+        };
+      } else {
+        updaterFn = () => {
           'worklet';
-          const style = upadterFn();
-          parseColors(style);
-          return style;
+          const newValues = updaterFn();
+          const oldValues = remoteState.last;
+          const diff = styleDiff<T>(oldValues, newValues);
+          remoteState.last = Object.assign({}, oldValues, newValues);
+          return diff;
         };
       }
     } else if (!shouldBeUseWeb()) {
       optimalization = 0;
-      upadterFn = () => {
+      updaterFn = () => {
         'worklet';
-        const style = upadterFn();
+        const style = updaterFn();
         parseColors(style);
         return style;
       };
     }
     if (typeof updater.__optimalization !== undefined) {
-      upadterFn.__optimalization = optimalization;
+      updaterFn.__optimalization = optimalization;
     }
 
     if (isJest()) {
@@ -499,7 +518,7 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
         'worklet';
         styleUpdater(
           sharableViewDescriptors,
-          upadterFn,
+          updaterFn,
           remoteState,
           maybeViewRef,
           animationsActive
@@ -510,7 +529,7 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
       fun,
       inputs,
       [],
-      upadterFn,
+      updaterFn,
       // TODO fix this
       sharableViewDescriptors
     );

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;
+      }
     }
   }
 }
@@ -201,33 +206,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/js-reanimated/JSReanimated.ts

@@ -1,15 +1,14 @@
 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';
 
 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 };
 

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/defaultTransitions/EntryExitTransition.ts

@@ -4,9 +4,13 @@ import {
   LayoutAnimationFunction,
 } from '../animationBuilder/commonTypes';
 import { BaseAnimationBuilder } from '../animationBuilder';
-import { AnimationObject, withSequence, withTiming } from '../../animation';
+import { withSequence, withTiming } from '../../animation';
 import { FadeIn, FadeOut } from '../defaultAnimations/Fade';
-import { StyleProps, TransformProperty } from '../../commonTypes';
+import {
+  StyleProps,
+  TransformProperty,
+  AnimationObject,
+} from '../../commonTypes';
 
 export class EntryExitTransition
   extends BaseAnimationBuilder

package/src/reanimated2/utils.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { measure } from './NativeMethods';
-import { RefObjectFunction } from './hook/useAnimatedRef';
+import { RefObjectFunction } from './hook/commonTypes';
 
 export interface ComponentCoords {
   x: number;