FlatList scrollToIndex using useRef with Typescript

I am working with FlatList and I want to create one ref to be able to scroll the FlatList when pressing one button.

The thing is that I am using Typescript and I am having one type error that I am not able to solve.

The question is, how do I create an interface for a FlatList ref?

There we have one example of what I am doing.

let flatListRef = useRef();

<FlatList
  ref={flatListRef} // Error Here
  data={store.data}
  ... />

<Button 
  onPress={() =>
    flatListRef.current.scrollToIndex({index:index})
  } />

The type error that I am having is when I set the ref into the FlatList

The error says:

Overload 1 of 2, '(props: FlatListProps<{ data: string; type: number; id: number; }> | Readonly<FlatListProps<{ data: string; type: number; id: number; }>>): FlatList<...>', gave the following error. Type 'MutableRefObject' is not assignable to type 'LegacyRef<FlatList<{ data: string; type: number; id: number; }>> | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject<FlatList<{ data: string; type: number; id: number; }>>'. Types of property 'current' are incompatible. Type 'undefined' is not assignable to type 'FlatList<{ data: string; type: number; id: number; }> | null'.

Overload 2 of 2, '(props: FlatListProps<{ data: string; type: number; id: number; }>, context: any): FlatList<{ data: string; type: number; id: number; }>', gave the following error. Type 'MutableRefObject' is not assignable to type 'LegacyRef<FlatList<{ data: string; type: number; id: number; }>> | undefined'.

When I set the type to the ref when I create it, the error does not solve, something like:

interface ListProps {
  data: string;
  type: number;
  id: number;
 }

let flatListRef = useRef<ListProps>()

Or do I need to pass the data structure or something as initialValue when I create the useRef hook?

CodePudding user response：

Your flatListRef is a ref to a FlatList instance. So that's what you'll want to use as your generic type parameter.

Refs to DOM elements expect an initial value of null rather than undefined, so you'll need to fix that as well.

const flatListRef = useRef<FlatList>(null);

You'll want to use the optional chaining ?. when you access the ref just in case .current is still null.

flatListRef.current?.scrollToIndex({index})

TypeScript Playground Link