CODEWITHSUNDEEP
reactjstypescriptreact-nativereact-navigationreact-native-flatlist
Joaquin Palacios
Joaquin Palacios

Reputation: 346

React Native Flatlist error no overload matches this call

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.

Upvotes: 5

Views: 6818

Answers (1)

nithinpp
nithinpp

Reputation: 2025

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

Upvotes: 7

Related Questions