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

package/react-native-reanimated.d.ts

@@ -16,6 +16,7 @@ declare module 'react-native-reanimated' {
     TextProps,
     ImageProps,
     ScrollViewProps,
+    FlatListProps,
     StyleProp,
     RegisteredStyle,
     ViewStyle,
@@ -26,6 +27,7 @@ declare module 'react-native-reanimated' {
     Text as ReactNativeText,
     Image as ReactNativeImage,
     ScrollView as ReactNativeScrollView,
+    FlatList as ReactNativeFlatList,
     NativeScrollEvent,
     NativeSyntheticEvent,
     ColorValue,
@@ -144,10 +146,14 @@ declare module 'react-native-reanimated' {
               >;
     };
 
-    export type AnimateProps<P extends object> = {
-      [K in keyof P]: K extends 'style'
-        ? StyleProp<AnimateStyle<P[K]>>
-        : P[K] | AnimatedNode<P[K]>;
+    export type StylesOrDefault<T> = 'style' extends keyof T
+      ? T['style']
+      : Record<string, unknown>;
+
+    export type AnimateProps<P extends Record<string, unknown>> = {
+      [K in keyof P]: P[K] | AnimatedNode<P[K]>;
+    } & {
+      style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
     } & {
       animatedProps?: Partial<AnimateProps<P>>;
       layout?:
@@ -246,16 +252,31 @@ declare module 'react-native-reanimated' {
     export class View extends Component<AnimateProps<ViewProps>> {
       getNode(): ReactNativeView;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface View extends ReactNativeView {}
     export class Text extends Component<AnimateProps<TextProps>> {
       getNode(): ReactNativeText;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface Text extends ReactNativeText {}
     export class Image extends Component<AnimateProps<ImageProps>> {
       getNode(): ReactNativeImage;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface Image extends ReactNativeImage {}
     export class ScrollView extends Component<AnimateProps<ScrollViewProps>> {
       getNode(): ReactNativeScrollView;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface ScrollView extends ReactNativeScrollView {}
+
     export class Code extends Component<CodeProps> {}
+    export class FlatList<T> extends Component<AnimateProps<FlatListProps<T>>> {
+      itemLayoutAnimation: ILayoutAnimationBuilder;
+      getNode(): ReactNativeFlatList;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface FlatList<T> extends ReactNativeView<T> {}
 
     type Options<P> = {
       setNativeProps: (ref: any, props: P) => void;
@@ -451,34 +472,45 @@ declare module 'react-native-reanimated' {
     animations: AnimateStyle;
   };
 
-  export type EntryExitAnimationsValues = {
-    originX: number;
-    originY: number;
-    width: number;
-    height: number;
-    globalOriginX: number;
-    globalOriginY: number;
-  };
-  export type EntryExitAnimationFunction = (
-    targetValues: EntryExitAnimationsValues
-  ) => LayoutAnimation;
+  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: EntryAnimationsValues) => LayoutAnimation)
+    | ((targetValues: ExitAnimationsValues) => LayoutAnimation);
 
   export type 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;
   };
+
   export type LayoutAnimationFunction = (
     targetValues: LayoutAnimationsValues
   ) => LayoutAnimation;
@@ -594,6 +626,42 @@ declare module 'react-native-reanimated' {
     colorSpace?: 'RGB' | 'HSV'
   ): string | number;
 
+  export enum ColorSpace {
+    RGB = 0,
+    HSV = 1,
+  }
+
+  export interface InterpolateRGB {
+    r: number[];
+    g: number[];
+    b: number[];
+    a: number[];
+  }
+
+  export interface InterpolateHSV {
+    h: number[];
+    s: number[];
+    v: number[];
+  }
+
+  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
+  ): SharedValue<InterpolateConfig>;
+
+  export function interpolateSharableColor(
+    value: number,
+    interpolateConfig: SharedValue<InterpolateConfig>
+  ): string | number;
+
   export function makeMutable<T>(initialValue: T): SharedValue<T>;
 
   type DependencyList = ReadonlyArray<any>;
@@ -965,6 +1033,12 @@ declare module 'react-native-reanimated' {
       y1: number,
       x2: number,
       y2: number
+    ): { factory: () => Animated.EasingFunction };
+    bezierFn(
+      x1: number,
+      y1: number,
+      x2: number,
+      y2: number
     ): Animated.EasingFunction;
     in(easing: Animated.EasingFunction): Animated.EasingFunction;
     out(easing: Animated.EasingFunction): Animated.EasingFunction;

package/src/Animated.js

@@ -1,17 +1,15 @@
-import { Image, ScrollView, Text, View, LogBox } from 'react-native';
+import { LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
 import * as reanimated1 from './reanimated1';
+import ReanimatedComponents from './reanimated2/component';
 
 const Animated = {
   // components
-  View: createAnimatedComponent(View),
-  Text: createAnimatedComponent(Text),
-  Image: createAnimatedComponent(Image),
-  ScrollView: createAnimatedComponent(ScrollView),
+  ...ReanimatedComponents,
   createAnimatedComponent,
   // configuration
   addWhitelistedNativeProps,

package/src/createAnimatedComponent.tsx

@@ -36,7 +36,7 @@ import { initialUpdaterRun } from './reanimated2/animation';
 import {
   BaseAnimationBuilder,
   EntryExitAnimationFunction,
-  LayoutAnimationFunction,
+  ILayoutAnimationBuilder,
 } from './reanimated2/layoutReanimation';
 import { SharedValue, StyleProps } from './reanimated2/commonTypes';
 import {
@@ -100,12 +100,17 @@ function onlyAnimatedStyles(styles: StyleProps[]) {
   return styles.filter((style) => style?.viewDescriptors);
 }
 
-function isSameAnimatedStyle(style1: StyleProps, style2: StyleProps): boolean {
+function isSameAnimatedStyle(
+  style1?: StyleProps,
+  style2?: StyleProps
+): boolean {
   // We cannot use equality check to compare useAnimatedStyle outputs directly.
   // Instead, we can compare its viewsRefs.
-  return style1.viewsRef === style2.viewsRef;
+  return style1?.viewsRef === style2?.viewsRef;
 }
 
+const isSameAnimatedProps = isSameAnimatedStyle;
+
 const has = <K extends string>(
   key: K,
   x: unknown
@@ -133,7 +138,7 @@ export type AnimatedComponentProps<P extends Record<string, unknown>> = P & {
   animatedStyle?: StyleProps;
   layout?:
     | BaseAnimationBuilder
-    | LayoutAnimationFunction
+    | ILayoutAnimationBuilder
     | typeof BaseAnimationBuilder;
   entering?:
     | BaseAnimationBuilder
@@ -481,7 +486,10 @@ export default function createAnimatedComponent(
       });
 
       // detach old animatedProps
-      if (prevAnimatedProps && prevAnimatedProps !== this.props.animatedProps) {
+      if (
+        prevAnimatedProps &&
+        !isSameAnimatedProps(prevAnimatedProps, this.props.animatedProps)
+      ) {
         prevAnimatedProps.viewDescriptors!.remove(viewTag as number);
       }
 

package/src/reanimated1/core/Core.test.js

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 jest.mock('../../ReanimatedEventEmitter');
 jest.mock('../../ReanimatedModule');
-jest.mock('../../reanimated2/NativeReanimated');
+jest.mock('../../reanimated2/NativeReanimated/NativeReanimated');
 
 describe('Core Animated components', () => {
   xit('fails if something other then a node or function that returns a node is passed to Animated.Code exec prop', () => {

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,