FlatList scrollToIndex using useRef with Typescript - Type Error

0
votes

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?

reactjsreact-nativereact-hooks