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?