refactor: Untangle types file dependencies (#6319)

## Summary

As a preparation for `react-native-worklets` we need to untangle our
code a bit and follow dependency inversion more thoroughly.

## Test plan

- [x] Build ok
- [x] Lint ok

packages/react-native-reanimated/src/Animated.ts

@@ -1,17 +1,19 @@
 'use strict';
 import type { Extrapolate as _Extrapolate } from './interpolateColor';
-import type { SharedValue as _SharedValue } from './commonTypes';
+import type {
+ SharedValue as _SharedValue,
+ AnimatedTransform as _AnimatedTransform,
+ AnimateStyle as _AnimateStyle,
+ StylesOrDefault as _StylesOrDefault,
+ EasingFunction as _EasingFunction,
+} from './commonTypes';
 import type { DerivedValue as _DerivedValue } from './hook/useDerivedValue';
 import type {
  TransformStyleTypes as _TransformStyleTypes,
  Adaptable as _Adaptable,
  AdaptTransforms as _AdaptTransforms,
- AnimatedTransform as _AnimatedTransform,
- AnimateStyle as _AnimateStyle,
- StylesOrDefault as _StylesOrDefault,
  AnimateProps as _AnimateProps,
 } from './helperTypes';
-import type { EasingFunction as _EasingFunction } from './Easing';
 
 import type { AnimatedScrollViewProps as _AnimatedScrollViewProps } from './component/ScrollView';
 import type { FlatListPropsWithLayout as _FlatListPropsWithLayout } from './component/FlatList';

packages/react-native-reanimated/src/Easing.ts

@@ -1,5 +1,6 @@
 'use strict';
 import { Bezier } from './Bezier';
+import type { EasingFunction } from './commonTypes';
 
 /**
  * The `Easing` module implements common easing functions. This module is used
@@ -47,8 +48,6 @@ import { Bezier } from './Bezier';
  * - [`out`](docs/easing.html#out) runs an easing function backwards
  */
 
-export type EasingFunction = (t: number) => number;
-
 /**
  * @deprecated Please use {@link EasingFunction} type instead.
  */

packages/react-native-reanimated/src/UpdateProps.ts

@@ -2,8 +2,12 @@
 'use strict';
 import type { MutableRefObject } from 'react';
 import { processColorsInProps } from './Colors';
-import type { ShadowNodeWrapper, SharedValue, StyleProps } from './commonTypes';
-import type { AnimatedStyle } from './helperTypes';
+import type {
+ ShadowNodeWrapper,
+ SharedValue,
+ StyleProps,
+ AnimatedStyle,
+} from './commonTypes';
 import type { Descriptor } from './hook/commonTypes';
 import type { ReanimatedHTMLElement } from './js-reanimated';
 import { _updatePropsJS } from './js-reanimated';

packages/react-native-reanimated/src/animation/commonTypes.ts

@@ -6,8 +6,8 @@ import type {
  Animation,
  Timestamp,
  AnimationCallback,
+ AnimatedStyle,
 } from '../commonTypes';
-import type { AnimatedStyle } from '../helperTypes';
 
 export interface HigherOrderAnimation {
  isHigherOrder?: boolean;

packages/react-native-reanimated/src/animation/styleAnimation.ts

@@ -7,8 +7,8 @@ import type {
  Animation,
  NestedObject,
  NestedObjectValues,
+ AnimatedStyle,
 } from '../commonTypes';
-import type { AnimatedStyle } from '../helperTypes';
 import type { StyleLayoutAnimation } from './commonTypes';
 import { withTiming } from './timing';
 import { ColorProperties, processColor } from '../Colors';

packages/react-native-reanimated/src/animation/timing.ts

@@ -1,5 +1,5 @@
 'use strict';
-import type { EasingFunction, EasingFunctionFactory } from '../Easing';
+import type { EasingFunctionFactory } from '../Easing';
 import { Easing } from '../Easing';
 import {
  assertEasingIsWorklet,
@@ -12,6 +12,7 @@ import type {
  Timestamp,
  AnimatableValue,
  ReduceMotion,
+ EasingFunction,
 } from '../commonTypes';
 
 /**

packages/react-native-reanimated/src/animation/util.ts

@@ -17,6 +17,7 @@ import type {
  AnimationObject,
  Timestamp,
  AnimatableValueObject,
+ EasingFunction,
 } from '../commonTypes';
 import type {
  AffineMatrixFlat,
@@ -33,7 +34,7 @@ import {
  getRotationMatrix,
 } from './transformationMatrix/matrixUtils';
 import { shouldBeUseWeb } from '../PlatformChecker';
-import type { EasingFunction, EasingFunctionFactory } from '../Easing';
+import type { EasingFunctionFactory } from '../Easing';
 import { ReducedMotionManager } from '../ReducedMotion';
 
 let IN_STYLE_UPDATER = false;

packages/react-native-reanimated/src/commonTypes.ts

@@ -1,5 +1,10 @@
 'use strict';
-import type { ViewStyle, TextStyle } from 'react-native';
+import type {
+ ViewStyle,
+ TextStyle,
+ TransformsStyle,
+ ImageStyle,
+} from 'react-native';
 
 export type RequiredKeys<T, K extends keyof T> = T & Required<Pick<T, K>>;
 export interface StyleProps extends ViewStyle, TextStyle {
@@ -306,3 +311,50 @@ export enum ReduceMotion {
  Always = 'always',
  Never = 'never',
 }
+
+export type EasingFunction = (t: number) => number;
+
+export type TransformArrayItem = Extract<
+ TransformsStyle['transform'],
+ Array<unknown>
+>[number];
+
+type MaybeSharedValue<Value> =
+ | Value
+ | (Value extends AnimatableValue ? SharedValue<Value> : never);
+
+type MaybeSharedValueRecursive<Value> = Value extends (infer Item)[]
+ ? SharedValue<Item[]> | (MaybeSharedValueRecursive<Item> | Item)[]
+ : Value extends object
+ ?
+ | SharedValue<Value>
+ | {
+ [Key in keyof Value]:
+ | MaybeSharedValueRecursive<Value[Key]>
+ | Value[Key];
+ }
+ : MaybeSharedValue<Value>;
+
+type DefaultStyle = ViewStyle & ImageStyle & TextStyle;
+
+// Ideally we want AnimatedStyle to not be generic, but there are
+// so many depenedencies on it being generic that it's not feasible at the moment.
+export type AnimatedStyle<Style = DefaultStyle> =
+ | Style
+ | MaybeSharedValueRecursive<Style>;
+
+export type AnimatedTransform = MaybeSharedValueRecursive<
+ TransformsStyle['transform']
+>;
+
+/**
+ * @deprecated Please use {@link AnimatedStyle} type instead.
+ */
+export type AnimateStyle<Style = DefaultStyle> = AnimatedStyle<Style>;
+
+/**
+ * @deprecated This type is no longer relevant.
+ */
+export type StylesOrDefault<T> = 'style' extends keyof T
+ ? MaybeSharedValueRecursive<T['style']>
+ : Record<string, unknown>;

packages/react-native-reanimated/src/component/FlatList.tsx

@@ -11,7 +11,8 @@ import { AnimatedView } from './View';
 import { createAnimatedComponent } from '../createAnimatedComponent';
 import type { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
 import { LayoutAnimationConfig } from './LayoutAnimationConfig';
-import type { AnimatedProps, AnimatedStyle } from '../helperTypes';
+import type { AnimatedStyle } from '../commonTypes';
+import type { AnimatedProps } from '../helperTypes';
 
 const AnimatedFlatList = createAnimatedComponent(FlatList);
 

packages/react-native-reanimated/src/helperTypes.ts

@@ -7,15 +7,12 @@ until time comes to refactor the code and get necessary types right.
 This will not be easy though! 
 */
 
+import type { RegisteredStyle, StyleProp } from 'react-native';
 import type {
- ImageStyle,
- RegisteredStyle,
- StyleProp,
- TextStyle,
- TransformsStyle,
- ViewStyle,
-} from 'react-native';
-import type { AnimatableValue, SharedValue } from './commonTypes';
+ AnimatedStyle,
+ SharedValue,
+ TransformArrayItem,
+} from './commonTypes';
 import type { BaseAnimationBuilder } from './layoutReanimation/animationBuilder/BaseAnimationBuilder';
 import type {
  EntryExitAnimationFunction,
@@ -24,39 +21,6 @@ import type {
 import type { ReanimatedKeyframe } from './layoutReanimation/animationBuilder/Keyframe';
 import type { SharedTransition } from './layoutReanimation/sharedTransitions';
 
-export type TransformArrayItem = Extract<
- TransformsStyle['transform'],
- Array<unknown>
->[number];
-
-export type AnimatedTransform = MaybeSharedValueRecursive<
- TransformsStyle['transform']
->;
-
-type MaybeSharedValue<Value> =
- | Value
- | (Value extends AnimatableValue ? SharedValue<Value> : never);
-
-type MaybeSharedValueRecursive<Value> = Value extends (infer Item)[]
- ? SharedValue<Item[]> | (MaybeSharedValueRecursive<Item> | Item)[]
- : Value extends object
- ?
- | SharedValue<Value>
- | {
- [Key in keyof Value]:
- | MaybeSharedValueRecursive<Value[Key]>
- | Value[Key];
- }
- : MaybeSharedValue<Value>;
-
-type DefaultStyle = ViewStyle & ImageStyle & TextStyle;
-
-// Ideally we want AnimatedStyle to not be generic, but there are
-// so many depenedencies on it being generic that it's not feasible at the moment.
-export type AnimatedStyle<Style = DefaultStyle> =
- | Style
- | MaybeSharedValueRecursive<Style>;
-
 type EntryOrExitLayoutType =
  | BaseAnimationBuilder
  | typeof BaseAnimationBuilder
@@ -181,18 +145,6 @@ export type AdaptTransforms<T> = {
  */
 export type TransformStyleTypes = TransformArrayItem;
 
-/**
- * @deprecated Please use {@link AnimatedStyle} type instead.
- */
-export type AnimateStyle<Style = DefaultStyle> = AnimatedStyle<Style>;
-
-/**
- * @deprecated This type is no longer relevant.
- */
-export type StylesOrDefault<T> = 'style' extends keyof T
- ? MaybeSharedValueRecursive<T['style']>
- : Record<string, unknown>;
-
 /**
  * @deprecated This type is no longer relevant.
  */

packages/react-native-reanimated/src/hook/commonTypes.ts

@@ -5,6 +5,7 @@ import type {
  ShadowNodeWrapper,
  SharedValue,
  WorkletFunction,
+ AnimatedStyle,
 } from '../commonTypes';
 import type {
  ImageStyle,
@@ -14,7 +15,6 @@ import type {
  NativeScrollEvent,
 } from 'react-native';
 import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
-import type { AnimatedStyle } from '../helperTypes';
 import type { ReanimatedHTMLElement } from '../js-reanimated';
 
 export type DependencyList = Array<unknown> | undefined;

packages/react-native-reanimated/src/hook/useAnimatedStyle.ts

@@ -31,8 +31,8 @@ import type {
  WorkletFunction,
  AnimatedPropsAdapterFunction,
  AnimatedPropsAdapterWorklet,
+ AnimatedStyle,
 } from '../commonTypes';
-import type { AnimatedStyle } from '../helperTypes';
 import { isWorkletFunction } from '../commonTypes';
 
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();

packages/react-native-reanimated/src/index.ts

@@ -93,7 +93,6 @@ export {
  useInterpolateConfig,
 } from './interpolateColor';
 export type {
- EasingFunction,
  EasingFn,
  EasingFunctionFactory,
  EasingFactoryFn,
@@ -245,6 +244,12 @@ export type {
  AnimatedKeyboardInfo,
  AnimatedKeyboardOptions,
  MeasuredDimensions,
+ EasingFunction,
+ AnimatedTransform,
+ TransformArrayItem,
+ AnimateStyle,
+ AnimatedStyle,
+ StylesOrDefault,
 } from './commonTypes';
 export {
  SensorType,
@@ -272,13 +277,8 @@ export type {
  AdaptTransforms,
  AnimateProps,
  AnimatedProps,
- AnimatedTransform,
  TransformStyleTypes,
- TransformArrayItem,
- AnimateStyle,
- AnimatedStyle,
  AnimatedStyleProp,
- StylesOrDefault,
 } from './helperTypes';
 export type { AnimatedScrollViewProps } from './component/ScrollView';
 export type { FlatListPropsWithLayout } from './component/FlatList';

packages/react-native-reanimated/src/js-reanimated/index.ts

@@ -1,7 +1,6 @@
 'use strict';
 import JSReanimated from './JSReanimated';
-import type { StyleProps } from '../commonTypes';
-import type { AnimatedStyle } from '../helperTypes';
+import type { StyleProps, AnimatedStyle } from '../commonTypes';
 import {
  createReactDOMStyle,
  createTransformValue,

packages/react-native-reanimated/src/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts

@@ -5,9 +5,8 @@ import type {
  BaseBuilderAnimationConfig,
  LayoutAnimationAndConfig,
 } from './commonTypes';
-import type { EasingFunction } from '../../Easing';
 import { BaseAnimationBuilder } from './BaseAnimationBuilder';
-import type { StyleProps } from '../../commonTypes';
+import type { StyleProps, EasingFunction } from '../../commonTypes';
 import { assertEasingIsWorklet } from '../../animation/util';
 
 export class ComplexAnimationBuilder extends BaseAnimationBuilder {

packages/react-native-reanimated/src/layoutReanimation/animationBuilder/Keyframe.ts

@@ -1,5 +1,4 @@
 'use strict';
-import type { EasingFunction } from '../../Easing';
 import { Easing } from '../../Easing';
 import { withDelay, withSequence, withTiming } from '../../animation';
 import type {
@@ -9,8 +8,11 @@ import type {
  KeyframeProps,
  StylePropsWithArrayTransform,
 } from './commonTypes';
-import type { StyleProps } from '../../commonTypes';
-import type { TransformArrayItem } from '../../helperTypes';
+import type {
+ StyleProps,
+ EasingFunction,
+ TransformArrayItem,
+} from '../../commonTypes';
 import { ReduceMotion } from '../../commonTypes';
 import {
  assertEasingIsWorklet,

packages/react-native-reanimated/src/layoutReanimation/animationBuilder/commonTypes.ts

@@ -1,7 +1,10 @@
 'use strict';
-import type { TransformArrayItem } from '../../helperTypes';
-import type { EasingFunction } from '../../Easing';
-import type { ShareableRef, StyleProps } from '../../commonTypes';
+import type {
+ ShareableRef,
+ StyleProps,
+ TransformArrayItem,
+ EasingFunction,
+} from '../../commonTypes';
 
 export type LayoutAnimationsOptions =
  | 'originX'

packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/CurvedTransition.ts

@@ -4,7 +4,7 @@ import type {
  LayoutAnimationFunction,
 } from '../animationBuilder/commonTypes';
 import { BaseAnimationBuilder } from '../animationBuilder';
-import type { EasingFunction } from '../../Easing';
+import type { EasingFunction } from '../../commonTypes';
 import { Easing } from '../../Easing';
 import { withTiming } from '../../animation';
 import { assertEasingIsWorklet } from '../../animation/util';

packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/EntryExitTransition.ts

@@ -8,8 +8,11 @@ import type {
 import { BaseAnimationBuilder } from '../animationBuilder';
 import { withSequence, withTiming } from '../../animation';
 import { FadeIn, FadeOut } from '../defaultAnimations/Fade';
-import type { AnimatableValue, AnimationObject } from '../../commonTypes';
-import type { TransformArrayItem } from '../../helperTypes';
+import type {
+ AnimatableValue,
+ AnimationObject,
+ TransformArrayItem,
+} from '../../commonTypes';
 
 export class EntryExitTransition
  extends BaseAnimationBuilder