react-native-reanimated 2.3.0-beta.3 → 2.4.0

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 };
 
@@ -98,4 +97,10 @@ export default class JSReanimated extends NativeReanimated {
   unregisterEventHandler(_: string): void {
     // noop
   }
+
+  enableLayoutAnimations() {
+    console.warn(
+      '[Reanimated] enableLayoutAnimations is not available for WEB yet'
+    );
+  }
 }

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> {
@@ -43,7 +43,9 @@ export default class Mapper<T> {
     const res: MutableValue<T>[] = [];
 
     function extractMutables(value: NestedObjectValues<MutableValue<T>>) {
-      if (value instanceof MutableValue) {
+      if (value == null) {
+        // return;
+      } else if (value instanceof MutableValue) {
         res.push(value);
       } else if (Array.isArray(value)) {
         value.forEach((v) => extractMutables(v));

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/js-reanimated/index.ts

@@ -36,6 +36,11 @@ if (shouldBeUseWeb()) {
       "[Reanimated] You can't use 'scrollTo' method 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"
+    );
+  };
 }
 
 export const _updatePropsJS = (

package/src/reanimated2/layoutReanimation/LayoutAnimationRepository.ts

@@ -1,6 +1,8 @@
 /* global _stopObservingProgress, _startObservingProgress */
 import { runOnUI } from '../core';
 import { withStyleAnimation } from '../animation/styleAnimation';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 
 runOnUI(() => {
   'worklet';
@@ -36,13 +38,22 @@ runOnUI(() => {
         for (const key in layoutAnimation) {
           currentAnimation[key] = layoutAnimation[key];
         }
-        enteringAnimationForTag[tag] = null;
       }
 
       const sv: { value: boolean; _value: boolean } = configs[tag].sv;
       _stopObservingProgress(tag, false);
       _startObservingProgress(tag, sv);
-      sv._value = Object.assign({}, sv._value, style.initialValues);
+
+      const backupColor: Record<string, string> = {};
+      for (const key in style.initialValues) {
+        if (ColorProperties.includes(key)) {
+          const value = style.initialValues[key];
+          backupColor[key] = value;
+          style.initialValues[key] = processColor(value);
+        }
+      }
+
+      sv.value = Object.assign({}, sv._value, style.initialValues);
       _stopObservingProgress(tag, false);
       const animation = withStyleAnimation(currentAnimation);
 
@@ -51,10 +62,12 @@ runOnUI(() => {
           _stopObservingProgress(tag, finished);
         }
         style.callback && style.callback(finished);
-        if (type === 'entering') {
-          enteringAnimationForTag[tag] = null;
-        }
       };
+
+      if (backupColor) {
+        configs[tag].sv._value = { ...configs[tag].sv.value, ...backupColor };
+      }
+
       configs[tag].sv.value = animation;
       _startObservingProgress(tag, sv);
     },

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

@@ -14,32 +14,43 @@ export type LayoutAnimation = {
 
 export type AnimationFunction = (a?: any, b?: any, c?: any) => any; // this is just a temporary mock
 
-export interface EntryExitAnimationsValues {
-  originX: number;
-  originY: number;
-  width: number;
-  height: number;
-  globalOriginX: number;
-  globalOriginY: number;
+export interface EntryAnimationsValues {
+  targetOriginX: number;
+  targetOriginY: number;
+  targetWidth: number;
+  targetHeight: number;
+  targetGlobalOriginX: number;
+  targetGlobalOriginY: number;
+}
+
+export interface ExitAnimationsValues {
+  currentOriginX: number;
+  currentOriginY: number;
+  currentWidth: number;
+  currentHeight: number;
+  currentGlobalOriginX: number;
+  currentGlobalOriginY: number;
 }
 
 export type EntryExitAnimationFunction = (
-  targetValues: EntryExitAnimationsValues
+  targetValues: EntryAnimationsValues | ExitAnimationsValues
 ) => LayoutAnimation;
 
+export type AnimationConfigFunction<T> = (targetValues: T) => LayoutAnimation;
+
 export interface LayoutAnimationsValues {
-  originX: number;
-  originY: number;
-  width: number;
-  height: number;
-  globalOriginX: number;
-  globalOriginY: number;
-  boriginX: number;
-  boriginY: number;
-  bwidth: number;
-  bheight: number;
-  bglobalOriginX: number;
-  bglobalOriginY: number;
+  currentOriginX: number;
+  currentOriginY: number;
+  currentWidth: number;
+  currentHeight: number;
+  currentGlobalOriginX: number;
+  currentGlobalOriginY: number;
+  targetOriginX: number;
+  targetOriginY: number;
+  targetWidth: number;
+  targetHeight: number;
+  targetGlobalOriginX: number;
+  targetGlobalOriginY: number;
   windowWidth: number;
   windowHeight: number;
 }
@@ -76,3 +87,11 @@ export type LayoutAnimationAndConfig = [
 export interface IEntryExitAnimationBuilder {
   build: () => EntryExitAnimationFunction;
 }
+
+export interface IEntryAnimationBuilder {
+  build: () => AnimationConfigFunction<EntryAnimationsValues>;
+}
+
+export interface IExitAnimationBuilder {
+  build: () => AnimationConfigFunction<ExitAnimationsValues>;
+}

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

@@ -4,8 +4,12 @@ export { Keyframe } from './Keyframe';
 export {
   LayoutAnimation,
   AnimationFunction,
-  EntryExitAnimationsValues,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
   EntryExitAnimationFunction,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
   LayoutAnimationsValues,
   LayoutAnimationFunction,
   ILayoutAnimationBuilder,

package/src/reanimated2/layoutReanimation/defaultAnimations/Default.ts

@@ -1,42 +1,48 @@
 import {
   LayoutAnimationFunction,
-  EntryExitAnimationFunction,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
 } from '../animationBuilder/commonTypes';
 
 export const DefaultLayout: LayoutAnimationFunction = (values) => {
   'worklet';
   return {
     initialValues: {
-      originX: values.originX,
-      originY: values.originY,
-      width: values.width,
-      height: values.height,
+      originX: values.targetOriginX,
+      originY: values.targetOriginY,
+      width: values.targetWidth,
+      height: values.targetHeight,
     },
     animations: {},
   };
 };
 
-export const DefaultEntering: EntryExitAnimationFunction = (targetValues) => {
+export const DefaultEntering: AnimationConfigFunction<EntryAnimationsValues> = (
+  values
+) => {
   'worklet';
   return {
     initialValues: {
-      originX: targetValues.originX,
-      originY: targetValues.originY,
-      width: targetValues.width,
-      height: targetValues.height,
+      originX: values.targetOriginX,
+      originY: values.targetOriginY,
+      width: values.targetWidth,
+      height: values.targetHeight,
     },
     animations: {},
   };
 };
 
-export const DefaultExiting: EntryExitAnimationFunction = (startValues) => {
+export const DefaultExiting: AnimationConfigFunction<ExitAnimationsValues> = (
+  values
+) => {
   'worklet';
   return {
     initialValues: {
-      originX: startValues.originX,
-      originY: startValues.originY,
-      width: startValues.width,
-      height: startValues.height,
+      originX: values.currentOriginX,
+      originY: values.currentOriginY,
+      width: values.currentWidth,
+      height: values.currentHeight,
     },
     animations: {},
   };