Get the time zone with React Native

Question

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?

Do you want to get the device timezone somehow? can you not just get it from `getTimezoneOffset()` on a Date object (in JS)? — BradByte, May 31 '16 at 18:25
It worked! 'var d = new Date(); var n = d.getTimezoneOffset() / 60;' and n gave the number of hours I have to subtract. Thanks! Answer and I'll upvote your answer :) — Thanh-Quy Nguyen, May 31 '16 at 18:33

user295145 · Answer 1 · 2018-01-14T23:00:05.703

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

edited Jan 14 '18 at 23:00

answered Jan 08 '18 at 02:22

user295145

813
1
6
10

14

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
5

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

score 25 · Accepted Answer · answered May 31 '16 at 18:37

25

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;

answered May 31 '16 at 18:37

BradByte

10,690
2
36
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
Wait... I'm -3 actually, and it's saying 3. – Broda Noel Jan 23 '21 at 04:13

Dan · Answer 3 · 2020-10-28T19:58:40.823

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:

If you're using "bare" react native:

"react-native-localize" library is a good option.
https://github.com/zoontek/react-native-localize

console.log(RNLocalize.getTimeZone());
// -> "Europe/Paris"

If you're using expo:

"expo-localization" is the best option.
https://docs.expo.io/versions/latest/sdk/localization/

 console.log(Localization.timezone);
// -> "Europe/Paris"

score 9 · Answer 4 · edited May 21 '19 at 13:16

9

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.

edited May 21 '19 at 13:16

Nikola Mihajlović

2,089
18
21

answered Jul 01 '18 at 03:13

Igor

127
2
6

A link-only answer is not recommended. Instead, paraphrase the link to your question, as well as keep the link. – Ṃųỻịgǻňạcểơửṩ Jul 24 '18 at 01:42
3

currently it is `import * as Localization from 'expo-localization';` – x-magix Nov 03 '20 at 13:57

score 8 · Answer 5 · edited May 23 '17 at 11:47

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.

edited May 23 '17 at 11:47

Community

1
1

answered Apr 27 '17 at 08:14

Richard Szalay

81,010
19
172
232

1

moment.js is [considered legacy](https://momentjs.com/docs/#/-project-status/) – Anand Rockzz Oct 10 '20 at 08:53
This isn't supported in Android as there is no support for `Intl` – Miguel Coder Jun 07 '21 at 18:56

score 4 · Answer 6 · answered Dec 20 '19 at 19:54

4

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"

answered Dec 20 '19 at 19:54

Craig

79
4

4

Is there an equivalent that works for Android? Intl only works in iOS for me as well. – Rebecca Campbell May 28 '20 at 01:00
1

To enable on Android, you need to uncomment a section of your `app/build.gradle` file. Mine is on line 109. Specifically `def jscFlavor = 'org.webkit:android-jsc-intl:+'` – mikeislearning Feb 19 '21 at 02:50
2

[Unhandled promise rejection: ReferenceError: Can't find variable: Intl] – Ammar Ismaeel Mar 08 '21 at 12:55

score 0 · Answer 7 · answered Mar 15 '22 at 23:12

0

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

answered Mar 15 '22 at 23:12

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

Get the time zone with React Native

7 Answers7

Linked