react-native-reanimated 2.3.3 → 2.5.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;
@@ -67,7 +64,8 @@ function getMatchers(): Matchers {
       'hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)
     );
     cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-    cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+    cachedMatchers.hex4 =
+      /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
     cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
     cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
   }
@@ -475,9 +473,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 +526,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 +650,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

@@ -1,30 +1,54 @@
-import { SharedValue } from '../commonTypes';
+import { NativeModules } from 'react-native';
+import {
+  SharedValue,
+  SensorValue3D,
+  SensorValueRotation,
+} from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
-const InnerNativeModule = global.__reanimatedModuleProxy;
 export class NativeReanimated {
   native: boolean;
-  useOnlyV1: boolean;
+  private InnerNativeModule: any;
 
   constructor(native = true) {
+    if (global.__reanimatedModuleProxy === undefined) {
+      const { ReanimatedModule } = NativeModules;
+      ReanimatedModule?.installTurboModule();
+    }
+    this.InnerNativeModule = global.__reanimatedModuleProxy;
     this.native = native;
-    this.useOnlyV1 = InnerNativeModule === null;
   }
 
   installCoreFunctions(valueSetter: <T>(value: T) => void): void {
-    return InnerNativeModule.installCoreFunctions(valueSetter);
+    return this.InnerNativeModule.installCoreFunctions(valueSetter);
   }
 
   makeShareable<T>(value: T): T {
-    return InnerNativeModule.makeShareable(value);
+    return this.InnerNativeModule.makeShareable(value);
   }
 
   makeMutable<T>(value: T): SharedValue<T> {
-    return InnerNativeModule.makeMutable(value);
+    return this.InnerNativeModule.makeMutable(value);
   }
 
   makeRemote<T>(object = {}): T {
-    return InnerNativeModule.makeRemote(object);
+    return this.InnerNativeModule.makeRemote(object);
+  }
+
+  registerSensor(
+    sensorType: number,
+    interval: number,
+    sensorData: SensorValue3D | SensorValueRotation
+  ) {
+    return this.InnerNativeModule.registerSensor(
+      sensorType,
+      interval,
+      sensorData
+    );
+  }
+
+  unregisterSensor(sensorId: number) {
+    return this.InnerNativeModule.unregisterSensor(sensorId);
   }
 
   startMapper(
@@ -34,7 +58,7 @@ export class NativeReanimated {
     updater: () => void,
     viewDescriptors: Descriptor[] | SharedValue<Descriptor[]>
   ): number {
-    return InnerNativeModule.startMapper(
+    return this.InnerNativeModule.startMapper(
       mapper,
       inputs,
       outputs,
@@ -44,18 +68,18 @@ export class NativeReanimated {
   }
 
   stopMapper(mapperId: number): void {
-    return InnerNativeModule.stopMapper(mapperId);
+    return this.InnerNativeModule.stopMapper(mapperId);
   }
 
   registerEventHandler<T>(
     eventHash: string,
     eventHandler: (event: T) => void
   ): string {
-    return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+    return this.InnerNativeModule.registerEventHandler(eventHash, eventHandler);
   }
 
   unregisterEventHandler(id: string): void {
-    return InnerNativeModule.unregisterEventHandler(id);
+    return this.InnerNativeModule.unregisterEventHandler(id);
   }
 
   getViewProp<T>(
@@ -63,10 +87,14 @@ export class NativeReanimated {
     propName: string,
     callback?: (result: T) => void
   ): Promise<T> {
-    return InnerNativeModule.getViewProp(viewTag, propName, callback);
+    return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
   }
 
   enableLayoutAnimations(flag: boolean): void {
-    InnerNativeModule.enableLayoutAnimations(flag);
+    this.InnerNativeModule.enableLayoutAnimations(flag);
+  }
+
+  configureProps(uiProps: string[], nativeProps: string[]): void {
+    this.InnerNativeModule.configureProps(uiProps, nativeProps);
   }
 }

package/src/reanimated2/NativeReanimated/index.ts

@@ -1,18 +1,12 @@
 import reanimatedJS from '../js-reanimated';
-import { nativeShouldBeMock } from '../PlatformChecker';
-import { Platform } from 'react-native';
+import { shouldBeUseWeb } from '../PlatformChecker';
 import { NativeReanimated } from './NativeReanimated';
 
 let exportedModule;
-if (nativeShouldBeMock()) {
+if (shouldBeUseWeb()) {
   exportedModule = reanimatedJS;
 } else {
   exportedModule = new NativeReanimated();
-  if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
-    console.warn(
-      `If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`
-    );
-  }
 }
 
 export default exportedModule as NativeReanimated;

package/src/reanimated2/ViewDescriptorsSet.ts

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { makeMutable } from './core';
 import { SharedValue } from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
-import { Platform } from 'react-native';
+import { shouldBeUseWeb } from './PlatformChecker';
 
 export interface ViewRefSet<T> {
   items: Set<T>;
@@ -24,8 +24,7 @@ export interface ViewDescriptorsSet {
   ) => void;
 }
 
-const scheduleUpdates =
-  Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
+const scheduleUpdates = shouldBeUseWeb() ? requestAnimationFrame : setImmediate;
 
 export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   const ref = useRef<ViewDescriptorsSet | null>(null);

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,16 @@
 export {
-  AnimationObject,
-  Animation,
   HigherOrderAnimation,
-  AnimationCallback,
   NextAnimation,
-  Timestamp,
+  DelayAnimation,
+  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;