reactjs - FlatList scrollToIndex usando useRef con Typescript - Error de tipo

Estoy trabajando con FlatList y quiero crear una referencia para poder desplazar el FlatList al presionar un botón.

Lo que pasa es que estoy usando Typescript y tengo un error de tipo que no puedo resolver.

La pregunta es, ¿cómo creo una interfaz para una referencia de FlatList?

Ahí tenemos un ejemplo de lo que estoy haciendo.

let flatListRef = useRef();

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

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

El error de tipo que estoy teniendo es cuando establezco la referencia en el FlatList

El error dice:

La sobrecarga 1 de 2, '(props: FlatListProps<{ data: string; type: number; id: number; }> | Readonly>): FlatList<...>', dio el siguiente error. El tipo 'MutableRefObject' no se puede asignar al tipo 'LegacyRef> | undefined'. El tipo 'MutableRefObject' no se puede asignar al tipo 'RefObject>'. Los tipos de la propiedad 'current' son incompatibles. El tipo 'undefined' no se puede asignar al tipo 'FlatList<{ data: string; type: number; id: number; }> | null'.

La sobrecarga 2 de 2, '(props: FlatListProps<{ data: string; type: number; id: number; }>, context: any): FlatList<{ data: string; type: number; id: number; }>', dio el siguiente error. El tipo 'MutableRefObject' no es asignable al tipo 'LegacyRef> | undefined'.

Cuando establezco el tipo en la referencia al crearla, el error no se soluciona, algo así:

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

let flatListRef = useRef<ListProps>()

¿O necesito pasar la estructura de datos o algo como initialValue cuando creo el hook useRef?

Respuesta #1

Tu flatListRef es un ref a una instancia de FlatList. Así que eso es lo que querrás usar como tu parámetro de tipo genérico.

Las referencias a elementos del DOM esperan un valor inicial de null en lugar de undefined, por lo que también necesitarás solucionar eso.

const flatListRef = useRef<FlatList>(null);

Querrás usar el encadenamiento opcional ?. cuando accedas al ref por si .current todavía es null.

flatListRef.current?.scrollToIndex({index})

Enlace al Playground de TypeScript