chore: Clean up getViewProp implementation

apps/common-app/src/apps/reanimated/examples/GetViewPropExample.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { Button, StyleSheet, View } from 'react-native';
 import Animated, {
-  getViewProp,
   useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
@@ -25,9 +24,7 @@ export default function GetViewPropExample() {
   });
 
   const handlePress = async () => {
-    // @ts-ignore this is fine
-    const viewTag = animatedRef() as number;
-    const result = await getViewProp(viewTag, 'opacity');
+    const result = await animatedRef.getViewProp<number>('opacity');
     console.log(result);
   };
 

apps/common-app/src/apps/reanimated/examples/index.ts

@@ -518,7 +518,6 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '🔎',
     title: 'getViewProp',
     screen: GetViewPropExample,
-    missingOnFabric: true,
   },
   LogExample: {
     icon: '⌨',

packages/react-native-reanimated/src/ReanimatedModule/NativeReanimated.ts

@@ -13,12 +13,12 @@ import {
   SHOULD_BE_USE_WEB,
 } from '../common';
 import type {
+  ComponentWithInstanceMethods,
   LayoutAnimationBatchItem,
   ShadowNodeWrapper,
   StyleProps,
   Value3D,
   ValueRotation,
-  WrapperRef,
 } from '../commonTypes';
 import type {
   CSSAnimationUpdates,
@@ -133,9 +133,8 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
   }
 
   getViewProp<T>(
-    viewTag: number,
+    component: ComponentWithInstanceMethods,
     propName: string,
-    component: WrapperRef, // required on Fabric
     callback?: (result: T) => void
   ) {
     const shadowNodeWrapper = getShadowNodeWrapperFromRef(component);

packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/JSReanimated.ts

@@ -14,11 +14,11 @@ import {
   ReanimatedError,
 } from '../../common';
 import type {
+  ComponentWithInstanceMethods,
   ShadowNodeWrapper,
   StyleProps,
   Value3D,
   ValueRotation,
-  WrapperRef,
 } from '../../commonTypes';
 import { SensorType } from '../../commonTypes';
 import type {
@@ -253,9 +253,8 @@ class JSReanimated implements IReanimatedModule {
   }
 
   getViewProp<T>(
-    _viewTag: number,
+    _component: ComponentWithInstanceMethods,
     _propName: string,
-    _component?: WrapperRef | null,
     _callback?: (result: T) => void
   ): Promise<T> {
     throw new ReanimatedError('getViewProp is not available in JSReanimated.');

packages/react-native-reanimated/src/ReanimatedModule/reanimatedModuleProxy.ts

@@ -3,12 +3,12 @@
 import type { SerializableRef, WorkletFunction } from 'react-native-worklets';
 
 import type {
+  ComponentWithInstanceMethods,
   LayoutAnimationBatchItem,
   ShadowNodeWrapper,
   StyleProps,
   Value3D,
   ValueRotation,
-  WrapperRef,
 } from '../commonTypes';
 import type {
   CSSAnimationUpdates,
@@ -93,9 +93,8 @@ export interface ReanimatedModuleProxy {
 export interface IReanimatedModule
   extends Omit<ReanimatedModuleProxy, 'getViewProp'> {
   getViewProp<TValue>(
-    viewTag: number,
+    component: ComponentWithInstanceMethods | null,
     propName: string,
-    component: WrapperRef | null,
     callback?: (result: TValue) => void
   ): Promise<TValue>;
 }

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

@@ -465,4 +465,6 @@ type InstanceMethods = {
   __internalInstanceHandle?: AnyRecord;
 };
 
-export type WrapperRef = (React.Component & InstanceMethods) | InstanceMethods;
+export type ComponentWithInstanceMethods =
+  | (React.Component & InstanceMethods)
+  | InstanceMethods;

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

@@ -9,13 +9,13 @@ import { createSerializable } from 'react-native-worklets';
 import { logger, ReanimatedError } from './common';
 import type {
   AnimatedKeyboardOptions,
+  ComponentWithInstanceMethods,
   LayoutAnimationBatchItem,
   SensorConfig,
   SensorType,
   SharedValue,
   Value3D,
   ValueRotation,
-  WrapperRef,
 } from './commonTypes';
 import { ReanimatedModule } from './ReanimatedModule';
 import { SensorContainer } from './SensorContainer';
@@ -46,35 +46,37 @@ export const isReanimated3 = () => {
  */
 export const isConfigured = isReanimated3;
 
-export function getViewProp<T>(
-  viewTag: number,
-  propName: string,
-  component?: WrapperRef | null // required on Fabric
+export function getViewPropImpl<T = unknown>(
+  component: ComponentWithInstanceMethods | null,
+  propName: string
 ): Promise<T> {
   if (!component) {
     throw new ReanimatedError(
-      'Function `getViewProp` requires a component to be passed as an argument on Fabric.'
+      'Function `getViewProp` requires a component to be passed as an argument.'
     );
   }
 
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   return new Promise((resolve, reject) => {
-    return ReanimatedModule.getViewProp(
-      viewTag,
-      propName,
-      component,
-      (result: T) => {
-        if (typeof result === 'string' && result.slice(0, 6) === 'error:') {
-          // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-          reject(result);
-        } else {
-          resolve(result);
-        }
+    return ReanimatedModule.getViewProp(component, propName, (result: T) => {
+      if (typeof result === 'string' && result.slice(0, 6) === 'error:') {
+        // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+        reject(result);
+      } else {
+        resolve(result);
       }
-    );
+    });
   });
 }
 
+export function getViewProp<T = unknown>(
+  _viewTag: number,
+  propName: string,
+  component: ComponentWithInstanceMethods | null
+): Promise<T> {
+  return getViewPropImpl(component, propName);
+}
+
 function getSensorContainer(): SensorContainer {
   if (!global.__sensorContainer) {
     global.__sensorContainer = new SensorContainer();

packages/react-native-reanimated/src/css/component/AnimatedComponent.tsx

@@ -5,7 +5,10 @@ import type { StyleProp } from 'react-native';
 import { Platform, StyleSheet } from 'react-native';
 
 import { IS_JEST, ReanimatedError, SHOULD_BE_USE_WEB } from '../../common';
-import type { ShadowNodeWrapper, WrapperRef } from '../../commonTypes';
+import type {
+  ComponentWithInstanceMethods,
+  ShadowNodeWrapper,
+} from '../../commonTypes';
 import type {
   AnimatedComponentRef,
   IAnimatedComponentInternalBase,
@@ -91,7 +94,7 @@ export default class AnimatedComponent<
       viewTag = viewInfo.viewTag ?? -1;
       viewName = viewInfo.viewName;
       shadowNodeWrapper = getShadowNodeWrapperFromRef(
-        this as WrapperRef,
+        this as ComponentWithInstanceMethods,
         hostInstance
       );
     }

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

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use strict';
-import type { ShadowNodeWrapper, WrapperRef } from './commonTypes';
+import type {
+  ComponentWithInstanceMethods,
+  ShadowNodeWrapper,
+} from './commonTypes';
 import type { HostInstance } from './platform-specific/findHostInstance';
 import { findHostInstance } from './platform-specific/findHostInstance';
 
@@ -9,7 +12,7 @@ let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
 };
 
 export function getShadowNodeWrapperFromRef(
-  ref: WrapperRef,
+  component: ComponentWithInstanceMethods,
   hostInstance?: HostInstance
 ): ShadowNodeWrapper {
   if (getInternalInstanceHandleFromPublicInstance === undefined) {
@@ -25,15 +28,15 @@ export function getShadowNodeWrapperFromRef(
     }
   }
 
-  const resolvedRef =
-    ref.getScrollResponder?.()?.getNativeScrollRef?.() ??
-    ref.getNativeScrollRef?.() ??
-    ref;
+  const resolvedComponent =
+    component.getScrollResponder?.()?.getNativeScrollRef?.() ??
+    component.getNativeScrollRef?.() ??
+    component;
 
   const resolvedInstance =
-    ref?.__internalInstanceHandle ??
+    component?.__internalInstanceHandle ??
     getInternalInstanceHandleFromPublicInstance(
-      hostInstance ?? findHostInstance(resolvedRef)
+      hostInstance ?? findHostInstance(resolvedComponent)
     );
 
   return resolvedInstance?.stateNode?.node;

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

@@ -12,8 +12,8 @@ import type { WorkletFunction } from 'react-native-worklets';
 import type {
   AnimatedPropsAdapterFunction,
   AnimatedStyle,
+  ComponentWithInstanceMethods,
   ShadowNodeWrapper,
-  WrapperRef,
 } from '../commonTypes';
 import type { AnimatedProps } from '../createAnimatedComponent/commonTypes';
 import type { ReanimatedHTMLElement } from '../ReanimatedModule/js-reanimated';
@@ -30,17 +30,18 @@ export type MaybeObserverCleanup = (() => void) | undefined;
 
 export type AnimatedRefObserver = (tag: number | null) => MaybeObserverCleanup;
 
-export type AnimatedRef<TRef extends WrapperRef> = {
-  (ref?: TRef | null):
+export type AnimatedRef<TComponent extends ComponentWithInstanceMethods> = {
+  (ref?: TComponent | null):
     | ShadowNodeWrapper // Native
     | HTMLElement; // web
-  current: TRef | null;
+  current: TComponent | null;
   observe: (observer: AnimatedRefObserver) => void;
+  getViewProp: <T = unknown>(propName: string) => Promise<T>;
   getTag?: () => number | null;
 };
 
 // Might make that type generic if it's ever needed.
-export type AnimatedRefOnJS = AnimatedRef<WrapperRef>;
+export type AnimatedRefOnJS = AnimatedRef<ComponentWithInstanceMethods>;
 
 /**
  * `AnimatedRef` is mapped to this type on the UI thread via a serializable

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

@@ -6,7 +6,11 @@ import {
 } from 'react-native-worklets';
 
 import { SHOULD_BE_USE_WEB } from '../common/constants';
-import type { ShadowNodeWrapper, WrapperRef } from '../commonTypes';
+import type {
+  ComponentWithInstanceMethods,
+  ShadowNodeWrapper,
+} from '../commonTypes';
+import { getViewPropImpl } from '../core';
 import { getShadowNodeWrapperFromRef } from '../fabricUtils';
 import { makeMutable } from '../mutables';
 import { findNodeHandle } from '../platformFunctions/findNodeHandle';
@@ -17,27 +21,31 @@ import type {
   MaybeObserverCleanup,
 } from './commonTypes';
 
-function getComponentOrScrollable(ref: WrapperRef) {
-  return ref.getNativeScrollRef?.() ?? ref.getScrollableNode?.() ?? ref;
+function getComponentOrScrollable(component: ComponentWithInstanceMethods) {
+  return (
+    component.getNativeScrollRef?.() ??
+    component.getScrollableNode?.() ??
+    component
+  );
 }
 
-function useAnimatedRefBase<TRef extends WrapperRef>(
-  getWrapper: (ref: TRef) => ShadowNodeWrapper
-): AnimatedRef<TRef> {
+function useAnimatedRefBase<TComponent extends ComponentWithInstanceMethods>(
+  getWrapper: (component: TComponent) => ShadowNodeWrapper
+): AnimatedRef<TComponent> {
   const observers = useRef<Map<AnimatedRefObserver, MaybeObserverCleanup>>(
     new Map()
   ).current;
-  const wrapperRef = useRef<ShadowNodeWrapper | null>(null);
-  const resultRef = useRef<AnimatedRef<TRef> | null>(null);
+  const shadowNodeWrapperRef = useRef<ShadowNodeWrapper | null>(null);
+  const resultRef = useRef<AnimatedRef<TComponent> | null>(null);
 
   if (!resultRef.current) {
-    const fun = <AnimatedRef<TRef>>((ref) => {
-      if (ref) {
-        wrapperRef.current = getWrapper(ref);
+    const fun = <AnimatedRef<TComponent>>((component) => {
+      if (component) {
+        shadowNodeWrapperRef.current = getWrapper(component);
 
         // We have to unwrap the tag from the shadow node wrapper.
-        fun.getTag = () => findNodeHandle(getComponentOrScrollable(ref));
-        fun.current = ref;
+        fun.getTag = () => findNodeHandle(getComponentOrScrollable(component));
+        fun.current = component;
 
         if (observers.size) {
           const currentTag = fun?.getTag?.() ?? null;
@@ -52,7 +60,7 @@ function useAnimatedRefBase<TRef extends WrapperRef>(
         }
       }
 
-      return wrapperRef.current;
+      return shadowNodeWrapperRef.current;
     });
 
     fun.observe = (observer: AnimatedRefObserver) => {
@@ -66,6 +74,9 @@ function useAnimatedRefBase<TRef extends WrapperRef>(
       };
     };
 
+    fun.getViewProp = (propName: string) =>
+      getViewPropImpl(fun.current, propName);
+
     fun.current = null;
     resultRef.current = fun;
   }
@@ -74,15 +85,15 @@ function useAnimatedRefBase<TRef extends WrapperRef>(
 }
 
 function useAnimatedRefNative<
-  TRef extends WrapperRef = React.Component,
->(): AnimatedRef<TRef> {
+  TComponent extends ComponentWithInstanceMethods = React.Component,
+>(): AnimatedRef<TComponent> {
   const [sharedWrapper] = useState(() =>
     makeMutable<ShadowNodeWrapper | null>(null)
   );
 
-  const resultRef = useAnimatedRefBase<TRef>((ref) => {
+  const resultRef = useAnimatedRefBase<TComponent>((component) => {
     const currentWrapper = getShadowNodeWrapperFromRef(
-      getComponentOrScrollable(ref)
+      getComponentOrScrollable(component)
     );
 
     sharedWrapper.value = currentWrapper;
@@ -104,9 +115,11 @@ function useAnimatedRefNative<
 }
 
 function useAnimatedRefWeb<
-  TRef extends WrapperRef = React.Component,
->(): AnimatedRef<TRef> {
-  return useAnimatedRefBase<TRef>((ref) => getComponentOrScrollable(ref));
+  TComponent extends ComponentWithInstanceMethods = React.Component,
+>(): AnimatedRef<TComponent> {
+  return useAnimatedRefBase<TComponent>((component) =>
+    getComponentOrScrollable(component)
+  );
 }
 
 /**