Below in a code I have describe the question as comment

 //This is MessagesScreen.js
           <FlatList
                data={messages}
                keyExtractor={messages => messages.id.toString()}
                renderItem={({ item }) =>
                    <ListItem style={styles.listItem}
                        title={item.title}
                        subTitle={item.description}
                        image={item.image}
                        DeleteIconView={ListItemDeleteAction} /*Here ListItemDeleteAction.js
                                                               is component want to pass it to 
                                                                the ListItem.js. Note: I have 
                                                                imported all the nessory 
                                                                labries*/
                        onPress={() => handleDelete(item)}
                        //renderRightActions={ListItemDeleteAction}
                    />
                }
                ItemSeparatorComponent={ListItemSeparator}
                refreshing={refreshing}
                onRefresh={() => {
                    setMessages([
                        {
                            id: 2,
                            title: 'Komail',
                            description: 'React-Native Developer',
                            image: require("../asserts/komail.jpg"),
                        }
                    ])
                }}
            />

This is ListItemDeleteAction.js, which I want to render in ItemList.js

//This is ListItemDeleteAction.js 
function ListItemDeleteAction(props) {
    return (
        <View style={styles.container}>
            <MaterialCommunityIcons name="trash-can" size={30} color={Colors.danger} />
        </View>
    );
}

Now, in ListItem.js I want to render the ListItemDeleteAction.js as I have passed as a argument. Below in code I have described as comment. Note: I am strict to this method, render the ListItemDeleteAction as it passed as argument, which is "DeleteIconView" as parameter in ListItem.js

function ListItem({ image, title, subTitle, ImageComponent, style, onPress, DeleteIconView}) {
    return (
       

        <TouchableHighlight
            //onPress={onPress}
            underlayColor={Colors.light}
        >

            <View style={[styles.container, style]}>
                {ImageComponent}
                {image && <Image style={styles.image} source={image} />}
                <View style={styles.parentDeatailContainer}>
                    <View style={styles.detailContainer}>
                        <Text style={{ fontWeight: "bold" }}>{title}</Text>
                        {subTitle && <Text>{subTitle}</Text>}
                    </View>
                    <TouchableOpacity style={styles.deleteIconContainer} onPress={onPress}>
                          
                      {DeleteIconView}          /* This is the place where I want to render the 
                                                ListItemDeleteAction components as I passed as argument but How? */

                    </TouchableOpacity>
                </View>
            </View>
        </TouchableHighlight>
        
    );
}

CodePudding user response：

You are passing the prop wrong. When you write DeleteIconView={ListItemDeleteAction}, you aren't actually creating a JSX component. This can be solved by writing the following.

renderItem={({ item }) =>
                    <ListItem style={styles.listItem}
                        title={item.title}
                        subTitle={item.description}
                        image={item.image}
                        DeleteIconView={<ListItemDeleteAction />} 
                        onPress={() => handleDelete(item)}
                    />
                }

Now, the prop DeleteIconView is an actual JSX component which can be rendered as usual.