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
>Solution :
<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.