How to format this date Timestamp(seconds=1676238124, nanoseconds=838000000) in react native

Question

Im fetching some data from firestore, the date fields are in the format of {seconds: XXXXX, nanoseconds: XXXXX}. React Native complains about this saying this format is not a serializable value so to those fields I do this:

docData.createdAt.toLocaleString()

That gives me dates in the following format:

Timestamp(seconds=13223213, nanoseconds=12312312)

When I want to render those date fields with a human format like ISOString or LocaleDateString or anything it doesnt let me.

I've tried to do new Date(createdAt) but that gives me NaN. I've also tried createdAt.toDate() | createdAt.toISOString() it doesnt recognize the functions. I've also tried Timestamp.fromDate(createdAt) but it doesnt work either.

I want to get my dates in a human reading format like DD/MM/YYYY HH:mm:ss

Here some pieces of code:

Fetching data: Some of my attempts

I'd like to have some hints or ideas or how to approach this issue.

To create a *Date* in POJS it would be `new Date(seconds * 1e3 + nanoseconds / 1e6)`. From there it's just [formatting a *Date*](https://stackoverflow.com/search?q=%5Bjavascript%5D+how+to+format+a+date). — RobG, Feb 16 '23 at 00:28
The thing is a that point, the format "Timestamp(seconds, nanoseconds) was not an object so I couldn't do something like "date.seconds — David Peña, Feb 17 '23 at 02:48
How you extracted the values for seconds and nanoseconds was entirely up to you. It seems the issue wasn't about parsing anyway. — RobG, Feb 17 '23 at 03:14
Technically it is, because if I didn't set to false the serializable check I'd be with the same issue, getting a date the format I specified in the question. But thanks :) — David Peña, Feb 18 '23 at 03:47

score 1 · Answer 1 · answered Feb 16 '23 at 12:12

****we can use this format ..... work for me ****

import moment from 'moment';  <--- import this line 

const timestamp = 1676238124;
const nanoseconds = 838000000;


const Date = moment.unix(timestamp).add(nanoseconds / 1000000, 'milliseconds');
const Fordate = Date.format('YYYY-MM-DD HH:mm:ss.SSS');
console.warn(Fordate)

score 0 · Accepted Answer · answered Feb 17 '23 at 02:46

Although the above answer works, this is what I did:

The issue was caused because of the SerializableCheck from redux [https://redux-toolkit.js.org/api/serializabilityMiddleware] so I decided to set this middleware to false so It won't cause this error.

This is a StackOverFlow question about this topic that I found [https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using]

Now, about the date formats I did some changes:

Having disabled the serializeCheck option, now I can use .toDate() functions

Now wherever I need a date in a specific format I simply use a global function that receives two params: date & format and using momentJS the rest is easy.

How to format this date Timestamp(seconds=1676238124, nanoseconds=838000000) in react native

2 Answers2