chore: Improve animated style and animated props types

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

@@ -3,12 +3,6 @@ import type { SharedValue } from './commonTypes';
 import { makeMutable } from './core';
 import type { Descriptor } from './hook/commonTypes';
 
-export interface ViewDescriptorsSet {
-  shareableViewDescriptors: SharedValue<Descriptor[]>;
-  add: (item: Descriptor) => void;
-  remove: (viewTag: number) => void;
-}
-
 export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   const shareableViewDescriptors = makeMutable<Descriptor[]>([]);
   const data: ViewDescriptorsSet = {

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

@@ -1,15 +1,10 @@
 'use strict';
 
-import type {
-  ImageStyle,
-  TextStyle,
-  TransformsStyle,
-  ViewStyle,
-} from 'react-native';
+import type { TextStyle, TransformsStyle, ViewStyle } from 'react-native';
 import type { ShareableRef, WorkletFunction } from 'react-native-worklets';
 
-import type { CSSAnimationProperties, CSSTransitionProperties } from './css';
 import type { EasingFunctionFactory } from './Easing';
+import type { ReanimatedHTMLElement } from './ReanimatedModule/js-reanimated';
 
 type LayoutAnimationOptions =
   | 'originX'
@@ -416,27 +411,31 @@ type MaybeSharedValue<Value> =
       ? SharedValueDisableContravariance<Value>
       : never);
 
-type MaybeSharedValueRecursive<Value> = Value extends readonly (infer Item)[]
-  ?
-      | SharedValueDisableContravariance<Item[]>
-      | (MaybeSharedValueRecursive<Item> | Item)[]
-  : Value extends object
+export type MaybeSharedValueRecursive<Value> =
+  Value extends readonly (infer Item)[]
     ?
-        | SharedValueDisableContravariance<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 dependencies on it being generic that it's not feasible at the moment.
-export type AnimatedStyle<Style = DefaultStyle> =
-  | (Style & Partial<CSSAnimationProperties> & Partial<CSSTransitionProperties>) // TODO - maybe add css animation config somewhere else
-  | MaybeSharedValueRecursive<Style>;
+        | SharedValueDisableContravariance<Item[]>
+        | (MaybeSharedValueRecursive<Item> | Item)[]
+    : Value extends object
+      ?
+          | SharedValueDisableContravariance<Value>
+          | {
+              [Key in keyof Value]:
+                | MaybeSharedValueRecursive<Value[Key]>
+                | Value[Key];
+            }
+      : MaybeSharedValue<Value>;
+
+export type Descriptor = {
+  tag: number | ReanimatedHTMLElement;
+  shadowNodeWrapper: ShadowNodeWrapper;
+};
+
+export type ViewDescriptorsSet = {
+  shareableViewDescriptors: SharedValue<Descriptor[]>;
+  add: (item: Descriptor) => void;
+  remove: (viewTag: number) => void;
+};
 
 export type AnimatedTransform = MaybeSharedValueRecursive<
   TransformsStyle['transform']

packages/react-native-reanimated/src/createAnimatedComponent/AnimatedComponent.tsx

@@ -10,7 +10,9 @@ import type { StyleProps } from '../commonTypes';
 import { LayoutAnimationType } from '../commonTypes';
 import { SkipEnteringContext } from '../component/LayoutAnimationConfig';
 import ReanimatedAnimatedComponent from '../css/component/AnimatedComponent';
-import type { AnimatedStyleHandle } from '../hook/commonTypes';
+import type { AnyRecord } from '../css/types';
+import type { AnimatedPropsHandle } from '../hook/useAnimatedProps';
+import type { AnimatedStyleHandle } from '../hook/useAnimatedStyle';
 import {
   configureWebLayoutAnimations,
   getReducedMotionFromConfig,
@@ -25,7 +27,6 @@ import { updateLayoutAnimations } from '../UpdateLayoutAnimations';
 import type {
   AnimatedComponentProps,
   AnimatedComponentRef,
-  AnimatedProps,
   AnyComponent,
   IAnimatedComponentInternal,
   INativeEventsManager,
@@ -58,14 +59,14 @@ export default class AnimatedComponent
 {
   _options?: Options<InitialComponentProps>;
   _displayName: string;
-  _animatedStyles: StyleProps[] = [];
-  _prevAnimatedStyles: StyleProps[] = [];
-  _animatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[] = [];
-  _prevAnimatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[] = [];
+  _animatedStyles: AnimatedStyleHandle[] = [];
+  _prevAnimatedStyles: AnimatedStyleHandle[] = [];
+  _animatedProps: AnimatedPropsHandle[] = [];
+  _prevAnimatedProps: AnimatedPropsHandle[] = [];
   _isFirstRender = true;
   jestInlineStyle: NestedArray<StyleProps> | undefined;
   jestAnimatedStyle: { value: StyleProps } = { value: {} };
-  jestAnimatedProps: { value: AnimatedProps } = { value: {} };
+  jestAnimatedProps: { value: AnyRecord } = { value: {} };
   _InlinePropManager = new InlinePropManager();
   _PropsFilter = new PropsFilter();
   _NativeEventsManager?: INativeEventsManager;

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

@@ -2,21 +2,17 @@
 import type { Component, MutableRefObject, Ref } from 'react';
 
 import type {
-  AnimatedStyle,
   EntryExitAnimationFunction,
   ILayoutAnimationBuilder,
+  MaybeSharedValueRecursive,
   ShadowNodeWrapper,
-  SharedValue,
   StyleProps,
 } from '../commonTypes';
 import type { SkipEnteringContext } from '../component/LayoutAnimationConfig';
+import type { AnyRecord, CSSStyle, PlainStyle } from '../css/types';
+import type { AnimatedPropsHandle } from '../hook/useAnimatedProps';
+import type { AnimatedStyleHandle } from '../hook/useAnimatedStyle';
 import type { BaseAnimationBuilder } from '../layoutReanimation';
-import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
-
-export interface AnimatedProps extends Record<string, unknown> {
-  viewDescriptors?: ViewDescriptorsSet;
-  initial?: SharedValue<StyleProps>;
-}
 
 export interface ViewInfo {
   viewTag: number | AnimatedComponentRef | HTMLElement | null;
@@ -41,9 +37,6 @@ export interface IInlinePropManager {
 export type AnimatedComponentType = React.Component<unknown, unknown> &
   IAnimatedComponentInternal;
 
-// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-export type PropUpdates = StyleProps | AnimatedStyle<any>;
-
 export interface IPropsFilter {
   filterNonAnimatedProps: (
     component: AnimatedComponentType
@@ -123,14 +116,14 @@ export interface AnimatedComponentRef extends Component {
 
 export interface IAnimatedComponentInternal {
   ChildComponent: AnyComponent;
-  _animatedStyles: StyleProps[];
-  _prevAnimatedStyles: StyleProps[];
-  _animatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[];
-  _prevAnimatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[];
+  _animatedStyles: AnimatedStyleHandle[];
+  _prevAnimatedStyles: AnimatedStyleHandle[];
+  _animatedProps: AnimatedPropsHandle[];
+  _prevAnimatedProps: AnimatedPropsHandle[];
   _isFirstRender: boolean;
   jestInlineStyle: NestedArray<StyleProps> | undefined;
   jestAnimatedStyle: { value: StyleProps };
-  jestAnimatedProps: { value: AnimatedProps };
+  jestAnimatedProps: { value: AnyRecord };
   _componentRef: AnimatedComponentRef | HTMLElement | null;
   _hasAnimatedRef: boolean;
   _InlinePropManager: IInlinePropManager;
@@ -161,3 +154,8 @@ export type ManagedAnimatedComponent = React.Component<
   AnimatedComponentProps<InitialComponentProps>
 > &
   IAnimatedComponentInternal;
+
+export type AnimatedComponentStyle<Style extends AnyRecord = PlainStyle> =
+  | CSSStyle<Style> // static js style
+  | MaybeSharedValueRecursive<Style> // inline style (with inlined shared values)
+  | AnimatedStyleHandle<Style>; // animated style (created with useAnimatedStyle)

packages/react-native-reanimated/src/createAnimatedComponent/utils.ts

@@ -1,7 +1,9 @@
 'use strict';
-import type { StyleProps } from '../commonTypes';
+import type { MaybeSharedValueRecursive, StyleProps } from '../commonTypes';
 import type { CSSStyle } from '../css';
-import type { NestedArray } from './commonTypes';
+import type { AnyRecord } from '../css/types';
+import type { AnimatedStyleHandle } from '../hook/useAnimatedStyle';
+import type { AnimatedComponentStyle, NestedArray } from './commonTypes';
 
 export function flattenArray<T>(array: NestedArray<T>): T[] {
   if (!Array.isArray(array)) {
@@ -36,9 +38,9 @@ export const has = <K extends string>(
   return false;
 };
 
-export function filterStyles(styles: StyleProps[] | undefined): {
+export function filterStyles(styles: AnimatedComponentStyle[] | undefined): {
   cssStyle: CSSStyle;
-  animatedStyles: StyleProps[];
+  animatedStyles: AnimatedStyleHandle[] | MaybeSharedValueRecursive<AnyRecord>;
 } {
   if (!styles) {
     return { animatedStyles: [], cssStyle: {} };

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

@@ -10,7 +10,6 @@ This will not be easy though!
 import type { StyleProp } from 'react-native';
 
 import type {
-  AnimatedStyle,
   EntryExitAnimationFunction,
   LayoutAnimationFunction,
   SharedValue,
@@ -40,15 +39,15 @@ type PickStyleProps<Props> = Pick<
   }[keyof Props]
 >;
 
+export type OmitStyleProps<Props> = Omit<Props, keyof PickStyleProps<Props>>;
+
 type AnimatedStyleProps<Props extends object> = {
   [Key in keyof PickStyleProps<Props>]: StyleProp<AnimatedStyle<Props[Key]>>;
 };
 
 /** Component props that are not specially handled by us. */
 type RestProps<Props extends object> = {
-  [K in keyof Omit<Props, keyof PickStyleProps<Props> | 'style'>]:
-    | Props[K]
-    | SharedValue<Props[K]>;
+  [K in keyof OmitStyleProps<Props>]: Props[K] | SharedValue<Props[K]>;
 };
 
 type LayoutProps = {

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

@@ -15,16 +15,9 @@ import type {
   ShadowNodeWrapper,
 } from '../commonTypes';
 import type { AnimatedProps } from '../createAnimatedComponent/commonTypes';
-import type { ReanimatedHTMLElement } from '../ReanimatedModule/js-reanimated';
-import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
 
 export type DependencyList = Array<unknown> | undefined;
 
-export interface Descriptor {
-  tag: number | ReanimatedHTMLElement;
-  shadowNodeWrapper: ShadowNodeWrapper;
-}
-
 export type MaybeObserverCleanup = (() => void) | undefined;
 
 export type AnimatedRefObserver = (tag: number | null) => MaybeObserverCleanup;
@@ -83,16 +76,6 @@ export interface IWorkletEventHandler<Event extends object> {
   unregisterFromEvents: (viewTag: number) => void;
 }
 
-export interface AnimatedStyleHandle<
-  Style extends DefaultStyle | AnimatedProps = DefaultStyle,
-> {
-  viewDescriptors: ViewDescriptorsSet;
-  initial: {
-    value: AnimatedStyle<Style>;
-    updater: () => AnimatedStyle<Style>;
-  };
-}
-
 export interface JestAnimatedStyleHandle<
   Style extends DefaultStyle | AnimatedProps = DefaultStyle,
 > extends AnimatedStyleHandle<Style> {

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

@@ -1,35 +1,36 @@
 'use strict';
 import { SHOULD_BE_USE_WEB } from '../common';
 import type { AnimatedPropsAdapterFunction } from '../commonTypes';
+import type { AnyRecord } from '../css/types';
+import type { OmitStyleProps } from '../helperTypes';
 import type { DependencyList, UseAnimatedStyleInternal } from './commonTypes';
+import type { AnimatedStyleHandle } from './useAnimatedStyle';
 import { useAnimatedStyle } from './useAnimatedStyle';
 
-// TODO: we should make sure that when useAP is used we are not assigning styles
+export type AnimatedPropsHandle<Props extends AnyRecord = AnyRecord> =
+  AnimatedStyleHandle<OmitStyleProps<Props>>;
 
-type UseAnimatedProps = <Props extends object>(
-  updater: () => Partial<Props>,
+type UseAnimatedProps = <Props extends AnyRecord>(
+  updater: () => Partial<OmitStyleProps<Props>>,
   dependencies?: DependencyList | null,
   adapters?:
     | AnimatedPropsAdapterFunction
     | AnimatedPropsAdapterFunction[]
     | null,
   isAnimatedProps?: boolean
-) => Partial<Props>;
+) => AnimatedPropsHandle<Props>;
 
-function useAnimatedPropsJS<Props extends object>(
-  updater: () => Props,
+function useAnimatedPropsJS<Props extends AnyRecord>(
+  updater: () => Partial<OmitStyleProps<Props>>,
   deps?: DependencyList | null,
   adapters?:
     | AnimatedPropsAdapterFunction
     | AnimatedPropsAdapterFunction[]
     | null
 ) {
-  return (useAnimatedStyle as UseAnimatedStyleInternal<Props>)(
-    updater,
-    deps,
-    adapters,
-    true
-  );
+  return (
+    useAnimatedStyle as UseAnimatedStyleInternal<Partial<OmitStyleProps<Props>>>
+  )(updater, deps, adapters, true);
 }
 
 const useAnimatedPropsNative = useAnimatedStyle;
@@ -49,5 +50,5 @@ const useAnimatedPropsNative = useAnimatedStyle;
  * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps
  */
 export const useAnimatedProps: UseAnimatedProps = SHOULD_BE_USE_WEB
-  ? (useAnimatedPropsJS as UseAnimatedProps)
-  : useAnimatedPropsNative;
+  ? useAnimatedPropsJS
+  : (useAnimatedPropsNative as UseAnimatedProps);