FlatList doesn't properly infer types

Ex.

This works:

import { FlatList } from "react-native";
const CreateOptions = [
  {
    id: "1",
    title: "Supplement",
    background: {
      uri:
        "https://images.unsplash.com/photo-1565071783280-719b01b29912?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80",
    },
  },
];

<FlatList
        showsHorizontalScrollIndicator={false}
        horizontal
        data={CreateOptions}
        renderItem={({ item, index }) => (
          <Pressable sx={{ m: "md" }}>
            <Image
              sx={{ height: 180, width: 120, borderRadius: "base" }}
              source={item.background}
            />
          </Pressable>
        )}
        keyExtractor={(item) => item.title}
 />

This produces the following, for the object item typescript errors with Object is of type 'unknown':

import { FlatList } from "dripsy";
const CreateOptions = [
  {
    id: "1",
    title: "Supplement",
    background: {
      uri:
        "https://images.unsplash.com/photo-1565071783280-719b01b29912?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80",
    },
  },
];

<FlatList
        showsHorizontalScrollIndicator={false}
        horizontal
        data={CreateOptions}
        renderItem={({ item, index }) => (
          <Pressable sx={{ m: "md" }}>
            <Image
              sx={{ height: 180, width: 120, borderRadius: "base" }}
              source={item.background}
            />
          </Pressable>
        )}
        keyExtractor={(item) => item.title}
 />

[nandorojo]

I know this isn’t ideal, but this does do it for me as a temporary work-around:

import { FlatList } from 'dripsy'
import type { ListRenderItem } from 'react-native'

type Data = {...}

const List = () => (
  <FlatList
    data={data}
    renderItem={({ item }: Parameters<ListRenderItem<Data>>[0]) => {
      return <Item />
    }}
  />
)

[nandorojo]

I haven’t found a good solution to this. It’s frustrating, but I don’t know the alternative.

https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012

It seems like forwardRef doesn’t let us forward ref types for generics. So either we use the generic, or the ref type. I’m open to a solution, but I’m going to close it since I can’t find one that doesn’t involve writing types directly.

So if you’re coming to this issue, please see https://github.com/nandorojo/dripsy/issues/58#issuecomment-750494694