Full error: Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead.

Code: ...

const docRef = collection(db, 'posts')
const [docSnapshot] = useCollection(docRef)

...

{docSnapshot?.docs?.map((feed) => ( 
                        <Feed
                            key={feed.data().id}
                            navigation={navigation}
                            username={feed.data().username}
                            theme={feed.data().theme}
                            body={feed.data().body}
                            imagesURL={feed.data().imagesURL}
                            photoURL={feed.data().photoURL}
                            created_at={feed.data().created_at}
                            comments={feed.data().comments}
                            likes={feed.data().likes}
                            shares={feed.data().shares}
                        />
                    ))}

...

Firebase: firebase

Feed:

import React from 'react'

import { View } from 'react-native'

import styled from 'styled-components/native'

import {
    Entypo,
    AntDesign,
    MaterialCommunityIcons
} from '@expo/vector-icons'
import { Avatar, Image } from 'react-native-elements'
import { TouchableOpacity } from 'react-native-gesture-handler'

const Container = styled.View`
    flex: 1;
`
const Header = styled.View`
    height: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 0 11px;
`
const Row = styled.View`
    align-items: center;
    flex-direction: row;
`
const User = styled.Text`
    font-size: 12px;
    font-weight: bold;
    color: #222121;
`
const Time = styled.Text`
    font-size: 9px;
    color: #747476;
`
const Post = styled.Text`
    font-size: 14px;
    color: #222121;
    line-height: 14px;
    margin-top: 15px;
    padding: 0 11px;
`
const Photo = styled.Image`
    width: 100%;
    height: 300px;
`
const Footer = styled.View`
    padding: 0 11px;
`
const FooterCount = styled.View`
    flex-direction: row;
    justify-content: space-between;
    padding: 9px 0;
`
const IconCount = styled.View`
    background: #1878f3;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
`
const TextCount = styled.Text`
    font-size: 11px;
    color: #424040;
`
const Separator = styled.View`
    width: 100%;
    height: 1px;
    background: #f9f9f9;
`
const FooterMenu = styled.View`
    flex-direction: row;
    justify-content: space-between;
    padding: 9px 0;
`
const Button = styled.TouchableOpacity`
    flex-direction: row;
`
const Icon = styled.View`
    margin-right: 6px;
`
const Text = styled.Text`
    font-size: 12px;
    color: black;
`
const BottomDivider = styled.View`
    width: 100%;
    height: 9px;
    background: #f0f2f5;
`

const addLike = () => {

}

const addShare = () => {

}

const Feed = ({ navigation, theme, username, body, comments, shares, likes, imagesURL, photoURL, created_at }) => {
    return (
        <>
            <Container>
                <Header>
                    <Row>
                        <TouchableOpacity onPress={() => navigation.navigate('UserScreen', {
                            userName: username
                        })}>
                            <Avatar
                                rounded
                                source={{
                                    uri: photoURL
                                }}
                            />
                        </TouchableOpacity>

                        <View style={{paddingLeft: 10}}>
                            <TouchableOpacity onPress={() => navigation.navigate('ThemeScreen', {
                                theme: theme
                            })}>
                            <User>{theme}</User>
                            </TouchableOpacity>
                            <Row>
                                <Text>{created_at}</Text>
                                
                                <Entypo
                                    name='dot-single'
                                    size={18}
                                    color='#747476'
                                />

                                <TouchableOpacity onPress={() => navigation.navigate('UserScreen', {
                                    userName: username
                                })}>
                                <Text>Posted by {username}</Text>
                                </TouchableOpacity>
                            </Row>
                        </View>
                    </Row>

                    <TouchableOpacity onPress={() => console.log('Dots')}>
                        <Entypo
                            name='dots-three-horizontal'
                            size={15}
                            color='#222121'
                        />
                    </TouchableOpacity>
                </Header>

                <Post>{body}</Post>

                {imagesURL?.map((imageURL) => (
                    <Photo resizeMode='contain' source={{uri: imageURL}} key={imageURL} />
                ))}

                <Footer>
                    <Separator />

                    <FooterMenu>
                        <Button>
                            <Icon>
                                <AntDesign
                                    name='like2'
                                    size={20}
                                    color='#424040'
                                />
                            </Icon>

                            <TouchableOpacity onPress={() => addLike()}>
                                <Text>{likes} Likes</Text>
                            </TouchableOpacity>
                        </Button>

                        <Button>
                            <Icon>
                                <MaterialCommunityIcons
                                    name='comment-outline'
                                    size={20}
                                    color='#424040'
                                />
                            </Icon>

                            <TouchableOpacity onPress={() => navigation.navigate('PostScreen', {
                                username: username,
                                theme: theme,
                                body: body,
                                comments: comments,
                                photoURL: photoURL,
                                imagesURL: imagesURL,
                                shares: shares,
                                likes: likes,
                                created_at: created_at
                            })}>
                            <Text>{comments} Comments</Text>
                            </TouchableOpacity>
                        </Button>

                        <Button>
                            <Icon>
                                <MaterialCommunityIcons
                                    name='share-outline'
                                    size={20}
                                    color='#424040'
                                />
                            </Icon>

                            <TouchableOpacity onPress={() => addShare()}>
                                <Text>{shares} Shares</Text>
                            </TouchableOpacity>
                        </Button>
                    </FooterMenu>
                </Footer>
                <BottomDivider />
            </Container>
        </>
    )
}

export default Feed

With console log all is working I really have no idea

i don't know what to write i just need to be able to post this questions because there is too much code so im writing this pointless text

CodePudding user response：

<Text>{created_at}</Text>

created_at is an object (specifically, a Timestamp), so you can't put it as a child. It has various functions that you can use to manipulate it, so for example you could do:

<Text>{created_at.seconds}</Text>

or

<Text>{created_at.toString()}</Text>

or

<Text>{created_at.toDate().toLocaleTimeString()}</Text>

There's many things you could do, it just depends what you want to show. But you can't show the whole object.