fix: Improve animated ref value type

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

@@ -27,7 +27,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 getViewProp(viewTag, 'opacity', animatedRef.current);
     console.log(result);
   };
 

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

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 'use strict';
-import type React from 'react';
 import type {
   IWorkletsModule,
   SerializableRef,
@@ -19,6 +18,7 @@ import type {
   StyleProps,
   Value3D,
   ValueRotation,
+  WrapperRef,
 } from '../commonTypes';
 import type {
   CSSAnimationUpdates,
@@ -135,12 +135,10 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
   getViewProp<T>(
     viewTag: number,
     propName: string,
-    component: React.Component | undefined, // required on Fabric
+    component: WrapperRef, // required on Fabric
     callback?: (result: T) => void
   ) {
-    const shadowNodeWrapper = getShadowNodeWrapperFromRef(
-      component as React.Component
-    );
+    const shadowNodeWrapper = getShadowNodeWrapperFromRef(component);
     return this.#reanimatedModuleProxy.getViewProp(
       shadowNodeWrapper,
       propName,

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

@@ -18,6 +18,7 @@ import type {
   StyleProps,
   Value3D,
   ValueRotation,
+  WrapperRef,
 } from '../../commonTypes';
 import { SensorType } from '../../commonTypes';
 import type {
@@ -254,7 +255,7 @@ class JSReanimated implements IReanimatedModule {
   getViewProp<T>(
     _viewTag: number,
     _propName: string,
-    _component?: React.Component,
+    _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

@@ -8,6 +8,7 @@ import type {
   StyleProps,
   Value3D,
   ValueRotation,
+  WrapperRef,
 } from '../commonTypes';
 import type {
   CSSAnimationUpdates,
@@ -94,7 +95,7 @@ export interface IReanimatedModule
   getViewProp<TValue>(
     viewTag: number,
     propName: string,
-    component: React.Component | undefined,
+    component: WrapperRef | null,
     callback?: (result: TValue) => void
   ): Promise<TValue>;
 }

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

@@ -1,14 +1,19 @@
 'use strict';
-
+import type { ComponentRef } from 'react';
 import type {
   ImageStyle,
+  ScrollResponderMixin,
+  ScrollViewComponent,
   TextStyle,
   TransformsStyle,
+  View,
   ViewStyle,
 } from 'react-native';
 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 { EasingFunctionFactory } from './Easing';
 
 type LayoutAnimationOptions =
@@ -441,3 +446,23 @@ export type AnimatedStyle<Style = DefaultStyle> =
 export type AnimatedTransform = MaybeSharedValueRecursive<
   TransformsStyle['transform']
 >;
+
+type NativeScrollRef = Maybe<
+  (ComponentRef<typeof View> | ComponentRef<typeof ScrollViewComponent>) & {
+    __internalInstanceHandle?: AnyRecord;
+  }
+>;
+
+type InstanceMethods = {
+  getScrollResponder?: () => Maybe<
+    (ScrollResponderMixin | React.JSX.Element) & {
+      getNativeScrollRef?: () => NativeScrollRef;
+    }
+  >;
+  getNativeScrollRef?: () => NativeScrollRef;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getScrollableNode?: () => any;
+  __internalInstanceHandle?: AnyRecord;
+};
+
+export type WrapperRef = (React.Component & InstanceMethods) | InstanceMethods;

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

@@ -15,6 +15,7 @@ import type {
   SharedValue,
   Value3D,
   ValueRotation,
+  WrapperRef,
 } from './commonTypes';
 import { ReanimatedModule } from './ReanimatedModule';
 import { SensorContainer } from './SensorContainer';
@@ -48,7 +49,7 @@ export const isConfigured = isReanimated3;
 export function getViewProp<T>(
   viewTag: number,
   propName: string,
-  component?: React.Component // required on Fabric
+  component?: WrapperRef | null // required on Fabric
 ): Promise<T> {
   if (!component) {
     throw new ReanimatedError(

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

@@ -121,8 +121,20 @@ export interface AnimatedComponentRef extends Component {
   elementRef?: React.RefObject<HTMLElement>;
 }
 
-export interface IAnimatedComponentInternal {
+export interface IAnimatedComponentInternalBase {
   ChildComponent: AnyComponent;
+  _componentRef: AnimatedComponentRef | HTMLElement | null;
+  _hasAnimatedRef: boolean;
+  _viewInfo?: ViewInfo;
+  /**
+   * Used for Layout Animations and Animated Styles. It is not related to event
+   * handling.
+   */
+  getComponentViewTag: () => number;
+}
+
+export interface IAnimatedComponentInternal
+  extends IAnimatedComponentInternalBase {
   _animatedStyles: StyleProps[];
   _prevAnimatedStyles: StyleProps[];
   _animatedProps: Partial<AnimatedComponentProps<AnimatedProps>>[];
@@ -131,19 +143,11 @@ export interface IAnimatedComponentInternal {
   jestInlineStyle: NestedArray<StyleProps> | undefined;
   jestAnimatedStyle: { value: StyleProps };
   jestAnimatedProps: { value: AnimatedProps };
-  _componentRef: AnimatedComponentRef | HTMLElement | null;
-  _hasAnimatedRef: boolean;
   _InlinePropManager: IInlinePropManager;
   _PropsFilter: IPropsFilter;
   /** Doesn't exist on web. */
   _NativeEventsManager?: INativeEventsManager;
-  _viewInfo?: ViewInfo;
   context: React.ContextType<typeof SkipEnteringContext>;
-  /**
-   * Used for Layout Animations and Animated Styles. It is not related to event
-   * handling.
-   */
-  getComponentViewTag: () => number;
   setNativeProps: (props: StyleProps) => void;
 }
 

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

@@ -5,9 +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 } from '../../commonTypes';
+import type { ShadowNodeWrapper, WrapperRef } from '../../commonTypes';
 import type {
   AnimatedComponentRef,
+  IAnimatedComponentInternalBase,
   ViewInfo,
 } from '../../createAnimatedComponent/commonTypes';
 import { getViewInfo } from '../../createAnimatedComponent/getViewInfo';
@@ -27,8 +28,11 @@ export type AnimatedComponentProps = Record<string, unknown> & {
 // private/protected ones when possible (when changes from this repo are merged
 // to the main one)
 export default class AnimatedComponent<
-  P extends AnyRecord = AnimatedComponentProps,
-> extends Component<P> {
+    P extends AnyRecord = AnimatedComponentProps,
+  >
+  extends Component<P>
+  implements IAnimatedComponentInternalBase
+{
   ChildComponent: AnyComponent;
 
   _CSSManager?: CSSManager;
@@ -86,7 +90,10 @@ export default class AnimatedComponent<
       const viewInfo = getViewInfo(hostInstance);
       viewTag = viewInfo.viewTag ?? -1;
       viewName = viewInfo.viewName;
-      shadowNodeWrapper = getShadowNodeWrapperFromRef(this, hostInstance);
+      shadowNodeWrapper = getShadowNodeWrapperFromRef(
+        this as WrapperRef,
+        hostInstance
+      );
     }
     this._viewInfo = { viewTag, shadowNodeWrapper, viewName };
     if (DOMElement) {

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

@@ -1,53 +1,40 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use strict';
-/* eslint-disable */
-
-import type { ShadowNodeWrapper } from './commonTypes';
-import {
-  findHostInstance,
-  HostInstance,
-} from './platform-specific/findHostInstance';
+import type { ShadowNodeWrapper, WrapperRef } from './commonTypes';
+import type { HostInstance } from './platform-specific/findHostInstance';
+import { findHostInstance } from './platform-specific/findHostInstance';
 
 let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
   stateNode: { node: unknown };
 };
 
 export function getShadowNodeWrapperFromRef(
-  ref: React.Component,
+  ref: WrapperRef,
   hostInstance?: HostInstance
 ): ShadowNodeWrapper {
   if (getInternalInstanceHandleFromPublicInstance === undefined) {
     try {
       getInternalInstanceHandleFromPublicInstance =
+        // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
         require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
           .getInternalInstanceHandleFromPublicInstance ??
         ((_ref: any) => _ref._internalInstanceHandle);
-    } catch (e) {
+    } catch {
       getInternalInstanceHandleFromPublicInstance = (_ref: any) =>
         _ref._internalInstanceHandle;
     }
   }
 
-  // TODO: Clean this up since 0.74 is the minimum supported version now.
-  // taken from https://github.com/facebook/react-native/commit/803bb16531697233686efd475f004c1643e03617#diff-d8172256c6d63b5d32db10e54d7b10f37a26b337d5280d89f5bfd7bcea778292R196
-  // @ts-ignore some weird stuff on RN 0.74 - see examples with scrollView
-  const scrollViewRef = ref?.getScrollResponder?.()?.getNativeScrollRef?.();
-  // @ts-ignore some weird stuff on RN 0.74  - see examples with scrollView
-  const otherScrollViewRef = ref?.getNativeScrollRef?.();
-  // @ts-ignore some weird stuff on RN 0.74 - see setNativeProps example
-  const textInputRef = ref?.__internalInstanceHandle?.stateNode?.node;
+  const resolvedRef =
+    ref.getScrollResponder?.()?.getNativeScrollRef?.() ??
+    ref.getNativeScrollRef?.() ??
+    ref;
 
-  let resolvedRef;
-  if (scrollViewRef) {
-    resolvedRef = scrollViewRef.__internalInstanceHandle.stateNode.node;
-  } else if (otherScrollViewRef) {
-    resolvedRef = otherScrollViewRef.__internalInstanceHandle.stateNode.node;
-  } else if (textInputRef) {
-    resolvedRef = textInputRef;
-  } else {
-    const instance = hostInstance ?? findHostInstance(ref);
-    resolvedRef =
-      getInternalInstanceHandleFromPublicInstance(instance).stateNode.node;
-  }
+  const resolvedInstance =
+    ref?.__internalInstanceHandle ??
+    getInternalInstanceHandleFromPublicInstance(
+      hostInstance ?? findHostInstance(resolvedRef)
+    );
 
-  return resolvedRef;
+  return resolvedInstance?.stateNode?.node;
 }

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

@@ -1,5 +1,5 @@
 'use strict';
-import type { Component, MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 import type {
   ImageStyle,
   NativeScrollEvent,
@@ -13,6 +13,7 @@ import type {
   AnimatedPropsAdapterFunction,
   AnimatedStyle,
   ShadowNodeWrapper,
+  WrapperRef,
 } from '../commonTypes';
 import type { AnimatedProps } from '../createAnimatedComponent/commonTypes';
 import type { ReanimatedHTMLElement } from '../ReanimatedModule/js-reanimated';
@@ -29,17 +30,17 @@ export type MaybeObserverCleanup = (() => void) | undefined;
 
 export type AnimatedRefObserver = (tag: number | null) => MaybeObserverCleanup;
 
-export type AnimatedRef<T extends Component> = {
-  (component?: T):
+export type AnimatedRef<Ref extends WrapperRef> = {
+  (ref?: Ref | null):
     | ShadowNodeWrapper // Native
     | HTMLElement; // web
-  current: T | null;
+  current: Ref | null;
   observe: (observer: AnimatedRefObserver) => void;
   getTag?: () => number | null;
 };
 
 // Might make that type generic if it's ever needed.
-export type AnimatedRefOnJS = AnimatedRef<Component>;
+export type AnimatedRefOnJS = AnimatedRef<WrapperRef>;
 
 /**
  * `AnimatedRef` is mapped to this type on the UI thread via a serializable