48

I'd like to get the timezone of the phone user so I can add or substract it to the UTC times I get from my API, and then make operations on them (for notifications, for example).

I only found how to add an offset with DatePickerIOS, but nothing else... Is it possible to get it from the front?

Thanh-Quy Nguyen
  • 2,995
  • 7
  • 30
  • 46

9 Answers9

56

I found it is better to get the actual timezone ID (such as America/New_York) and then set your server program to work using that timezone at the beginning. To get that, use the react-native-device-info library: https://www.npmjs.com/package/react-native-device-info

import DeviceInfo from 'react-native-device-info';

console.log(DeviceInfo.getTimezone());   //   'America/New_York'

If you get an error about 'tvOS' during compilation, see this fix: https://github.com/rebeccahughes/react-native-device-info/issues/286

user295145
  • 849
  • 1
  • 6
  • 10
  • 17
    Does not work since version 3.0.0. Check this instead: https://github.com/react-native-community/react-native-localize#gettimezone – Maksym Bezruchko Oct 09 '19 at 15:33
  • 6
    This method is deprecated in latest version of react-native-device-info. and is no longer there in documentation. Related PR: https://github.com/react-native-community/react-native-localize/pull/65 – AFLAH ALI Oct 26 '19 at 07:57
  • This was deprecated from react-native-device-info. so it will not be work anymore! use react-native-localize to get the timezone – Vidurajith Darshana Dec 16 '21 at 03:31
28

Pretty much anything you could do in JavaScript on the browser (with exception, of course), you can do in React Native. I would initiate a new date object and call getTimezoneOffset() on it to get the number of minutes the timezone is offset locally.

var date = new Date();
var offsetInHours = date.getTimezoneOffset() / 60;
BradByte
  • 11,015
  • 2
  • 37
  • 41
  • 3
    this doesn't work properly. I'm in UTC-3 and this script returns just 3. I can't guess if is UTC+3 or UTC-3. – Cosmitar May 05 '18 at 00:29
  • @Cosmitar It's supposed to return minutes, not hours... what does it return if you run it in your browser console? – BradByte May 07 '18 at 19:04
  • if it returns minutes, why is the var called `offsetInHours`?. The result in the browser console is 3. – Cosmitar May 09 '18 at 02:48
  • 1
    You'll notice the method returns minutes, but my snippet divides by 60 to get hours. Also, the OP wanted the hours to add or subtract, not necessarily a negative number. I'd recommend something like moment for what you need. – BradByte May 10 '18 at 21:40
  • 2
    This is function is not accurate since it doesn't consider DST – eyalyoli Jan 07 '21 at 11:39
  • 1
    Wait... I'm -3 actually, and it's saying 3. – Broda Noel Jan 23 '21 at 04:13
24

I also needed to get the time zone in my React Native App. But my needs required to get a timezone in IANA format rather than the offset.

The library suggested above "react-native-device-info", deprecated the timeZone method and therefore I had to search for updated alternatives.

I'm using expo and I had problems using "react-intl" library, but I found two libraries that can do the job:

  1. If you're using "bare" react native:
console.log(RNLocalize.getTimeZone());
// -> "Europe/Paris"
  1. If you're using expo:
 console.log(Localization.timezone);
// -> "Europe/Paris"
Dan
  • 458
  • 1
  • 6
  • 11
10

If you build your project with Expo, you can use Localization object.

Import:

import { Localization } from 'expo';

Use:

console.log(Localization.timezone)

It will return the current time zone in display format, e.g. America/Los_Angeles.

Nikola Mihajlović
  • 2,286
  • 2
  • 19
  • 23
Igor
  • 146
  • 2
  • 8
10

To get the timezone in React Native (or on the web), I use this:

Intl.DateTimeFormat().resolvedOptions().timeZone

which returns something like: "America/Los_Angeles"

Craig
  • 139
  • 1
  • 5
8

I'd recommend against using an offset as it doesn't cater for daylight saving or any other adjustments that the operating system can.

Instead have JavaScript do the conversion from UTC for you. This SO answer shows an example: Convert UTC date time to local date time using JavaScript

If you need to convert to an arbitrary time zone, you should look at using a library like moment.js for the same reasons I mentioned above.

Community
  • 1
  • 1
Richard Szalay
  • 83,269
  • 19
  • 178
  • 237
1

please try react-native-tz, built this when I couldnt find a working alternative... its based on react-native-timezone, though a newer implementation.

Nervous_cat
  • 19
  • 4
  • 9
0

DeviceInfo.getTimeZone() was moved to react-native-localize

ianhunterharold
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 16 '22 at 06:29
0

Easiest solution is with Date() in 1 Line. For the offset variable you just calc the difference between UTCHours and Hours of User-> then you add this offset* 60 * 60 * 1000 to seconds which you for example get from Firebase. This way you can get the right Date+Time

let offset = new Date().getHours() - new Date().getUTCHours()//this after seconds: + offset * 60 * 60 * 1000
            let year = new Date(item.creation.seconds * 1000).toISOString().slice(2, 4)
            let month = new Date(item.creation.seconds * 1000 + offset * 60 * 60 * 1000).toISOString().slice(5, 7)
            let day = new Date(item.creation.seconds * 1000 + offset * 60 * 60 * 1000).toISOString().slice(8, 10)
            let time = new Date(item.creation.seconds * 1000 + offset * 60 * 60 * 1000).toISOString().slice(11, 16)
            let endvalue = month + "." + day + "." + year + "  " + time
            setdate(endvalue)
vana22
  • 63
  • 4