fix: Improve animated ref value type

packages/react-native-reanimated/__typetests__/common/useAnimatedRefTest.tsx

@@ -2,6 +2,8 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import type { FlashListRef } from '@shopify/flash-list';
+import { FlashList } from '@shopify/flash-list';
 import type { Ref } from 'react';
 import React, { useRef } from 'react';
 import type { ImageProps, ViewProps } from 'react-native';
@@ -498,4 +500,47 @@ function UseAnimatedRefTest() {
       </>
     );
   }
+
+  function UseAnimatedRefTestFlashListNoType() {
+    const CreatedAnimatedFlashList =
+      Animated.createAnimatedComponent(FlashList);
+    const plainRef = useRef<FlashListRef<unknown>>(null);
+    const animatedRef = useAnimatedRef<FlashListRef<unknown>>();
+
+    return (
+      <>
+        <FlashList ref={plainRef} data={[]} renderItem={null} />
+        <FlashList ref={animatedRef} data={[]} renderItem={null} />
+
+        <CreatedAnimatedFlashList ref={plainRef} data={[]} renderItem={null} />
+        <CreatedAnimatedFlashList
+          ref={animatedRef}
+          data={[]}
+          renderItem={null}
+        />
+      </>
+    );
+  }
+
+  function UseAnimatedRefTestFlashListWithType() {
+    const CreatedAnimatedFlashList = Animated.createAnimatedComponent(
+      FlashList<number>
+    );
+    const plainRef = useRef<FlashListRef<number>>(null);
+    const animatedRef = useAnimatedRef<FlashListRef<number>>();
+
+    return (
+      <>
+        <FlashList ref={plainRef} data={[]} renderItem={null} />
+        <FlashList ref={animatedRef} data={[]} renderItem={null} />
+
+        <CreatedAnimatedFlashList ref={plainRef} data={[]} renderItem={null} />
+        <CreatedAnimatedFlashList
+          ref={animatedRef}
+          data={[]}
+          renderItem={null}
+        />
+      </>
+    );
+  }
 }

packages/react-native-reanimated/package.json

@@ -104,6 +104,7 @@
     "@react-native/eslint-config": "0.80.0",
     "@react-native/metro-config": "0.80.0",
     "@react-native/typescript-config": "0.80.0",
+    "@shopify/flash-list": "2.0.2",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^13.0.1",

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,21 @@ 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 +144,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,7 +1,7 @@
 'use strict';
 /* eslint-disable */
 
-import type { ShadowNodeWrapper } from './commonTypes';
+import type { ShadowNodeWrapper, WrapperRef } from './commonTypes';
 import {
   findHostInstance,
   HostInstance,
@@ -12,7 +12,7 @@ let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
 };
 
 export function getShadowNodeWrapperFromRef(
-  ref: React.Component,
+  ref: WrapperRef,
   hostInstance?: HostInstance
 ): ShadowNodeWrapper {
   if (getInternalInstanceHandleFromPublicInstance === undefined) {
@@ -38,9 +38,9 @@ export function getShadowNodeWrapperFromRef(
 
   let resolvedRef;
   if (scrollViewRef) {
-    resolvedRef = scrollViewRef.__internalInstanceHandle.stateNode.node;
+    resolvedRef = scrollViewRef.__internalInstanceHandle?.stateNode.node;
   } else if (otherScrollViewRef) {
-    resolvedRef = otherScrollViewRef.__internalInstanceHandle.stateNode.node;
+    resolvedRef = otherScrollViewRef.__internalInstanceHandle?.stateNode.node;
   } else if (textInputRef) {
     resolvedRef = textInputRef;
   } else {

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<TRef extends WrapperRef> = {
+  (ref?: TRef | null):
     | ShadowNodeWrapper // Native
     | HTMLElement; // web
-  current: T | null;
+  current: TRef | 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