2

Similar to What is the syntax for Typescript arrow functions with generics? but I have a specific scenario which didn't see to work with the solutions provided there

Also more specific with examples compared to How do I type my ref correctly in a forwardRef component?

I am trying to wrap FlatList with something that I modified that would ensures that the columns are the same width and I just made a change to allow it to pass a ref in.

Originally I had

export function FlatList<ItemT=any>( props : FlatListProps<ItemT>) {
...
}

So when I tried to convert it failed, and I had to resort to any as follows

import {FlatList as RNFlatList} from 'react-native';
...
export const FlatList = forwardRef<RNFlatList<any>, FlatListProps<any>>(
...
}

I tried the following, but it didn't work.

export const FlatList = <ItemT=any,>forwardRef<RNFlatList<ItemT>, FlatListProps<ItemT>>(
...
}
Archimedes Trajano
  • 35,625
  • 19
  • 175
  • 265
  • The problem that you are having is that the `forwardRef` makes your component not generic anymore. I have closed this is a duplicate of https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref which has a very thorough answer explaining multiple solutions. You can also read this blog article: https://fettblog.eu/typescript-react-generic-forward-refs/ – Linda Paiste Oct 04 '22 at 16:42

0 Answers0