react-native-reanimated 2.3.0-beta.4 → 2.4.1

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/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: {},
   };

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

@@ -1,17 +1,22 @@
 import {
   IEntryExitAnimationBuilder,
   EntryExitAnimationFunction,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 import { ComplexAnimationBuilder } from '../animationBuilder';
 
 export class FlipInXUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInXUp {
     return new FlipInXUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -24,7 +29,7 @@ export class FlipInXUp
           transform: [
             { perspective: 500 },
             { rotateX: '90deg' },
-            { translateY: -targetValues.height },
+            { translateY: -targetValues.targetHeight },
           ],
         },
         animations: {
@@ -42,12 +47,12 @@ export class FlipInXUp
 
 export class FlipInYLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInYLeft {
     return new FlipInYLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -60,7 +65,7 @@ export class FlipInYLeft
           transform: [
             { perspective: 500 },
             { rotateY: '-90deg' },
-            { translateX: -targetValues.width },
+            { translateX: -targetValues.targetWidth },
           ],
         },
         animations: {
@@ -78,12 +83,12 @@ export class FlipInYLeft
 
 export class FlipInXDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInXDown {
     return new FlipInXDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -96,7 +101,7 @@ export class FlipInXDown
           transform: [
             { perspective: 500 },
             { rotateX: '-90deg' },
-            { translateY: targetValues.height },
+            { translateY: targetValues.targetHeight },
           ],
         },
         animations: {
@@ -114,12 +119,12 @@ export class FlipInXDown
 
 export class FlipInYRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInYRight {
     return new FlipInYRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -132,7 +137,7 @@ export class FlipInYRight
           transform: [
             { perspective: 500 },
             { rotateY: '90deg' },
-            { translateX: targetValues.width },
+            { translateX: targetValues.targetWidth },
           ],
         },
         animations: {
@@ -212,12 +217,12 @@ export class FlipInEasyY
 
 export class FlipOutXUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutXUp {
     return new FlipOutXUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -240,7 +245,7 @@ export class FlipOutXUp
             {
               translateY: delayFunction(
                 delay,
-                animation(-targetValues.height, config)
+                animation(-targetValues.currentHeight, config)
               ),
             },
           ],
@@ -253,12 +258,12 @@ export class FlipOutXUp
 
 export class FlipOutYLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutYLeft {
     return new FlipOutYLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -281,7 +286,7 @@ export class FlipOutYLeft
             {
               translateX: delayFunction(
                 delay,
-                animation(-targetValues.width, config)
+                animation(-targetValues.currentWidth, config)
               ),
             },
           ],
@@ -294,12 +299,12 @@ export class FlipOutYLeft
 
 export class FlipOutXDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutXDown {
     return new FlipOutXDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -322,7 +327,7 @@ export class FlipOutXDown
             {
               translateY: delayFunction(
                 delay,
-                animation(targetValues.height, config)
+                animation(targetValues.currentHeight, config)
               ),
             },
           ],
@@ -335,12 +340,12 @@ export class FlipOutXDown
 
 export class FlipOutYRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutYRight {
     return new FlipOutYRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -363,7 +368,7 @@ export class FlipOutYRight
             {
               translateX: delayFunction(
                 delay,
-                animation(targetValues.width, config)
+                animation(targetValues.currentWidth, config)
               ),
             },
           ],