FlatList doesn't properly infer types

[cmaycumber]

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]

Yeah, looks like the FlatList<T> type doesn't forward the T generic. Basically, it seems like an HOC doesn't forward the generic of the wrapped component's types. I've sadly hacked around this by doing as NativeFlatList<Data>, but would certainly merge a change that gets around this.

This may be relevant for an HOC forwarding generics: DefinitelyTyped/DefinitelyTyped#37087

[cmaycumber]

Alright cool. Thanks for pointing me in the right direction.

Maybe there's something that can be done. I'll definitely try to play with it a bit.

[nandorojo]

A more explicit solution:

// src/index.ts
export type { FlatList } from 'react-native'

Does that fix this? It would still be nice to forward generics if possible, but maybe this can work for now if it solves the type issue.

[nandorojo]

Do you still see this on version 1.4.6?

[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 wonder if this would fix it: https://github.com/terrysahaidak/react-native-gallery-toolkit/blob/785ac6df1320f8a6519df4633b3539f076bc9bfe/src/utils.ts#L125

And wrapping components with either that memo function, or with a pseudo function that forwards it.

[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 #58 (comment)

[PaulTondeur]

I don't believe the workaround as mentioned above is working anymore as it results in the following typescript error:

TS2322: Type '({ item }: Parameters<ListRenderItem<Data>>[0]) => JSX.Element' is not assignable to type 'ListRenderItem<unknown>'.   
  Types of parameters '__0' and 'info' are incompatible.
    Type 'ListRenderItemInfo<unknown>' is not assignable to type 'ListRenderItemInfo<Data>'.
      Type 'unknown' is not assignable to type 'Data'. 

Its been a while since this issue has been closed. Is there another way by now to solve this?