[SOLVED] React Native Flatlist error no overload matches this call

Issue

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 the
following 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.

Solution

You have to return your JSX from your renderItemPlastic function. Simply change your renderItemPlastic function to

const renderItemPlastic = ({item}: {item: arrayPlasticsData}) => {
    return <PlasticItemComponent item={item} onSelected={handleSelected} />
};

Or simply

const renderItemPlastic = ({item}: {item: arrayPlasticsData}) => 
    <PlasticItemComponent item={item} onSelected={handleSelected} />;

Answered By – nithinpp

Answer Checked By – Terry (BugsFixing Volunteer)