Display Date from Firestore timestamp in Flatlist

Question

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

Can anyone help me to solve this problem.Thank you

The error is occurring as its an object, check this question on converting it to a string stackoverflow.com/questions/52247445/… — Guruparan Giritharan
I saw that question, problem is convert timestamp to date inside flatlist — Ruchira Swarnapriya

Guruparan Giritharan Guruparan Giritharan · Accepted Answer · 2021-03-08T03:59:28

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>
)};

Display Date from Firestore timestamp in Flatlist

1 Answers