Search code examples
typescriptobjectreact-nativetypescript-typingsreact-native-flatlist

TypeScript React Native Flatlist: How to give renderItem the correct type of it's item?


I'm building a React Native app with TypeScript. renderItem complains that the destructured item implicitly has an any type. I googled and found this question and tried to implement what they teach here combined with the types in index.d.ts of the @types package for React Native.

export interface Props {
  emotions: Emotion[];
}

class EmotionsPicker extends PureComponent<Props> {
  keyExtractor = (item, index) => index;
  renderItem = ({ item }) => (
    <ListItem title={item.name} checkmark={item.checked} />
  );

  render() {
    return (
      <FlatList<Emotion>
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
        data={this.props.emotions}
      />
    );
  }
}

Unfortunately this does not work. How can I give item the type Emotion?


Solution

  • I know it's an old question but people googling it might still appreciate it.

    import { FlatList, ListRenderItem } from 'react-native'
    /*
    .
    .
    .
    */
      renderItem: ListRenderItem<Emoticon> = ({ item }) => (
        <ListItem title={item.name} checkmark={item.checked} />
      );