CODEWITHSUNDEEP
firebasereact-nativegoogle-cloud-firestorereact-native-flatlist
Ruchira Swarnapriya
Ruchira Swarnapriya

Reputation: 1015

Display Date from Firestore timestamp in Flatlist

I have a Flatlist to display data from Firestore, Flatlist render item as follows,

const Card = ({ item }) => (

    <View style={styles.card}>           
        <View style={styles.itemDetails}>
          <Text style={styles.itemTitle}>{item.title}</Text>
          <Text style={styles.itemDescription}>{item.description}</Text>
        </View>
        <View style={styles.timerContainer}>
          <Text style={styles.timer}>{item.expTime}</Text>
          <Text style={styles.palceHolder}>Remaning Time</Text>
        </View>
    </View>
);

When I'm display time as above I got to following error

enter image description here

Can anyone help me to solve this problem.Thank you

Upvotes: 0

Views: 405

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

The problem happens when you try to render an object inside the Text, You will have to convert the date before showing it, try something like below.

const Card = ({ item }) => {

const time=  new Date(
      item.expTime.seconds * 1000 + item.expTime.nanoseconds / 1000000,
    );
return (
    <View style={styles.card}>           
        <View style={styles.itemDetails}>
          <Text style={styles.itemTitle}>{item.title}</Text>
          <Text style={styles.itemDescription}>{item.description}</Text>
        </View>
        <View style={styles.timerContainer}>
          <Text style={styles.timer}>{time.toDateString()}</Text>
          <Text style={styles.palceHolder}>Remaning Time</Text>
        </View>
    </View>
)};

Upvotes: 1

Related Questions