How to work with UTC time properly in React Native

Zuhair Naqi — Sat, 10 Apr 2021 16:23:42 +0000

In this article, we’ll learn how to use the UTC date-time in a React Native application using JavaScript. This is to handle timezone differences between the client and the server. Imagine that you have a global application that has users in both Europe and Asia. And a user creates a calendar event in Europe. The users in Asia now should be able to see appropriate event times based on their time zone.

How to do it?

Let’s start with how we can convert the date timezone between local time and the UTC date-time on Android and iOS.
Note: When you are testing the Date conversion using a debugger, it uses the Browser’s date. And not the device’s date. So integrate Date without debugging mode.

1. Getting Current UTCTime String:

new Date().toISOString()

2. Converting device local time to UTC time string:

To convert the device’s local time into a UTC time string, before sending it to the server:
_ If the date is a string, and in the format ‘2021–10–22’ (yyyy-MM-dd), convert it to a standard time string.
For example, to ‘2020–10–21T19:00:00.000Z’
_ Then use the following method to convert this standard date string to UTC date-time string:

const convertLocalTimeToUTCTime = () => {
 const dateString = '2021-10-22T00:00:00';
 const [fullDate, time] = dateString.split('T');
 const [year, month, date] = fullDate.split('-');
 const [hour, minute, second] = time.split(':');
 const dateTime = new Date(year, month, date, hour, minute, second);
 return dateTime.toISOString();
};
//********  OR directly pass dateString to new Date *********//
const convertLocalTimeToUTCTime = (dateString) => {
  let date = new Date(dateString);
  if (Platform.OS === PLATFORM.IOS) {
    return date.toISOString();
  }
  return new Date(
    date.getUTCFullYear(),
    date.getUTCMonth(),
    date.getUTCDate(),
    date.getUTCHours(),
    date.getUTCMinutes(),
    date.getUTCSeconds(),
  ).toISOString();
};

3. Converting UTC date-time string to device’s local time:

Make sure your UTC date-time string is in the standard format, for example ‘2021–10–22T05:00:00.000Z’
Then use the following method to convert this date string into the device’s local date:

const convertUTCToLocalTime = (dateString) => {
  let date = new Date(dateString);
  const milliseconds = Date.UTC(
    date.getFullYear(),
    date.getMonth(),
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds(),
  );
  const localTime = new Date(milliseconds);
  localTime.getDate() // local date
  localTime.getHours() // local hour
};

Summary: