FlatList lost types

[RobertSasak]

Description

FlatList renderItem is missing types

CodeSandbox/Snack link

https://snack.expo.dev/@robert.sasak/gluestack-flatlist-lost-types

Steps to reproduce

1. Go to https://snack.expo.dev/@robert.sasak/gluestack-flatlist-lost-types
2. Hover mouse over item in GSFlatList
3. See error

Binding element 'item' implicitly has an 'any' type.

For a comparison there is also a pure FlatList implementation that have correct types.

gluestack-ui Version

0.1.33

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [X] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

Here is an actual error in Snack

There is also an addional error which I do not experience in my project. I do not think that this is related.

'GSFlatList' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

[GollyJer]

Came to mention the same thing. If I switch to the react-native FlatList all the errors go away.

[ankit-tailor]

Hi @GollyJer @RobertSasak, Thanks for reporting the issue. We will look into it.

[coycoylaniba]

the keyExtractor prop also does not infer the data prop type.

[marcorm]

Same problem here. Versions:

"@gluestack-style/react": "^1.0.8",
"@gluestack-ui/config": "^1.0.3",
"@gluestack-ui/themed": "^1.0.8",

I had to do this (maybe it can help someone):

<FlatList
  data={playersData?.playersByClub}
  showsVerticalScrollIndicator={false}
  renderItem={({ item, index }) => (
    <PlayerListItem
      player={item as PlayerItemFragment}
      index={index}
      setSelectedPlayer={setSelectedPlayer}
    />
  )}
  keyExtractor={(item) => (item as PlayerItemFragment)._id}
/>

With react-native FlatList, no problems... Note that also SectionList has the same problem, and i couldn't find a workaround there (can someone help?).

Thanks a lot, love this library.

[yaroslavignatenko]

Are there any updates? this is still an issue for me

[vinjegaard]

This is still an issue in @gluestack-ui/themed": "^1.1.25", any updates on this?

Thanks!

[TArch64]

It's the same issue as styled components has. Since all gluestack components wrapped in styled function it breaks any generic a component has

[Simoon-F]

+1

[goodjun]

+1

[MasterSigmar]

+1

[Simoon-F]

Textarea also have the same problem.

[Simoon-F]

Changing the version of @gluestack-ui/themed from ^1.1.29 to 1.1.29 can temporarily solve this problem.

    "@gluestack-style/react": "^1.0.56",
    "@gluestack-ui/config": "^1.1.18",
    "@gluestack-ui/themed": "1.1.29",