react-native-reanimated 3.6.0 → 3.6.2

package/src/reanimated2/hook/useDerivedValue.ts

@@ -8,18 +8,26 @@ import { shouldBeUseWeb } from '../PlatformChecker';
 
 export type DerivedValue<Value> = Readonly<SharedValue<Value>>;
 
+/**
+ * Lets you create new shared values based on existing ones while keeping them reactive.
+ *
+ * @param updater - A function called whenever at least one of the shared values or state used in the function body changes.
+ * @param dependencies - An optional array of dependencies. Only relevant when using Reanimated without the Babel plugin on the Web.
+ * @returns A new readonly shared value based on a value returned from the updater function
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue
+ */
 // @ts-expect-error This overload is required by our API.
 export function useDerivedValue<Value>(
-  processor: () => Value,
+  updater: () => Value,
   dependencies?: DependencyList
 ): DerivedValue<Value>;
 
 export function useDerivedValue<Value>(
-  processor: WorkletFunction<[], Value>,
+  updater: WorkletFunction<[], Value>,
   dependencies?: DependencyList
 ): DerivedValue<Value> {
   const initRef = useRef<SharedValue<Value> | null>(null);
-  let inputs = Object.values(processor.__closure ?? {});
+  let inputs = Object.values(updater.__closure ?? {});
   if (shouldBeUseWeb()) {
     if (!inputs.length && dependencies?.length) {
       // let web work without a Babel/SWC plugin
@@ -29,13 +37,13 @@ export function useDerivedValue<Value>(
 
   // build dependencies
   if (dependencies === undefined) {
-    dependencies = [...inputs, processor.__workletHash];
+    dependencies = [...inputs, updater.__workletHash];
   } else {
-    dependencies.push(processor.__workletHash);
+    dependencies.push(updater.__workletHash);
   }
 
   if (initRef.current === null) {
-    initRef.current = makeMutable(initialUpdaterRun(processor));
+    initRef.current = makeMutable(initialUpdaterRun(updater));
   }
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -44,7 +52,7 @@ export function useDerivedValue<Value>(
   useEffect(() => {
     const fun = () => {
       'worklet';
-      sharedValue.value = processor();
+      sharedValue.value = updater();
     };
     const mapperId = startMapper(fun, inputs, [sharedValue]);
     return () => {

package/src/reanimated2/hook/useEvent.ts

@@ -12,21 +12,24 @@ export type EventHandler<
   Context extends Record<string, unknown> = never
 > = (event: ReanimatedEvent<Event>, context?: Context) => void;
 
-/**
- * Return type of `useEvent` hook.
- */
 export type EventHandlerProcessed<
   Event extends object,
   Context extends Record<string, unknown> = never
 > = (event: Event, context?: Context) => void;
 
-/**
- * Real return type of `useEvent` hook - only meant to be used internally.
- */
 export type EventHandlerInternal<Event extends object> = MutableRefObject<
   WorkletEventHandler<Event>
 >;
 
+/**
+ * Lets you run a function whenever a specified native event occurs.
+ *
+ * @param handler - A function that receives an event object with event data - {@link EventHandler}.
+ * @param eventNames - An array of event names the `handler` callback will react to.
+ * @param rebuild - Whether the event handler should be rebuilt. Defaults to `false`.
+ * @returns A function that will be called when the event occurs - {@link EventHandlerProcessed}.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent
+ */
 // @ts-expect-error This overload is required by our API.
 // We don't know which properites of a component that is made into
 // an AnimatedComponent are event handlers and we don't want to force the user to define it.

package/src/reanimated2/hook/useFrameCallback.ts

@@ -3,6 +3,12 @@ import { useEffect, useRef } from 'react';
 import FrameCallbackRegistryJS from '../frameCallback/FrameCallbackRegistryJS';
 import type { FrameInfo } from '../frameCallback/FrameCallbackRegistryUI';
 
+/**
+ * @param setActive - A function that lets you start the frame callback or stop it from running.
+ * @param isActive - A boolean indicating whether a callback is running.
+ * @param callbackId - A number indicating a unique identifier of the frame callback.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/advanced/useFrameCallback#returns
+ */
 export type FrameCallback = {
   setActive: (isActive: boolean) => void;
   isActive: boolean;
@@ -10,6 +16,14 @@ export type FrameCallback = {
 };
 const frameCallbackRegistry = new FrameCallbackRegistryJS();
 
+/**
+ * Lets you run a function on every frame update.
+ *
+ * @param callback - A function executed on every frame update.
+ * @param autostart - Whether the callback should start automatically. Defaults to `true`.
+ * @returns A frame callback object - {@link FrameCallback}.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/advanced/useFrameCallback
+ */
 export function useFrameCallback(
   callback: (frameInfo: FrameInfo) => void,
   autostart = true

package/src/reanimated2/hook/useHandler.ts

@@ -39,6 +39,14 @@ export interface UseHandlerContext<Context extends Record<string, unknown>> {
   useWeb: boolean;
 }
 
+/**
+ * Lets you find out whether the event handler dependencies have changed.
+ *
+ * @param handlers - An object of event handlers.
+ * @param dependencies - An optional array of dependencies.
+ * @returns An object containing a boolean indicating whether the dependencies have changed, and a boolean indicating whether the code is running on the web.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/advanced/useHandler
+ */
 // @ts-expect-error This overload is required by our API.
 export function useHandler<
   Event extends object,

package/src/reanimated2/hook/useReducedMotion.ts

@@ -3,6 +3,14 @@ import { isReducedMotion } from '../PlatformChecker';
 
 const IS_REDUCED_MOTION = isReducedMotion();
 
+/**
+ * Lets you query the reduced motion system setting.
+ *
+ * Changing the reduced motion system setting doesn't cause your components to rerender.
+ *
+ * @returns A boolean indicating whether the reduced motion setting was enabled when the app started.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/device/useReducedMotion
+ */
 export function useReducedMotion() {
   return IS_REDUCED_MOTION;
 }

package/src/reanimated2/hook/useScrollViewOffset.ts

@@ -20,6 +20,13 @@ const scrollEventNames = [
   'onMomentumScrollEnd',
 ];
 
+/**
+ * Lets you synchronously get the current offset of a `ScrollView`.
+ *
+ * @param animatedRef - An [animated ref](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef) attached to an Animated.ScrollView component.
+ * @returns A shared value which holds the current offset of the `ScrollView`.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/scroll/useScrollViewOffset
+ */
 export function useScrollViewOffset(
   animatedRef: AnimatedRef<AnimatedScrollView>,
   initialRef?: SharedValue<number>

package/src/reanimated2/hook/useSharedValue.ts

@@ -4,14 +4,23 @@ import { cancelAnimation } from '../animation';
 import type { SharedValue } from '../commonTypes';
 import { makeMutable } from '../core';
 
+/**
+ * Lets you define [shared values](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) in your components.
+ *
+ * @param initialValue - The value you want to be initially stored to a `.value` property.
+ * @returns A shared value with a single `.value` property initially set to the `initialValue` - {@link SharedValue}.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue
+ */
 export function useSharedValue<Value>(
-  init: Value,
+  initialValue: Value,
   oneWayReadsOnly = false
 ): SharedValue<Value> {
-  const ref = useRef<SharedValue<Value>>(makeMutable(init, oneWayReadsOnly));
+  const ref = useRef<SharedValue<Value>>(
+    makeMutable(initialValue, oneWayReadsOnly)
+  );
 
   if (ref.current === null) {
-    ref.current = makeMutable(init, oneWayReadsOnly);
+    ref.current = makeMutable(initialValue, oneWayReadsOnly);
   }
 
   useEffect(() => {

package/src/reanimated2/hook/useWorkletCallback.ts

@@ -2,6 +2,9 @@
 import { useCallback } from 'react';
 import type { DependencyList } from './commonTypes';
 
+/**
+ * @deprecated don't use
+ */
 export function useWorkletCallback<Args extends unknown[], ReturnValue>(
   worklet: (...args: Args) => ReturnValue,
   deps?: DependencyList

package/src/reanimated2/index.ts

@@ -80,7 +80,7 @@ export type {
 } from './interpolateColor';
 export {
   /**
-   * @deprecated Please use `Extrapolation` instead.
+   * @deprecated Please use {@link Extrapolation} instead.
    */
   Extrapolate,
   ColorSpace,

package/src/reanimated2/interpolateColor.ts

@@ -19,6 +19,12 @@ import { useSharedValue } from './hook/useSharedValue';
  */
 export const Extrapolate = Extrapolation;
 
+/**
+ * Options for color interpolation.
+ *
+ * @param gamma - Gamma value used in gamma correction. Defaults to `2.2`.
+ * @param useCorrectedHSVInterpolation - Whether to reduce the number of colors the interpolation has to go through. Defaults to `true`.
+ */
 export type InterpolationOptions = {
   gamma?: number;
   useCorrectedHSVInterpolation?: boolean;
@@ -180,6 +186,17 @@ const getInterpolateHSV = (
   return { h, s, v, a };
 };
 
+/**
+ * Lets you map a value from a range of numbers to a range of colors using linear interpolation.
+ *
+ * @param value - A number from the `input` range that is going to be mapped to the color in the `output` range.
+ * @param inputRange - An array of numbers specifying the input range of the interpolation.
+ * @param outputRange - An array of output colors values (eg. "red", "#00FFCC", "rgba(255, 0, 0, 0.5)").
+ * @param colorSpace - The color space to use for interpolation. Defaults to 'RGB'.
+ * @param options - Additional options for interpolation - {@link InterpolationOptions}.
+ * @returns The color after interpolation from within the output range in rgba(r, g, b, a) format.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/utilities/interpolateColor
+ */
 export function interpolateColor(
   value: number,
   inputRange: readonly number[],

package/src/reanimated2/interpolation.ts

@@ -1,11 +1,21 @@
 'use strict';
 
+/**
+ * Extrapolation type.
+ *
+ * @param IDENTITY - Returns the provided value as is.
+ * @param CLAMP - Clamps the value to the edge of the output range.
+ * @param EXTEND - Predicts the values beyond the output range.
+ */
 export enum Extrapolation {
   IDENTITY = 'identity',
   CLAMP = 'clamp',
   EXTEND = 'extend',
 }
 
+/**
+ * Represents the possible values for extrapolation as a string.
+ */
 type ExtrapolationAsString = 'identity' | 'clamp' | 'extend';
 
 interface InterpolationNarrowedInput {
@@ -15,6 +25,9 @@ interface InterpolationNarrowedInput {
   rightEdgeOutput: number;
 }
 
+/**
+ * Allows to specify extrapolation for left and right edge of the interpolation.
+ */
 export interface ExtrapolationConfig {
   extrapolateLeft?: Extrapolation | string;
   extrapolateRight?: Extrapolation | string;
@@ -25,6 +38,9 @@ interface RequiredExtrapolationConfig {
   extrapolateRight: Extrapolation;
 }
 
+/**
+ * Configuration options for extrapolation.
+ */
 export type ExtrapolationType =
   | ExtrapolationConfig
   | Extrapolation
@@ -145,42 +161,50 @@ function internalInterpolate(
   return val;
 }
 
-// TODO: support default values in worklets:
-// e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)
+/**
+ * Lets you map a value from one range to another using linear interpolation.
+ *
+ * @param value - A number from the `input` range that is going to be mapped to the `output` range.
+ * @param inputRange - An array of numbers specifying the input range of the interpolation.
+ * @param outputRange - An array of numbers specifying the output range of the interpolation.
+ * @param extrapolate - determines what happens when the `value` goes beyond the `input` range. Defaults to `Extrapolation.EXTEND` - {@link ExtrapolationType}.
+ * @returns A mapped value within the output range.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/utilities/interpolate
+ */
 export function interpolate(
   x: number,
-  input: readonly number[],
-  output: readonly number[],
+  inputRange: readonly number[],
+  outputRange: readonly number[],
   type?: ExtrapolationType
 ): number {
   'worklet';
-  if (input.length < 2 || output.length < 2) {
+  if (inputRange.length < 2 || outputRange.length < 2) {
     throw new Error(
-      '[Reanimated] Interpolation input and output should contain at least two values.'
+      '[Reanimated] Interpolation input and output ranges should contain at least two values.'
     );
   }
 
   const extrapolationConfig = validateType(type);
-  const length = input.length;
+  const length = inputRange.length;
   const narrowedInput: InterpolationNarrowedInput = {
-    leftEdgeInput: input[0],
-    rightEdgeInput: input[1],
-    leftEdgeOutput: output[0],
-    rightEdgeOutput: output[1],
+    leftEdgeInput: inputRange[0],
+    rightEdgeInput: inputRange[1],
+    leftEdgeOutput: outputRange[0],
+    rightEdgeOutput: outputRange[1],
   };
   if (length > 2) {
-    if (x > input[length - 1]) {
-      narrowedInput.leftEdgeInput = input[length - 2];
-      narrowedInput.rightEdgeInput = input[length - 1];
-      narrowedInput.leftEdgeOutput = output[length - 2];
-      narrowedInput.rightEdgeOutput = output[length - 1];
+    if (x > inputRange[length - 1]) {
+      narrowedInput.leftEdgeInput = inputRange[length - 2];
+      narrowedInput.rightEdgeInput = inputRange[length - 1];
+      narrowedInput.leftEdgeOutput = outputRange[length - 2];
+      narrowedInput.rightEdgeOutput = outputRange[length - 1];
     } else {
       for (let i = 1; i < length; ++i) {
-        if (x <= input[i]) {
-          narrowedInput.leftEdgeInput = input[i - 1];
-          narrowedInput.rightEdgeInput = input[i];
-          narrowedInput.leftEdgeOutput = output[i - 1];
-          narrowedInput.rightEdgeOutput = output[i];
+        if (x <= inputRange[i]) {
+          narrowedInput.leftEdgeInput = inputRange[i - 1];
+          narrowedInput.rightEdgeInput = inputRange[i];
+          narrowedInput.leftEdgeOutput = outputRange[i - 1];
+          narrowedInput.rightEdgeOutput = outputRange[i];
           break;
         }
       }
@@ -191,11 +215,13 @@ export function interpolate(
 }
 
 /**
- * `clamp` lets you limit a value within a specified range.
+ * Lets you limit a value within a specified range.
  *
  * @param value - A number that will be returned as long as the provided value is in range between `min` and `max`.
  * @param min - A number which will be returned when provided `value` is lower than `min`.
  * @param max - A number which will be returned when provided `value` is higher than `max`.
+ * @returns A number between min and max bounds.
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/utilities/clamp/
  */
 export function clamp(value: number, min: number, max: number) {
   'worklet';

package/src/reanimated2/layoutReanimation/animationBuilder/BaseAnimationBuilder.ts

@@ -24,6 +24,11 @@ export class BaseAnimationBuilder {
     throw new Error('[Reanimated] Unimplemented method in child class.');
   };
 
+  /**
+   * Lets you adjust the animation duration. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param durationMs - Length of the animation (in milliseconds).
+   */
   static duration<T extends typeof BaseAnimationBuilder>(
     this: T,
     durationMs: number
@@ -37,6 +42,11 @@ export class BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you adjust the delay before the animation starts (in milliseconds). Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param delayMs - Delay before the animation starts (in milliseconds).
+   */
   static delay<T extends typeof BaseAnimationBuilder>(
     this: T,
     delayMs: number
@@ -50,6 +60,11 @@ export class BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * The callback that will fire after the animation ends. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param callback - Callback that will fire after the animation ends.
+   */
   static withCallback<T extends typeof BaseAnimationBuilder>(
     this: T,
     callback: (finished: boolean) => void
@@ -58,17 +73,22 @@ export class BaseAnimationBuilder {
     return instance.withCallback(callback);
   }
 
-  withCallback(callback: (finsihed: boolean) => void): this {
+  withCallback(callback: (finished: boolean) => void): this {
     this.callbackV = callback;
     return this;
   }
 
+  /**
+   * Lets you adjust the behavior when the device's reduced motion accessibility setting is turned on.  Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param reduceMotion - Determines how the animation responds to the device's reduced motion accessibility setting. Default to `ReduceMotion.System` - {@link ReduceMotion}.
+   */
   static reduceMotion<T extends typeof BaseAnimationBuilder>(
     this: T,
-    reduceMotionV: ReduceMotion
+    reduceMotion: ReduceMotion
   ): InstanceType<T> {
     const instance = this.createInstance();
-    return instance.reduceMotion(reduceMotionV);
+    return instance.reduceMotion(reduceMotion);
   }
 
   reduceMotion(reduceMotionV: ReduceMotion): this {
@@ -85,6 +105,9 @@ export class BaseAnimationBuilder {
     return this.durationV ?? 300;
   }
 
+  /**
+   * @deprecated Use `.delay()` with `Math.random()` instead
+   */
   static randomDelay<T extends typeof BaseAnimationBuilder>(
     this: T
   ): InstanceType<T> {

package/src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts

@@ -26,6 +26,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     this: T
   ) => InstanceType<T>;
 
+  /**
+   * Lets you change the easing curve of the animation. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param easingFunction - An easing function which defines the animation curve.
+   */
   static easing<T extends typeof ComplexAnimationBuilder>(
     this: T,
     easingFunction: EasingFunction
@@ -39,6 +44,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you rotate the element. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param degree - The rotation degree.
+   */
   static rotate<T extends typeof ComplexAnimationBuilder>(
     this: T,
     degree: string
@@ -52,6 +62,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Enables the spring-based animation configuration. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param duration - An optional duration of the spring animation (in milliseconds).
+   */
   static springify<T extends typeof ComplexAnimationBuilder>(
     this: T,
     duration?: number
@@ -66,6 +81,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you adjust the spring animation damping ratio. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param dampingRatio - How damped the spring is.
+   */
   static dampingRatio<T extends typeof ComplexAnimationBuilder>(
     this: T,
     dampingRatio: number
@@ -74,11 +94,16 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return instance.dampingRatio(dampingRatio);
   }
 
-  dampingRatio(dampingRatio: number): this {
-    this.dampingRatioV = dampingRatio;
+  dampingRatio(value: number): this {
+    this.dampingRatioV = value;
     return this;
   }
 
+  /**
+   * Lets you adjust the spring animation damping. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param value - Decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster.
+   */
   static damping<T extends typeof ComplexAnimationBuilder>(
     this: T,
     damping: number
@@ -92,6 +117,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you adjust the spring animation mass. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param mass - The weight of the spring. Reducing this value makes the animation faster.
+   */
   static mass<T extends typeof ComplexAnimationBuilder>(this: T, mass: number) {
     const instance = this.createInstance();
     return instance.mass(mass);
@@ -102,6 +132,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you adjust the stiffness of the spring animation. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param stiffness - How bouncy the spring is.
+   */
   static stiffness<T extends typeof ComplexAnimationBuilder>(
     this: T,
     stiffness: number
@@ -115,6 +150,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you adjust overshoot clamping of the spring. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param overshootClamping - Whether a spring can bounce over the final position.
+   */
   static overshootClamping<T extends typeof ComplexAnimationBuilder>(
     this: T,
     overshootClamping: number
@@ -128,6 +168,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you adjust the rest displacement threshold of the spring animation. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param restDisplacementThreshold - The displacement below which the spring will snap to the designated position without further oscillations.
+   */
   static restDisplacementThreshold<T extends typeof ComplexAnimationBuilder>(
     this: T,
     restDisplacementThreshold: number
@@ -141,6 +186,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you adjust the rest speed threshold of the spring animation. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
+   *
+   * @param restSpeedThreshold - The speed in pixels per second from which the spring will snap to the designated position without further oscillations.
+   */
   static restSpeedThreshold<T extends typeof ComplexAnimationBuilder>(
     this: T,
     restSpeedThreshold: number
@@ -154,6 +204,11 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     return this;
   }
 
+  /**
+   * Lets you override the initial config of the animation
+   *
+   * @param values - An object containing the styles to override.
+   */
   static withInitialValues<T extends typeof ComplexAnimationBuilder>(
     this: T,
     values: StyleProps

package/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts

@@ -85,8 +85,7 @@ class InnerKeyframe implements IEntryExitAnimationBuilder {
         }
         initialValues.transform.forEach((transformStyle, index) => {
           Object.keys(transformStyle).forEach((transformProp: string) => {
-            parsedKeyframes[index.toString() + '_transform:' + transformProp] =
-              [];
+            parsedKeyframes[makeKeyframeKey(index, transformProp)] = [];
           });
         });
       } else {
@@ -164,7 +163,7 @@ class InnerKeyframe implements IEntryExitAnimationBuilder {
               (transformStyle: { [key: string]: any }, index) => {
                 Object.keys(transformStyle).forEach((transformProp: string) => {
                   addKeyPointWith(
-                    index.toString() + '_transform:' + transformProp,
+                    makeKeyframeKey(index, transformProp),
                     transformStyle[transformProp]
                   );
                 });
@@ -271,9 +270,7 @@ class InnerKeyframe implements IEntryExitAnimationBuilder {
           initialValues[key].forEach(
             (transformProp: Record<string, number | string>, index: number) => {
               Object.keys(transformProp).forEach((transformPropKey: string) => {
-                addAnimation(
-                  index.toString() + '_transform:' + transformPropKey
-                );
+                addAnimation(makeKeyframeKey(index, transformPropKey));
               });
             }
           );
@@ -290,6 +287,10 @@ class InnerKeyframe implements IEntryExitAnimationBuilder {
   };
 }
 
+function makeKeyframeKey(index: number, transformProp: string) {
+  return `${index}_transform:${transformProp}`;
+}
+
 // TODO TYPESCRIPT This is a temporary type to get rid of .d.ts file.
 export declare class ReanimatedKeyframe {
   constructor(definitions: Record<string, KeyframeProps>);

package/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts

@@ -137,6 +137,10 @@ export type CustomProgressAnimation = (
   progress: number
 ) => StyleProps;
 
+/**
+ * Used to configure the `.defaultTransitionType()` shared transition modifier.
+ * @experimental
+ */
 export enum SharedTransitionType {
   ANIMATION = 'animation',
   PROGRESS_ANIMATION = 'progressAnimation',