ForwardRef and Animated.FlatList not set

Description

Should Animated.FlatList be using forwardRef like this?

const ReanimatedFlatlist = forwardRef<FlatList, ReanimatedFlatlistProps<any>>(
  ({ itemLayoutAnimation, ...restProps }, ref) => {
    const cellRenderer = React.useMemo(() => createCellRenderer(itemLayoutAnimation), []);
    return <AnimatedFlatList ref={ref} {...restProps} CellRendererComponent={cellRenderer} />;
  },
);

I noticed i couldn’t use useRef with Animated.FlatList as you get the warning about Function components cannot be given refs

I’m happy to raise a PR, do let me know

Expected behavior

can use useRef with Animated.FlatList, particular to scroll with react navigation useScrollToTop hook

Actual behavior & steps to reproduce

Couldn’t use useRef with Animated.FlatList as you get the warning about Function components cannot be given refs

Package versions

name	version
react-native-reanimated	2.3
expo	44

Affected platforms

• Android
• iOS
• Web

ps Thank you for an amazing library

[axelnormand]

Sure thing

import React, { forwardRef } from 'react';
import { FlatList, FlatListProps, LayoutChangeEvent, View } from 'react-native';
import Animated, { ILayoutAnimationBuilder } from 'react-native-reanimated';

const ReanimatedFlatList = Animated.createAnimatedComponent(FlatList);
const AnimatedView = Animated.createAnimatedComponent(View);

const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
  const cellRenderer: React.FC<{
    onLayout: (event: LayoutChangeEvent) => void;
  }> = (props) => {
    return (
      <AnimatedView layout={itemLayoutAnimation as never} onLayout={props.onLayout}>
        {props.children}
      </AnimatedView>
    );
  };

  return cellRenderer;
};

interface ReanimatedFlatlistProps<T> extends FlatListProps<T> {
  itemLayoutAnimation?: ILayoutAnimationBuilder;
}

/**
 * re-create Reanimated FlatList but correctly pass on forwardRef so can use useScrollToTop in react navigation
 *
 * Source: https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/component/FlatList.tsx
 *
 * TODO: remove this and use Animated.FlatList directly when can use refs with it. Also type the generic T properly for FlatList and dont use `any`
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const AnimatedFlatList = forwardRef<FlatList, ReanimatedFlatlistProps<any>>(
  ({ itemLayoutAnimation, ...restProps }, ref) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const cellRenderer = React.useMemo(() => createCellRenderer(itemLayoutAnimation), []);
    return <ReanimatedFlatList ref={ref} {...restProps} CellRendererComponent={cellRenderer} />;
  },
);

[gurupatel107]

Can we have this available as a patch version in next 2.9.2 version ?