I am doing a React Native app with Typescript and I am having an error with the Flatlist renderItem. I am new with Typescript and React Native. The error says:
No overload matches this call. Overload 1 of 2, '(props:FlatListProps |Readonly<FlatListProps>): FlatList<...>', gave thefollowing error.Type '({ item }: { item: arrayPlasticsData; }) => void' is not assignable to type 'ListRenderItem'.Type 'void' is not assignable to type 'ReactElement<any, string | JSXElementConstructor> | null'. Overload 2 of 2, '(props:FlatListProps, context: any):FlatList', gave the following error.Type '({ item }: { item: arrayPlasticsData; }) => void' is not assignable to type 'ListRenderItem'.
I am trying to render a Flatlist with a list of items, but it basically doesn't let me render anything on there. I also tried to just put something like Something on renderItem but it doesn't work either. The PlasticTypesComponent.ts brings an array with data. This is the code:
import { FlatList, StyleSheet, Text, View } from "react-native";import PlasticTypesComponent, { arrayPlasticsData } from "../../components/data/PlasticTypes";import PlasticItemComponent from "../../components/plasticItem/plasticItem";import React from "react";interface plasticsScreenComponentProps { route: any navigation: any renderItem: any}const plasticsScreenComponent: React.FC<plasticsScreenComponentProps> = ({ navigation, route }) => { const plasticTypes = PlasticTypesComponent.filter(plastic => plastic.category === route.params.categoryID); console.log('plasticTypes', plasticTypes) const handleSelected = (item: { id: string; title: string; }) => { navigation.navigate('Plastic description', { productID: item.id, name: item.title, }); }; const renderItemPlastic = ({item}: {item: arrayPlasticsData}) => {<PlasticItemComponent item={item} onSelected={handleSelected} />//// here is where I tried to replace <PlasticItemCompoenent/> with <Text>Something</Text> but didn't work either }; return (<><View style={styles.container}><Text style={styles.text}>plastics</Text><FlatList data={plasticTypes} keyExtractor={item => item.id} renderItem={renderItemPlastic} /></View> </> );}const styles = StyleSheet.create({ container: { flex: 1, alignContent: 'center', justifyContent: 'center', }, text: { fontSize: 23, textAlign: 'center', },});export default plasticsScreenComponent;Perhaps is something of Typescript that I am doing wrong. I couldn't find a solution for a few days. If there is someone that can help me with it, it would be greeat. Thanks in advance.