How can I resolve this error “ type is invalide” in react native

Question

I've got an error in react-native and I can't resolve it but it' look like an import error Can someone help me?

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Feed.

file Feed.js

    import React, {useState} from 'react';
    import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
    import Layout from '../components/global/Layout';
    import Post from '../components/Post'
    import { ScrollView } from 'react-native-gesture-handler';
    import firebase from '../provider/Firebase'
    import { snapshotToArray } from '../components/utils/snapshotToArray';
    //import value_db from '../value_db.json'

    export default function Feed({navigation}) {    
        return (
            <Layout >
                {value_db.map(Post => 
                    (<Post
                            Title='Truc Machin - 10€'
                            Text='Blabla...'
                            User='Utilisateur'
                            Subtitle='Subtitle'
                            userPic='https://picsum.photos/31'
                            Picture='https://picsum.photos/701'
                        />)
                )}
                    {/*<Post
                        Title='Truc Machin - 5€'
                        Text='Très bon état et blabla...'
                        User='Utilisateur'
                        Subtitle='Subtitle'
                        userPic='https://picsum.photos/30'
                        Picture='https://picsum.photos/700'
                    />*/}
            </Layout>
        );
    }

    const value_db = [
        {
          "id": "1",
          "Title": "id",
          "Picture": "https://picsum.photos/687",
          "Price": 38,
          "User": "King",
          "UID": 9779152268,
          "userPic": "https://picsum.photos/156",
          "Text": "Consectetur aliquip pariatur tempor ullamco dolore mollit cillum sit elit nostrud ex. Velit pariatur pariatur enim proident laboris. Occaecat mollit dolore proident pariatur laboris fugiat enim cupidatat. Deserunt proident in exercitation velit dolor dolore sunt Lorem ullamco et reprehenderit ad."
        },
        {
          "id": "2",
          "Title": "do",
          "Picture": "https://picsum.photos/326",
          "Price": 18,
          "User": "Lillie",
          "UID": 6321689791,
          "userPic": "https://picsum.photos/136",
          "Text": "Eiusmod do veniam ullamco ipsum anim cupidatat pariatur ut eiusmod pariatur culpa id sint. Commodo cupidatat aliqua sint et adipisicing dolor ea elit duis do. Sit sint tempor incididunt aute fugiat consequat fugiat eu."
        },
        {
          "id": "3",
          "Title": "duis",
          "Picture": "https://picsum.photos/338",
          "Price": 36,
          "User": "Marta",
          "UID": 3013262044,
          "userPic": "https://picsum.photos/177",
          "Text": "Eiusmod consectetur qui nostrud eiusmod est ipsum non excepteur incididunt. Elit sunt mollit labore quis Lorem veniam. Deserunt officia aliqua voluptate culpa exercitation in reprehenderit Lorem qui ipsum fugiat consectetur excepteur cillum. Ullamco occaecat consectetur esse eu laboris officia id excepteur occaecat."
        },
        {
          "id": "4",
          "Title": "dolor",
          "Picture": "https://picsum.photos/361",
          "Price": 26,
          "User": "Petty",
          "UID": 4901356544,
          "userPic": "https://picsum.photos/113",
          "Text": "Nulla enim consectetur sint non pariatur duis eu duis qui duis ea veniam ex commodo. Nulla aliqua exercitation consequat consectetur cillum veniam fugiat ad ea deserunt in deserunt do dolor. Minim aliquip laborum ullamco proident fugiat dolore ipsum Lorem magna ullamco aliqua tempor. Consectetur quis ea do et esse nulla reprehenderit ipsum consequat tempor. Deserunt occaecat exercitation ex labore consectetur incididunt. Exercitation et laboris ad deserunt reprehenderit commodo ea id duis esse esse."
        },
        {
          "id": "5",
          "Title": "ex",
          "Picture": "https://picsum.photos/778",
          "Price": 9,
          "User": "Valerie",
          "UID": 4267318506,
          "userPic": "https://picsum.photos/151",
          "Text": "Cupidatat tempor magna elit aliqua consequat minim in ea. In laborum incididunt ea incididunt duis aliqua minim ipsum enim tempor laboris duis. Fugiat sit labore cupidatat consequat occaecat id velit Lorem amet officia magna."
        },
        {
          "id": "6",
          "Title": "Lorem",
          "Picture": "https://picsum.photos/893",
          "Price": 16,
          "User": "Powell",
          "UID": 3136072438,
          "userPic": "https://picsum.photos/187",
          "Text": "Fugiat culpa labore do consequat ullamco. Aliquip fugiat esse incididunt do enim do sunt qui commodo ea. Commodo et amet non tempor consequat in ullamco mollit ad. Aliqua fugiat voluptate do excepteur Lorem nulla commodo."
        }
    ]

file Post.js

    import React from 'react';
    import { Avatar, Card, Title, Paragraph, Text, IconButton } from 'react-native-paper';

    export default function (props) {
        const LeftContent = () => <Avatar.Image size={40} source={{uri: props.userPic}}/>
        return (
                <Card>
                    <Card.Title title={props.User} subtitle={props.Price} left={LeftContent} />
                    <Card.Content>
                        <Title>{props.Title}</Title>
                        <Paragraph>{props.Text}</Paragraph>
                    </Card.Content>
                    <Card.Cover source={{ uri: props.Picture }} />
                    <Card.Actions>
                        <IconButton icon='heart' color={Colors.primary} onPress={() => onFavorite(props)}/>
                        <Text style={{color: Colors.primary}}>  |   </Text>
                        <IconButton icon='share' color={Colors.primary} onPress={() => onShare(props)}/>
                        <Text style={{color: Colors.primary}}>  |   </Text>
                        <IconButton icon='cash' color={Colors.primary} onPress={() => onBuy()}/>
                        <Text style={{color: Colors.primary}}>  |   </Text>
                        <IconButton icon='flag' color={Colors.primary} onPress={() => onReport(props)}/>
                    </Card.Actions>
                </Card>
                
        );
    }

Answer 1

If you import your custom component from your code do not use curly braces import directly

Your code

import { snapshotToArray } from '../components/utils/snapshotToArray';

New code

import snapshotToArray  from '../components/utils/snapshotToArray';

I also faced this kind of error and it was solved by doing the above code, hope this will work for you

Answer 2

Note to myself:

ALWAYS CHECK THE NAMES OF THE VARIABLES

{value_db.map (Post => (<Post />))}

Post = Post