react-native-reanimated 2.3.1 → 2.4.0

package/src/reanimated2/Colors.ts

@@ -9,11 +9,8 @@
 /* eslint no-bitwise: 0 */
 import { Platform } from 'react-native';
 import { makeRemote, makeShareable, isConfigured } from './core';
-import { interpolate } from './interpolation';
-// @ts-ignore JS file
-import { Extrapolate } from '../reanimated1/derived';
 
-interface RBG {
+interface RGB {
   r: number;
   g: number;
   b: number;
@@ -475,9 +472,9 @@ export const rgbaColor = (
  * 0 <= r, g, b <= 255
  * returns 0 <= h, s, v <= 1
  */
-function RGBtoHSV(rgb: RBG): HSV;
-function RGBtoHSV(r: number, g: number, b: number): HSV;
-function RGBtoHSV(r: any, g?: any, b?: any): HSV {
+export function RGBtoHSV(rgb: RGB): HSV;
+export function RGBtoHSV(r: number, g: number, b: number): HSV;
+export function RGBtoHSV(r: any, g?: any, b?: any): HSV {
   'worklet';
   /* eslint-disable */
   if (arguments.length === 1) {
@@ -528,8 +525,8 @@ function RGBtoHSV(r: any, g?: any, b?: any): HSV {
  * 0 <= h, s, v <= 1
  * returns 0 <= r, g, b <= 255
  */
-function HSVtoRGB(hsv: HSV): RBG;
-function HSVtoRGB(h: number, s: number, v: number): RBG;
+function HSVtoRGB(hsv: HSV): RGB;
+function HSVtoRGB(h: number, s: number, v: number): RGB;
 function HSVtoRGB(h: any, s?: any, v?: any) {
   'worklet';
   /* eslint-disable */
@@ -652,144 +649,3 @@ export function toRGBA(HSVA: ParsedColorArray): string {
   const { r, g, b } = HSVtoRGB(HSVA[0], HSVA[1], HSVA[2]);
   return `rgba(${r}, ${g}, ${b}, ${HSVA[3]})`;
 }
-
-const interpolateColorsHSV = (
-  value: number,
-  inputRange: readonly number[],
-  colors: InterpolateCacheHSV
-) => {
-  '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: InterpolateCacheRGBA
-) => {
-  '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 InterpolateCacheRGBA {
-  r: number[];
-  g: number[];
-  b: number[];
-  a: number[];
-}
-
-const BUFFER_SIZE = 200;
-const hashOrderRGBA: any = new ArrayBuffer(BUFFER_SIZE);
-let curentHashIndexRGBA = 0;
-const interpolateCacheRGBA: { [name: string]: InterpolateCacheRGBA } = {};
-
-const getInterpolateCacheRGBA = (
-  colors: readonly (string | number)[]
-): InterpolateCacheRGBA => {
-  'worklet';
-  const hash = colors.join('');
-  const cache = interpolateCacheRGBA[hash];
-  if (cache !== undefined) {
-    return cache;
-  }
-
-  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));
-    }
-  }
-  const newCache = { r, g, b, a };
-  const overrideHash = hashOrderRGBA[curentHashIndexRGBA];
-  if (overrideHash) {
-    delete interpolateCacheRGBA[overrideHash];
-  }
-  interpolateCacheRGBA[hash] = newCache;
-  hashOrderRGBA[curentHashIndexRGBA] = hash;
-  curentHashIndexRGBA = (curentHashIndexRGBA + 1) % BUFFER_SIZE;
-  return newCache;
-};
-
-interface InterpolateCacheHSV {
-  h: number[];
-  s: number[];
-  v: number[];
-}
-
-const hashOrderHSV: any = new ArrayBuffer(BUFFER_SIZE);
-let curentHashIndexHSV = 0;
-const interpolateCacheHSV: { [name: string]: InterpolateCacheHSV } = {};
-
-const getInterpolateCacheHSV = (
-  colors: readonly (string | number)[]
-): InterpolateCacheHSV => {
-  'worklet';
-  const hash = colors.join('');
-  const cache = interpolateCacheHSV[hash];
-  if (cache !== undefined) {
-    return cache;
-  }
-
-  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);
-    }
-  }
-  const newCache = { h, s, v };
-  const overrideHash = hashOrderHSV[curentHashIndexHSV];
-  if (overrideHash) {
-    delete interpolateCacheHSV[overrideHash];
-  }
-  interpolateCacheHSV[hash] = newCache;
-  hashOrderHSV[curentHashIndexHSV] = hash;
-  curentHashIndexHSV = (curentHashIndexHSV + 1) % BUFFER_SIZE;
-  return newCache;
-};
-
-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,
-      getInterpolateCacheHSV(outputRange)
-    );
-  } else if (colorSpace === 'RGB') {
-    return interpolateColorsRGB(
-      value,
-      inputRange,
-      getInterpolateCacheRGBA(outputRange)
-    );
-  }
-  throw new Error(
-    `invalid color space provided: ${colorSpace}. Supported values are: ['RGB', 'HSV']`
-  );
-};

package/src/reanimated2/Easing.ts

@@ -221,6 +221,16 @@ function bezier(
   };
 }
 
+function bezierFn(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+): (x: number) => number {
+  'worklet';
+  return Bezier(x1, y1, x2, y2);
+}
+
 /**
  * Runs an easing function forwards.
  */
@@ -269,6 +279,7 @@ const EasingObject = {
   back,
   bounce,
   bezier,
+  bezierFn,
   in: in_,
   out,
   inOut,

package/src/reanimated2/NativeMethods.ts

@@ -3,8 +3,8 @@
 // @ts-nocheck
 import { Component } from 'react';
 import { findNodeHandle } from 'react-native';
-import { RefObjectFunction } from './hook/useAnimatedRef';
-import { isChromeDebugger } from './PlatformChecker';
+import { RefObjectFunction } from './commonTypes';
+import { shouldBeUseWeb } from './PlatformChecker';
 
 export function getTag(
   view: null | number | React.Component<any, any> | React.ComponentClass<any>
@@ -21,12 +21,24 @@ export interface MeasuredDimensions {
   pageY: number;
 }
 
+const isNativeIndefined = shouldBeUseWeb();
+
 export function measure(
   animatedRef: RefObjectFunction<Component>
 ): MeasuredDimensions {
   'worklet';
-  if (!_WORKLET && !isChromeDebugger()) {
-    throw new Error('(measure) method cannot be used on RN side!');
+  if (!_WORKLET || isNativeIndefined) {
+    console.warn(
+      '[reanimated.measure] method cannot be used for web or Chrome Debugger'
+    );
+    return {
+      x: NaN,
+      y: NaN,
+      width: NaN,
+      height: NaN,
+      pageX: NaN,
+      pageY: NaN,
+    };
   }
   const viewTag = animatedRef();
   const result = _measure(viewTag);
@@ -43,7 +55,7 @@ export function scrollTo(
   animated: boolean
 ): void {
   'worklet';
-  if (!_WORKLET && !isChromeDebugger()) {
+  if (!_WORKLET || isNativeIndefined) {
     return;
   }
   const viewTag = animatedRef();
@@ -52,10 +64,11 @@ export function scrollTo(
 
 export function setGestureState(handlerTag: number, newState: number): void {
   'worklet';
-  if (!_WORKLET && !isChromeDebugger()) {
+  if (!_WORKLET || isNativeIndefined) {
     console.warn(
       '[Reanimated] You can not use setGestureState in non-worklet function.'
     );
+    return;
   }
   _setGestureState(handlerTag, newState);
 }

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -2,6 +2,7 @@ import { SharedValue } from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
 const InnerNativeModule = global.__reanimatedModuleProxy;
+
 export class NativeReanimated {
   native: boolean;
   useOnlyV1: boolean;

package/src/reanimated2/NativeReanimated/index.ts

@@ -1,10 +1,10 @@
 import reanimatedJS from '../js-reanimated';
-import { nativeShouldBeMock } from '../PlatformChecker';
+import { shouldBeUseWeb } from '../PlatformChecker';
 import { Platform } from 'react-native';
 import { NativeReanimated } from './NativeReanimated';
 
 let exportedModule;
-if (nativeShouldBeMock()) {
+if (shouldBeUseWeb()) {
   exportedModule = reanimatedJS;
 } else {
   exportedModule = new NativeReanimated();

package/src/reanimated2/animation/commonTypes.ts

@@ -1,48 +1,52 @@
-export type AnimatableValue = number | string | Array<number>;
+import {
+  AnimatedStyle,
+  StyleProps,
+  AnimatableValue,
+  AnimationObject,
+  Animation,
+  Timestamp,
+  AnimationCallback,
+} from '../commonTypes';
 
-export interface AnimationObject {
-  [key: string]: any;
-  callback: AnimationCallback;
-  current?: AnimatableValue;
-  toValue?: AnimationObject['current'];
-  startValue?: AnimationObject['current'];
-  finished?: boolean;
-  strippedCurrent?: number;
-  cancelled?: boolean;
-
-  __prefix?: string;
-  __suffix?: string;
-  onFrame: (animation: any, timestamp: Timestamp) => boolean;
-  onStart: (
-    nextAnimation: any,
-    current: any,
-    timestamp: Timestamp,
-    previousAnimation: any
-  ) => void;
+export interface HigherOrderAnimation {
+  isHigherOrder?: boolean;
 }
 
-export interface Animation<T extends AnimationObject> extends AnimationObject {
-  onFrame: (animation: T, timestamp: Timestamp) => boolean;
-  onStart: (
-    nextAnimation: T,
-    current: T extends NumericAnimation ? number : AnimatableValue,
-    timestamp: Timestamp,
-    previousAnimation: T
-  ) => void;
-}
+export type NextAnimation<T extends AnimationObject> = T | (() => T);
 
-export interface NumericAnimation {
-  current?: number;
-}
-export interface HigherOrderAnimation {
-  isHigherOrder?: boolean;
+export interface DelayAnimation
+  extends Animation<DelayAnimation>,
+    HigherOrderAnimation {
+  startTime: Timestamp;
+  started: boolean;
+  previousAnimation: DelayAnimation | null;
+  current: AnimatableValue;
 }
 
-export type AnimationCallback = (
-  finished?: boolean,
-  current?: AnimatableValue
-) => void;
+export interface RepeatAnimation
+  extends Animation<RepeatAnimation>,
+    HigherOrderAnimation {
+  reps: number;
+  startValue: AnimatableValue;
+  toValue?: AnimatableValue;
+  previousAnimation?: RepeatAnimation;
+}
 
-export type NextAnimation<T extends AnimationObject> = T | (() => T);
+export interface SequenceAnimation
+  extends Animation<SequenceAnimation>,
+    HigherOrderAnimation {
+  animationIndex: number;
+}
 
-export type Timestamp = number;
+export interface StyleLayoutAnimation extends HigherOrderAnimation {
+  current: StyleProps;
+  styleAnimations: AnimatedStyle;
+  onFrame: (animation: StyleLayoutAnimation, timestamp: Timestamp) => boolean;
+  onStart: (
+    nextAnimation: StyleLayoutAnimation,
+    current: AnimatedStyle,
+    timestamp: Timestamp,
+    previousAnimation: StyleLayoutAnimation
+  ) => void;
+  callback?: AnimationCallback;
+}

package/src/reanimated2/animation/decay.ts

@@ -5,7 +5,7 @@ import {
   AnimationObject,
   AnimatableValue,
   Timestamp,
-} from './commonTypes';
+} from '../commonTypes';
 import { Platform } from 'react-native';
 
 interface DecayConfig {

package/src/reanimated2/animation/delay.ts

@@ -1,20 +1,6 @@
 import { defineAnimation } from './util';
-import {
-  Animation,
-  NextAnimation,
-  Timestamp,
-  HigherOrderAnimation,
-  AnimatableValue,
-} from './commonTypes';
-
-export interface DelayAnimation
-  extends Animation<DelayAnimation>,
-    HigherOrderAnimation {
-  startTime: Timestamp;
-  started: boolean;
-  previousAnimation: DelayAnimation | null;
-  current: AnimatableValue;
-}
+import { Animation, Timestamp, AnimatableValue } from '../commonTypes';
+import { NextAnimation, DelayAnimation } from './commonTypes';
 
 export function withDelay(
   delayMs: number,

package/src/reanimated2/animation/index.ts

@@ -1,16 +1,15 @@
 export {
-  AnimationObject,
-  Animation,
   HigherOrderAnimation,
-  AnimationCallback,
   NextAnimation,
-  Timestamp,
+  RepeatAnimation,
+  SequenceAnimation,
+  StyleLayoutAnimation,
 } from './commonTypes';
 export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util';
 export { withTiming, TimingAnimation } from './timing';
 export { withSpring, SpringAnimation } from './spring';
 export { withDecay, DecayAnimation } from './decay';
-export { withDelay, DelayAnimation } from './delay';
-export { withRepeat, RepeatAnimation } from './repeat';
-export { withSequence, SequenceAnimation } from './sequence';
-export { withStyleAnimation, StyleLayoutAnimation } from './styleAnimation';
+export { withDelay } from './delay';
+export { withRepeat } from './repeat';
+export { withSequence } from './sequence';
+export { withStyleAnimation } from './styleAnimation';

package/src/reanimated2/animation/repeat.ts

@@ -2,20 +2,10 @@ import { defineAnimation } from './util';
 import {
   Animation,
   AnimationCallback,
-  NextAnimation,
   AnimatableValue,
   Timestamp,
-  HigherOrderAnimation,
-} from './commonTypes';
-
-export interface RepeatAnimation
-  extends Animation<RepeatAnimation>,
-    HigherOrderAnimation {
-  reps: number;
-  startValue: AnimatableValue;
-  toValue?: AnimatableValue;
-  previousAnimation?: RepeatAnimation;
-}
+} from '../commonTypes';
+import { NextAnimation, RepeatAnimation } from './commonTypes';
 
 export interface InnerRepeatAnimation
   extends Omit<RepeatAnimation, 'toValue' | 'startValue'> {

package/src/reanimated2/animation/sequence.ts

@@ -1,18 +1,11 @@
 import { defineAnimation } from './util';
+import { NextAnimation, SequenceAnimation } from './commonTypes';
 import {
   Animation,
-  Timestamp,
-  NextAnimation,
   AnimatableValue,
-  HigherOrderAnimation,
   AnimationObject,
-} from './commonTypes';
-
-export interface SequenceAnimation
-  extends Animation<SequenceAnimation>,
-    HigherOrderAnimation {
-  animationIndex: number;
-}
+  Timestamp,
+} from '../commonTypes';
 
 export function withSequence(
   ..._animations: NextAnimation<AnimationObject>[]

package/src/reanimated2/animation/spring.ts

@@ -4,7 +4,7 @@ import {
   AnimationCallback,
   AnimatableValue,
   Timestamp,
-} from './commonTypes';
+} from '../commonTypes';
 
 interface SpringConfig {
   mass?: number;

package/src/reanimated2/animation/styleAnimation.ts

@@ -1,35 +1,18 @@
 import { defineAnimation } from './util';
 import {
   Timestamp,
-  HigherOrderAnimation,
-  AnimationCallback,
   AnimatableValue,
   AnimationObject,
   Animation,
-} from './commonTypes';
-import {
   AnimatedStyle,
   NestedObject,
   NestedObjectValues,
-  StyleProps,
 } from '../commonTypes';
+import { StyleLayoutAnimation } from './commonTypes';
 import { withTiming } from './timing';
 import { ColorProperties } from '../UpdateProps';
 import { processColor } from '../Colors';
 
-export interface StyleLayoutAnimation extends HigherOrderAnimation {
-  current: StyleProps;
-  styleAnimations: AnimatedStyle;
-  onFrame: (animation: StyleLayoutAnimation, timestamp: Timestamp) => boolean;
-  onStart: (
-    nextAnimation: StyleLayoutAnimation,
-    current: AnimatedStyle,
-    timestamp: Timestamp,
-    previousAnimation: StyleLayoutAnimation
-  ) => void;
-  callback?: AnimationCallback;
-}
-
 // resolves path to value for nested objects
 // if path cannot be resolved returns undefined
 export function resolvePath<T>(

package/src/reanimated2/animation/timing.ts

@@ -5,7 +5,7 @@ import {
   AnimationCallback,
   Timestamp,
   AnimatableValue,
-} from './commonTypes';
+} from '../commonTypes';
 
 interface TimingConfig {
   duration?: number;

package/src/reanimated2/animation/util.ts

@@ -1,20 +1,23 @@
 import {
-  Animation,
-  AnimationObject,
   HigherOrderAnimation,
   NextAnimation,
-  AnimatableValue,
-  Timestamp,
+  DelayAnimation,
+  RepeatAnimation,
+  SequenceAnimation,
+  StyleLayoutAnimation,
 } from './commonTypes';
 /* global _WORKLET */
 import { ParsedColorArray, convertToHSVA, isColor, toRGBA } from '../Colors';
 
-import { AnimatedStyle, SharedValue } from '../commonTypes';
-import { DelayAnimation } from './delay';
+import {
+  AnimatedStyle,
+  SharedValue,
+  AnimatableValue,
+  Animation,
+  AnimationObject,
+  Timestamp,
+} from '../commonTypes';
 import NativeReanimatedModule from '../NativeReanimated';
-import { RepeatAnimation } from './repeat';
-import { SequenceAnimation } from './sequence';
-import { StyleLayoutAnimation } from './styleAnimation';
 
 let IN_STYLE_UPDATER = false;
 

package/src/reanimated2/commonTypes.ts

@@ -15,7 +15,6 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Animation, AnimationObject } from './animation/commonTypes';
 import { Context } from './hook/commonTypes';
 
 export type TransformProperty =
@@ -59,6 +58,10 @@ export interface BasicWorkletFunction<T> extends WorkletFunction {
   (): T;
 }
 
+export interface BasicWorkletFunctionOptional<T> extends WorkletFunction {
+  (): Partial<T>;
+}
+
 export interface NativeEvent<T> {
   nativeEvent: T;
 }
@@ -79,3 +82,47 @@ export type NestedObjectValues<T> =
 export interface AdapterWorkletFunction extends WorkletFunction {
   (value: NestedObject<string | number | AnimationObject>): void;
 }
+
+export type AnimatableValue = number | string | Array<number>;
+
+export interface AnimationObject {
+  [key: string]: any;
+  callback: AnimationCallback;
+  current?: AnimatableValue;
+  toValue?: AnimationObject['current'];
+  startValue?: AnimationObject['current'];
+  finished?: boolean;
+  strippedCurrent?: number;
+  cancelled?: boolean;
+
+  __prefix?: string;
+  __suffix?: string;
+  onFrame: (animation: any, timestamp: Timestamp) => boolean;
+  onStart: (
+    nextAnimation: any,
+    current: any,
+    timestamp: Timestamp,
+    previousAnimation: any
+  ) => void;
+}
+
+export interface Animation<T extends AnimationObject> extends AnimationObject {
+  onFrame: (animation: T, timestamp: Timestamp) => boolean;
+  onStart: (
+    nextAnimation: T,
+    current: T extends NumericAnimation ? number : AnimatableValue,
+    timestamp: Timestamp,
+    previousAnimation: T
+  ) => void;
+}
+
+export interface NumericAnimation {
+  current?: number;
+}
+
+export type AnimationCallback = (
+  finished?: boolean,
+  current?: AnimatableValue
+) => void;
+
+export type Timestamp = number;

package/src/reanimated2/core.ts

@@ -7,12 +7,10 @@ import {
   WorkletFunction,
   ComplexWorkletFunction,
   SharedValue,
-} from './commonTypes';
-import {
   AnimationObject,
   AnimatableValue,
   Timestamp,
-} from './animation/commonTypes';
+} from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
 import JSReanimated from './js-reanimated/JSReanimated';
 
@@ -383,9 +381,11 @@ if (!NativeReanimatedModule.useOnlyV1) {
         info: runOnJS(capturableConsole.info),
       };
       _setGlobalConsole(console);
-      global.performance = {
-        now: global._chronoNow,
-      };
+      if (global.performance == null) {
+        global.performance = {
+          now: global._chronoNow,
+        };
+      }
     })();
   }
 }

package/src/reanimated2/hook/commonTypes.ts

@@ -10,3 +10,8 @@ export interface Descriptor {
   tag: number;
   name: string;
 }
+
+export interface RefObjectFunction<T> {
+  current: T | null;
+  (component?: T): number;
+}