react-native-reanimated 3.4.0 → 3.4.2

package/src/reanimated2/animation/commonTypes.ts

@@ -1,5 +1,4 @@
 import type {
-  AnimatedStyle,
   StyleProps,
   AnimatableValue,
   AnimationObject,
@@ -7,6 +6,7 @@ import type {
   Timestamp,
   AnimationCallback,
 } from '../commonTypes';
+import type { AnimatedStyle } from '../helperTypes';
 
 export interface HigherOrderAnimation {
   isHigherOrder?: boolean;
@@ -40,11 +40,11 @@ export interface SequenceAnimation
 
 export interface StyleLayoutAnimation extends HigherOrderAnimation {
   current: StyleProps;
-  styleAnimations: AnimatedStyle;
+  styleAnimations: AnimatedStyle<any>;
   onFrame: (animation: StyleLayoutAnimation, timestamp: Timestamp) => boolean;
   onStart: (
     nextAnimation: StyleLayoutAnimation,
-    current: AnimatedStyle,
+    current: AnimatedStyle<any>,
     timestamp: Timestamp,
     previousAnimation: StyleLayoutAnimation
   ) => void;

package/src/reanimated2/animation/decay.ts

@@ -15,6 +15,8 @@ interface DecayConfig {
   velocity?: number;
 }
 
+export type WithDecayConfig = DecayConfig;
+
 interface DefaultDecayConfig {
   deceleration: number;
   velocityFactor: number;
@@ -32,7 +34,7 @@ export interface DecayAnimation extends Animation<DecayAnimation> {
   current: AnimatableValue;
 }
 
-export interface InnerDecayAnimation
+interface InnerDecayAnimation
   extends Omit<DecayAnimation, 'current'>,
     AnimationObject {
   current: number;

package/src/reanimated2/animation/index.ts

@@ -8,10 +8,10 @@ export type {
 } from './commonTypes';
 export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util';
 export { withTiming } from './timing';
-export type { TimingAnimation } from './timing';
+export type { TimingAnimation, WithTimingConfig } from './timing';
 export { withSpring } from './spring';
-export type { SpringAnimation } from './springUtils';
-export { withDecay } from './decay';
+export type { SpringAnimation, WithSpringConfig } from './springUtils';
+export { withDecay, WithDecayConfig } from './decay';
 export type { DecayAnimation } from './decay';
 export { withDelay } from './delay';
 export { withRepeat } from './repeat';

package/src/reanimated2/animation/springUtils.ts

@@ -21,6 +21,8 @@ export type SpringConfig = {
     }
 );
 
+export type WithSpringConfig = SpringConfig;
+
 export interface SpringConfigInner {
   useDuration: boolean;
   configIsInvalid: boolean;

package/src/reanimated2/animation/styleAnimation.ts

@@ -4,10 +4,10 @@ import type {
   AnimatableValue,
   AnimationObject,
   Animation,
-  AnimatedStyle,
   NestedObject,
   NestedObjectValues,
 } from '../commonTypes';
+import type { AnimatedStyle } from '../helperTypes';
 import type { StyleLayoutAnimation } from './commonTypes';
 import { withTiming } from './timing';
 import { ColorProperties } from '../UpdateProps';
@@ -15,7 +15,7 @@ import { processColor } from '../Colors';
 
 // resolves path to value for nested objects
 // if path cannot be resolved returns undefined
-export function resolvePath<T>(
+function resolvePath<T>(
   obj: NestedObject<T>,
   path: AnimatableValue[] | AnimatableValue
 ): NestedObjectValues<T> | undefined {
@@ -39,7 +39,7 @@ export function resolvePath<T>(
 
 // set value at given path
 type Path = Array<string | number> | string | number;
-export function setPath<T>(
+function setPath<T>(
   obj: NestedObject<T>,
   path: Path,
   value: NestedObjectValues<T>
@@ -71,7 +71,7 @@ interface NestedObjectEntry<T> {
 }
 
 export function withStyleAnimation(
-  styleAnimations: AnimatedStyle
+  styleAnimations: AnimatedStyle<any>
 ): StyleLayoutAnimation {
   'worklet';
   return defineAnimation<StyleLayoutAnimation>({}, () => {
@@ -143,7 +143,7 @@ export function withStyleAnimation(
 
     const onStart = (
       animation: StyleLayoutAnimation,
-      value: AnimatedStyle,
+      value: AnimatedStyle<any>,
       now: Timestamp,
       previousAnimation: StyleLayoutAnimation
     ): void => {

package/src/reanimated2/animation/timing.ts

@@ -1,4 +1,4 @@
-import type { EasingFn, EasingFactoryFn } from '../Easing';
+import type { EasingFunction, EasingFunctionFactory } from '../Easing';
 import { Easing } from '../Easing';
 import { defineAnimation } from './util';
 import type {
@@ -10,12 +10,14 @@ import type {
 
 interface TimingConfig {
   duration?: number;
-  easing?: EasingFn | EasingFactoryFn;
+  easing?: EasingFunction | EasingFunctionFactory;
 }
 
+export type WithTimingConfig = TimingConfig;
+
 export interface TimingAnimation extends Animation<TimingAnimation> {
   type: string;
-  easing: EasingFn;
+  easing: EasingFunction;
   startValue: AnimatableValue;
   startTime: Timestamp;
   progress: number;
@@ -23,7 +25,7 @@ export interface TimingAnimation extends Animation<TimingAnimation> {
   current: AnimatableValue;
 }
 
-export interface InnerTimingAnimation
+interface InnerTimingAnimation
   extends Omit<TimingAnimation, 'toValue' | 'current'> {
   toValue: number;
   current: number;

package/src/reanimated2/animation/transformationMatrix/matrixUtils.tsx

@@ -11,7 +11,7 @@ export type AffineMatrix = FixedLengthArray<FixedLengthArray<number, 4>, 4>;
 
 export type AffineMatrixFlat = FixedLengthArray<number, 16>;
 
-export type TransformMatrixDecomposition = Record<
+type TransformMatrixDecomposition = Record<
   'translationMatrix' | 'scaleMatrix' | 'rotationMatrix' | 'skewMatrix',
   AffineMatrix
 >;
@@ -34,6 +34,7 @@ export function isAffineMatrixFlat(x: unknown): x is AffineMatrixFlat {
   );
 }
 
+// ts-prune-ignore-next This function is exported to be tested
 export function isAffineMatrix(x: unknown): x is AffineMatrix {
   'worklet';
   return (
@@ -53,6 +54,7 @@ export function flatten(matrix: AffineMatrix): AffineMatrixFlat {
   return matrix.flat() as AffineMatrixFlat;
 }
 
+// ts-prune-ignore-next This function is exported to be tested
 export function unflatten(m: AffineMatrixFlat): AffineMatrix {
   'worklet';
   return [
@@ -334,6 +336,7 @@ function gramSchmidtAlgorithm(matrix: AffineMatrix): {
   };
 }
 
+// ts-prune-ignore-next This function is exported to be tested
 export function decomposeMatrix(
   unknownTypeMatrix: AffineMatrixFlat | AffineMatrix
 ): TransformMatrixDecomposition {

package/src/reanimated2/animation/util.ts

@@ -1,8 +1,4 @@
-import type {
-  HigherOrderAnimation,
-  NextAnimation,
-  StyleLayoutAnimation,
-} from './commonTypes';
+import type { HigherOrderAnimation, StyleLayoutAnimation } from './commonTypes';
 import type { ParsedColorArray } from '../Colors';
 import {
   isColor,
@@ -11,9 +7,7 @@ import {
   toGammaSpace,
   toLinearSpace,
 } from '../Colors';
-
 import type {
-  AnimatedStyle,
   SharedValue,
   AnimatableValue,
   Animation,
@@ -37,8 +31,6 @@ import {
 
 let IN_STYLE_UPDATER = false;
 
-export type UserUpdater = () => AnimatedStyle;
-
 export function initialUpdaterRun<T>(updater: () => T): T {
   IN_STYLE_UPDATER = true;
   const result = updater();
@@ -203,7 +195,7 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
       animation[i].current = RGBACurrent[index];
       const result = animation[i].onFrame(animation[i], timestamp);
       // We really need to assign this value to result, instead of passing it directly - otherwise once "finished" is false, onFrame won't be called
-      finished &&= result;
+      finished = finished && result;
       res.push(animation[i].current);
     });
 
@@ -248,7 +240,7 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     let finished = true;
     const result = animation[0].onFrame(animation[0], timestamp);
     // We really need to assign this value to result, instead of passing it directly - otherwise once "finished" is false, onFrame won't be called
-    finished &&= result;
+    finished = finished && result;
 
     const progress = animation[0].current / 100;
 
@@ -330,7 +322,7 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     (animation.current as Array<number>).forEach((_, i) => {
       const result = animation[i].onFrame(animation[i], timestamp);
       // We really need to assign this value to result, instead of passing it directly - otherwise once "finished" is false, onFrame won't be called
-      finished &&= result;
+      finished = finished && result;
       (animation.current as Array<number>)[i] = animation[i].current;
     });
 
@@ -370,7 +362,7 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     for (const key in animation.current as AnimatableValueObject) {
       const result = animation[key].onFrame(animation[key], timestamp);
       // We really need to assign this value to result, instead of passing it directly - otherwise once "finished" is false, onFrame won't be called
-      finished &&= result;
+      finished = finished && result;
       newObject[key] = animation[key].current;
     }
     animation.current = newObject;
@@ -449,19 +441,3 @@ export function cancelAnimation<T>(sharedValue: SharedValue<T>): void {
   // setting the current value cancels the animation if one is currently running
   sharedValue.value = sharedValue.value; // eslint-disable-line no-self-assign
 }
-
-// TODO it should work only if there was no animation before.
-export function withStartValue(
-  startValue: AnimatableValue,
-  animation: NextAnimation<AnimationObject>
-): Animation<AnimationObject> {
-  'worklet';
-  return defineAnimation(startValue, () => {
-    'worklet';
-    if (!_WORKLET && typeof animation === 'function') {
-      animation = animation();
-    }
-    (animation as Animation<AnimationObject>).current = startValue;
-    return animation as Animation<AnimationObject>;
-  });
-}

package/src/reanimated2/commonTypes.ts

@@ -37,31 +37,6 @@ export interface StyleProps extends ViewStyle, TextStyle {
   [key: string]: any;
 }
 
-export interface AnimatedStyle extends Record<string, AnimationObject> {
-  [key: string]: any;
-  transform?: Array<
-    | Record<'matrix', number[] | AnimationObject>
-    | Partial<
-        Record<
-          | 'perspective'
-          | 'scale'
-          | 'scaleX'
-          | 'scaleY'
-          | 'translateX'
-          | 'translateY',
-          number | AnimationObject
-        >
-      >
-    | Partial<
-        Record<
-          'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'skewX' | 'skewY',
-          string | AnimationObject
-        >
-      >
-    | Record<string, AnimationObject>
-  >;
-}
-
 export interface SharedValue<T> {
   value: T;
   addListener: (listenerID: number, listener: (value: T) => void) => void;

package/src/reanimated2/component/FlatList.tsx

@@ -41,6 +41,8 @@ interface ReanimatedFlatListPropsWithLayout<T> extends FlatListProps<T> {
   itemLayoutAnimation?: ILayoutAnimationBuilder;
 }
 
+export type FlatListPropsWithLayout<T> = ReanimatedFlatListPropsWithLayout<T>;
+
 // TODO TYPESCRIPT This is a temporary type to get rid of .d.ts file.
 declare class ReanimatedFlatListClass<T> extends Component<
   AnimateProps<ReanimatedFlatListPropsWithLayout<T>>
@@ -48,7 +50,7 @@ declare class ReanimatedFlatListClass<T> extends Component<
   getNode(): FlatList;
 }
 
-export interface ReanimatedFlatListProps<ItemT> extends FlatListProps<ItemT> {
+interface ReanimatedFlatListProps<ItemT> extends FlatListProps<ItemT> {
   itemLayoutAnimation?: ILayoutAnimationBuilder;
 }
 

package/src/reanimated2/component/ScrollView.tsx

@@ -7,7 +7,7 @@ import type { SharedValue } from '../commonTypes';
 import type { AnimateProps } from '../helperTypes';
 import { useAnimatedRef, useScrollViewOffset } from '../hook';
 
-interface AnimatedScrollViewProps extends ScrollViewProps {
+export interface AnimatedScrollViewProps extends ScrollViewProps {
   scrollViewOffset?: SharedValue<number>;
 }
 

package/src/reanimated2/core.ts

@@ -30,6 +30,22 @@ export type ReanimatedConsole = Pick<
   'debug' | 'log' | 'warn' | 'info' | 'error'
 >;
 
+/**
+ * @returns `true` in Reanimated 3, doesn't exist in Reanimated 2 or 1
+ */
+export const isReanimated3 = () => true;
+
+// Superseded by check in `/src/threads.ts`.
+// Used by `react-navigation` to detect if using Reanimated 2 or 3.
+/**
+ * @deprecated This function was superseded by other checks.
+ * We keep it here for backward compatibility reasons.
+ * If you need to check if you are using Reanimated 3 or Reanimated 2
+ * please use `isReanimated3` function instead.
+ * @returns `true` in Reanimated 3, doesn't exist in Reanimated 2
+ */
+export const isConfigured = isReanimated3;
+
 // this is for web implementation
 global._WORKLET = false;
 global._log = function (s: string) {

package/src/reanimated2/fabricUtils.ts

@@ -14,6 +14,7 @@ let findHostInstance_DEPRECATED: (ref: React.Component) => HostInstance;
 if (global._IS_FABRIC) {
   try {
     findHostInstance_DEPRECATED =
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
       require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
   } catch (e) {
     throw new Error(

package/src/reanimated2/globals.d.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-var */
 import type {
-  AnimatedStyle,
   StyleProps,
   MeasuredDimensions,
   MapperRegistry,
@@ -10,6 +9,7 @@ import type {
   ShadowNodeWrapper,
   ComplexWorkletFunction,
 } from './commonTypes';
+import type { AnimatedStyle } from './helperTypes';
 import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
 import type { NativeReanimatedModule } from './NativeReanimated/NativeReanimated';
 import type { SensorContainer } from './SensorContainer';
@@ -49,7 +49,7 @@ declare global {
         operations: {
           tag: number;
           name: string;
-          updates: StyleProps | AnimatedStyle;
+          updates: StyleProps | AnimatedStyle<any>;
         }[]
       ) => void)
     | undefined;
@@ -57,7 +57,7 @@ declare global {
     | ((
         operations: {
           shadowNodeWrapper: ShadowNodeWrapper;
-          updates: StyleProps | AnimatedStyle;
+          updates: StyleProps | AnimatedStyle<any>;
         }[]
       ) => void)
     | undefined;

package/src/reanimated2/helperTypes.ts

@@ -23,21 +23,28 @@ import type { ReanimatedKeyframe } from './layoutReanimation/animationBuilder/Ke
 import type { SharedTransition } from './layoutReanimation/sharedTransitions';
 import type { DependencyList } from './hook/commonTypes';
 
-type Adaptable<T> = T | ReadonlyArray<T | ReadonlyArray<T>> | SharedValue<T>;
+export type Adaptable<T> =
+  | T
+  | ReadonlyArray<T | ReadonlyArray<T>>
+  | SharedValue<T>;
 
-type AdaptTransforms<T> = {
+export type AdaptTransforms<T> = {
   [P in keyof T]: Adaptable<T[P]>;
 };
 
 type TransformsStyle = Pick<RNTransformsStyle, 'transform'>;
 
-type TransformStyleTypes = TransformsStyle['transform'] extends
+export type TransformStyleTypes = TransformsStyle['transform'] extends
   | readonly (infer T)[]
+  | string
   | undefined
   ? T
   : never;
-type AnimatedTransform = AdaptTransforms<TransformStyleTypes>[];
+export type AnimatedTransform = AdaptTransforms<TransformStyleTypes>[];
 
+/**
+ * @deprecated Please use `AnimatedStyle` type instead.
+ */
 export type AnimateStyle<S> = {
   [K in keyof S]: K extends 'transform'
     ? AnimatedTransform
@@ -50,13 +57,15 @@ export type AnimateStyle<S> = {
     : S[K] | SharedValue<AnimatableValue>;
 };
 
+export type AnimatedStyle<S> = AnimateStyle<S>;
+
 // provided types can either be their original types (like backgroundColor: pink)
 // or inline shared values/derived values
 type MaybeSharedValue<S> = {
   [K in keyof S]: S[K] | Readonly<SharedValue<Extract<S[K], AnimatableValue>>>;
 };
 
-type StylesOrDefault<T> = 'style' extends keyof T
+export type StylesOrDefault<T> = 'style' extends keyof T
   ? MaybeSharedValue<T['style']>
   : Record<string, unknown>;
 
@@ -81,12 +90,12 @@ type PickStyleProps<T> = Pick<
 
 type StyleAnimatedProps<P extends object> = {
   [K in keyof PickStyleProps<P>]: StyleProp<
-    AnimateStyle<P[K] | MaybeSharedValue<P[K]>>
+    AnimatedStyle<P[K] | MaybeSharedValue<P[K]>>
   >;
 };
 
 type JustStyleAnimatedProp<P extends object> = {
-  style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
+  style?: StyleProp<AnimatedStyle<StylesOrDefault<P>>>;
 };
 
 type NonStyleAnimatedProps<P extends object> = {
@@ -123,6 +132,7 @@ export type AnimateProps<P extends object> = NonStyleAnimatedProps<P> &
     animatedProps?: Partial<AnimatedPropsProp<P>>;
   };
 
+// ts-prune-ignore-next This will be used soon
 export type AnimatedProps<P extends object> = AnimateProps<P>;
 
 export type AnimatedPropsAdapterFunction = (

package/src/reanimated2/hook/commonTypes.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'react';
 import type { Context, ShadowNodeWrapper } from '../commonTypes';
 
 export type DependencyList = Array<unknown> | undefined;
@@ -13,12 +14,10 @@ export interface Descriptor {
   shadowNodeWrapper: ShadowNodeWrapper;
 }
 
-export interface RefObjectFunction<T> {
+export interface AnimatedRef<T extends Component> {
   current: T | null;
   (component?: T):
     | number // Paper
     | ShadowNodeWrapper // Fabric
     | HTMLElement; // web
 }
-
-export type AnimatedRef<T> = RefObjectFunction<T>;

package/src/reanimated2/hook/index.ts

@@ -8,7 +8,10 @@ export {
 export { useSharedValue } from './useSharedValue';
 export { useReducedMotion } from './useReducedMotion';
 export { useAnimatedStyle } from './useAnimatedStyle';
-export type { AnimatedStyleResult } from './useAnimatedStyle';
+export type {
+  AnimatedStyleResult,
+  AnimatedStyleProp,
+} from './useAnimatedStyle';
 export { useAnimatedGestureHandler } from './useAnimatedGestureHandler';
 export type {
   GestureHandlerEvent,

package/src/reanimated2/hook/useAnimatedGestureHandler.ts

@@ -16,7 +16,7 @@ export interface GestureHandlers<T, TContext extends Context> {
   onFinish?: Handler<T, TContext>;
 }
 
-export const EventType = {
+const EventType = {
   UNDETERMINED: 0,
   FAILED: 1,
   BEGAN: 2,
@@ -25,7 +25,7 @@ export const EventType = {
   END: 5,
 };
 
-export interface GestureHandlerNativeEvent {
+interface GestureHandlerNativeEvent {
   handlerTag: number;
   numberOfPointers: number;
   state: (typeof EventType)[keyof typeof EventType];

package/src/reanimated2/hook/useAnimatedRef.ts

@@ -1,7 +1,7 @@
 import type { Component } from 'react';
 import { useRef } from 'react';
 import { useSharedValue } from './useSharedValue';
-import type { AnimatedRef, RefObjectFunction } from './commonTypes';
+import type { AnimatedRef } from './commonTypes';
 import type { ShadowNodeWrapper } from '../commonTypes';
 import { getShadowNodeWrapperFromRef } from '../fabricUtils';
 import {
@@ -9,13 +9,14 @@ import {
   registerShareableMapping,
 } from '../shareables';
 import { findNodeHandle } from 'react-native';
-
-interface ComponentRef extends Component {
-  getNativeScrollRef?: () => ComponentRef;
-  getScrollableNode?: () => ComponentRef;
+interface MaybeScrollableComponent extends Component {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getNativeScrollRef?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getScrollableNode?: any;
 }
 
-function getComponentOrScrollableRef(component: ComponentRef): ComponentRef {
+function getComponentOrScrollable(component: MaybeScrollableComponent) {
   if (global._IS_FABRIC && component.getNativeScrollRef) {
     return component.getNativeScrollRef();
   } else if (!global._IS_FABRIC && component.getScrollableNode) {
@@ -28,15 +29,17 @@ const getTagValueFunction = global._IS_FABRIC
   ? getShadowNodeWrapperFromRef
   : findNodeHandle;
 
-export function useAnimatedRef<T extends ComponentRef>(): AnimatedRef<T> {
+export function useAnimatedRef<
+  T extends MaybeScrollableComponent
+>(): AnimatedRef<T> {
   const tag = useSharedValue<number | ShadowNodeWrapper | null>(-1);
-  const ref = useRef<RefObjectFunction<T>>();
+  const ref = useRef<AnimatedRef<T>>();
 
   if (!ref.current) {
-    const fun: RefObjectFunction<T> = <RefObjectFunction<T>>((component) => {
+    const fun: AnimatedRef<T> = <AnimatedRef<T>>((component) => {
       // enters when ref is set by attaching to a component
       if (component) {
-        tag.value = getTagValueFunction(getComponentOrScrollableRef(component));
+        tag.value = getTagValueFunction(getComponentOrScrollable(component));
         fun.current = component;
       }
       return tag.value;