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

Question

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?

Answer 1

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} />   );