chore: Animated styles and props cleanup

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

@@ -29,6 +29,7 @@ import type {
 } from '../commonTypes';
 import { ReduceMotion } from '../commonTypes';
 import type { EasingFunctionFactory } from '../Easing';
+import type { AnimatedUpdate } from '../hook/commonTypes';
 import { ReducedMotionManager } from '../ReducedMotion';
 import type { HigherOrderAnimation, StyleLayoutAnimation } from './commonTypes';
 import type {
@@ -106,7 +107,7 @@ export function assertEasingIsWorklet(
   }
 }
 
-export function initialUpdaterRun<T>(updater: () => T) {
+export function initialUpdaterRun<TResult>(updater: () => TResult): TResult {
   IN_STYLE_UPDATER.current = true;
   const result = updater();
   IN_STYLE_UPDATER.current = false;

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

@@ -14,7 +14,7 @@ import type { SerializableRef, WorkletFunction } from 'react-native-worklets';
 
 import type { Maybe } from './common/types';
 import type { CSSAnimationProperties, CSSTransitionProperties } from './css';
-import type { AnyRecord } from './css/types';
+import type { AnyRecord, UnknownRecord } from './css/types';
 import type { EasingFunctionFactory } from './Easing';
 
 type LayoutAnimationOptions =

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

@@ -44,7 +44,7 @@ export class PropsFilter implements IPropsFilter {
               this._initialPropsMap.set(handle, {
                 ...handle.initial.value,
                 ...initialUpdaterRun(handle.initial.updater),
-              } as StyleProps);
+              });
             }
 
             return this._initialPropsMap.get(handle) ?? {};

packages/react-native-reanimated/src/css/types/helpers.ts

@@ -3,6 +3,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export type AnyRecord = Record<string, any>;
 
+export type UnknownRecord = Record<string, unknown>;
+
 type NoUndef<T> = T extends undefined ? never : T;
 
 export type Repeat<

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

@@ -7,15 +7,17 @@ import type {
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import type { WorkletFunction } from 'react-native-worklets';
 
 import type {
-  AnimatedPropsAdapterFunction,
-  AnimatedStyle,
+  AnimatableValue,
+  AnimationObject,
+  AnimationsRecord,
+  NestedObject,
+  NestedObjectValues,
   ShadowNodeWrapper,
   WrapperRef,
 } from '../commonTypes';
-import type { AnimatedProps } from '../createAnimatedComponent/commonTypes';
+import type { AnyRecord, UnknownRecord } from '../css/types';
 import type { ReanimatedHTMLElement } from '../ReanimatedModule/js-reanimated';
 import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
 
@@ -87,31 +89,27 @@ export interface IWorkletEventHandler<Event extends object> {
   unregisterFromEvents: (viewTag: number) => void;
 }
 
-export interface AnimatedStyleHandle<
-  Style extends DefaultStyle | AnimatedProps = DefaultStyle,
-> {
+export type AnimatedValuesUpdate = NestedObject<
+  AnimationObject | AnimatableValue
+>;
+
+export type AnimatedUpdaterHandle<TValues extends object = UnknownRecord> = {
   viewDescriptors: ViewDescriptorsSet;
   initial: {
-    value: AnimatedStyle<Style>;
-    updater: () => AnimatedStyle<Style>;
+    value: TValues;
+    updater: () => AnimatedValuesUpdate;
   };
-}
+};
 
-export interface JestAnimatedStyleHandle<
-  Style extends DefaultStyle | AnimatedProps = DefaultStyle,
-> extends AnimatedStyleHandle<Style> {
-  jestAnimatedValues:
-    | RefObject<AnimatedStyle<Style>>
-    | RefObject<AnimatedProps>;
-  toJSON: () => string;
-}
+export type AnimatedStyleHandle<TStyle extends DefaultStyle = DefaultStyle> =
+  AnimatedUpdaterHandle<TStyle>;
+
+export type AnimatedPropsHandle<TProps extends object = UnknownRecord> =
+  AnimatedUpdaterHandle<TProps>;
 
-export type UseAnimatedStyleInternal<Style extends DefaultStyle> = (
-  updater: WorkletFunction<[], Style> | (() => Style),
-  dependencies?: DependencyList | null,
-  adapters?:
-    | AnimatedPropsAdapterFunction
-    | AnimatedPropsAdapterFunction[]
-    | null,
-  isAnimatedProps?: boolean
-) => AnimatedStyleHandle<Style> | JestAnimatedStyleHandle<Style>;
+export type JestAnimatedUpdaterHandle<
+  TValues extends AnyRecord = UnknownRecord,
+> = AnimatedUpdaterHandle<TValues> & {
+  jestAnimatedValues: RefObject<TValues>;
+  toJSON: () => string;
+};

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

@@ -15,7 +15,7 @@ export type {
 } from './useAnimatedScrollHandler';
 export { useAnimatedScrollHandler } from './useAnimatedScrollHandler';
 export { useAnimatedSensor } from './useAnimatedSensor';
-export { useAnimatedStyle } from './useAnimatedStyle';
+export { useAnimatedStyle } from './useAnimatedUpdaterInternal';
 export { useComposedEventHandler } from './useComposedEventHandler';
 export type { DerivedValue } from './useDerivedValue';
 export { useDerivedValue } from './useDerivedValue';

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

@@ -1,38 +1,14 @@
 'use strict';
-import { SHOULD_BE_USE_WEB } from '../common';
-import type { AnimatedPropsAdapterFunction } from '../commonTypes';
-import type { DependencyList, UseAnimatedStyleInternal } from './commonTypes';
-import { useAnimatedStyle } from './useAnimatedStyle';
 
-// TODO: we should make sure that when useAP is used we are not assigning styles
+import type { WorkletFunction } from 'react-native-worklets';
 
-type UseAnimatedProps = <Props extends object>(
-  updater: () => Partial<Props>,
-  dependencies?: DependencyList | null,
-  adapters?:
-    | AnimatedPropsAdapterFunction
-    | AnimatedPropsAdapterFunction[]
-    | null,
-  isAnimatedProps?: boolean
-) => Partial<Props>;
+import type { AnimatedPropsAdapterWorklet } from '../commonTypes';
+import type { AnimatedPropsHandle, DependencyList } from './commonTypes';
+import { useAnimatedUpdaterInternal } from './useAnimatedUpdaterInternal';
 
-function useAnimatedPropsJS<Props extends object>(
-  updater: () => Props,
-  deps?: DependencyList | null,
-  adapters?:
-    | AnimatedPropsAdapterFunction
-    | AnimatedPropsAdapterFunction[]
-    | null
-) {
-  return (useAnimatedStyle as UseAnimatedStyleInternal<Props>)(
-    updater,
-    deps,
-    adapters,
-    true
-  );
-}
+const HOOK_NAME = 'useAnimatedProps';
 
-const useAnimatedPropsNative = useAnimatedStyle;
+// TODO: we should make sure that when useAP is used we are not assigning styles
 
 /**
  * Lets you create an animated props object which can be animated using shared
@@ -42,12 +18,35 @@ const useAnimatedPropsNative = useAnimatedStyle;
  *   animate.
  * @param dependencies - An optional array of dependencies. Only relevant when
  *   using Reanimated without the Babel plugin on the Web.
- * @param adapters - An optional function or array of functions allowing to
- *   adopt prop naming between JS and the native side.
  * @returns An animated props object which has to be passed to `animatedProps`
  *   property of an Animated component that you want to animate.
  * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps
  */
-export const useAnimatedProps: UseAnimatedProps = SHOULD_BE_USE_WEB
-  ? (useAnimatedPropsJS as UseAnimatedProps)
-  : useAnimatedPropsNative;
+export function useAnimatedProps<TProps extends object>(
+  updater: WorkletFunction<[], TProps> | (() => TProps),
+  dependencies?: DependencyList | null
+): AnimatedPropsHandle<TProps>;
+
+/**
+ * @deprecated The `adapters` parameter is deprecated and will be removed in a
+ *   future version.
+ */
+export function useAnimatedProps<TProps extends object>(
+  updater: WorkletFunction<[], TProps> | (() => TProps),
+  dependencies?: DependencyList | null,
+  adapters?: AnimatedPropsAdapterWorklet | AnimatedPropsAdapterWorklet[] | null
+): AnimatedPropsHandle<TProps>;
+
+export function useAnimatedProps<TProps extends object>(
+  updater: WorkletFunction<[], TProps> | (() => TProps),
+  dependencies?: DependencyList | null,
+  adapters?: AnimatedPropsAdapterWorklet | AnimatedPropsAdapterWorklet[] | null
+): AnimatedPropsHandle<TProps> {
+  return useAnimatedUpdaterInternal(
+    HOOK_NAME,
+    updater,
+    dependencies,
+    adapters,
+    true
+  );
+}