Today problem is that I encountered an issue while using react-native-paper-dates and the weekdays appear on the Calendar Modal was not correct. It was off by 1 day, for example today is 15th July 2024 and the 15th was supposed to appear on Monday column but instead it was on the Sunday column instead.

Eventually I figure out that the problem had something to do with Intl.DateTimeFormat because I’ve tried running the below code on 2 environment; mine and a Javascript runtime on Mozilla.dev (I know it’s so silly but I tried lol).

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);
//"UTC" on my local development env
//"Asia/Phnom_Penh" on Mozilla.dev

Now I got my clue, so I whine to my co-worker and he mentioned that Javascript’s Intl isn’t stable for our app. So he sent me this formatjs link here that mentioned Javascript’s Engine does not expose default timezone so there’s no way to get default timezone from it; and our React native app is using Hermes Engine, which I assume it doesn’t expose anything about timezone to Javascript’s Intl so that’s why it always default to “UTC” when I try to run console.log(Intl.DateTimeFormat().resolvedOptions().timeZone) .

Now that I got my answer; I simply try the code below and the issue is resolved. By having a proper timezone, the weekdays are now correct on every column on the Calendar Modal.

import '@formatjs/intl-datetimeformat/polyfill'
import '@formatjs/intl-datetimeformat/add-all-tz.js'

//If this statement doesn't work, use expo-localization's getCalendar()
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone

if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
  Intl.DateTimeFormat.__setDefaultTimeZone('America/Los_Angeles')
}

//For my case, I have to use expo-localization
const timezone = Localization.getCalendars()[0].timezone