Which package?

react-intl

Describe the bug

I am using FormattedDateTimeRange in a React Native application with the following setup:

<FormattedDateTimeRange
  from={startDate}
  to={endDate}
  weekday="short"
  day="numeric"
  month="short"
  hour="2-digit"
  minute="2-digit"
  hour12={config.use12HourTime}
  year={thisYear ? undefined : "numeric"}
/>

When the from and to dates fall on the same day (with different times), I expect the output to be:

Sun, 22 Sept, 14:00–16:00

However, the actual output I see is:

Sun, 22 Sept, 12:00–Sun, 22 Sept, 14:00

There are two issues here:

1. The date and day are duplicated.
2. The times are shown in UTC instead of the user's device timezone.

When I remove the polyfills and use FormattedDate for testing, it correctly respects the device timezone, which makes me suspect this is an issue with the polyfills. Both of these issue don't occur in a normal browser environment (react, not react-native).

To Reproduce

Add the following polyfills:

import "@formatjs/intl-getcanonicallocales/polyfill";
import "@formatjs/intl-locale/polyfill";
import "@formatjs/intl-pluralrules/polyfill";
import "@formatjs/intl-numberformat/polyfill";
import "@formatjs/intl-datetimeformat/polyfill";
import "@formatjs/intl-relativetimeformat/polyfill";
import "@formatjs/intl-relativetimeformat/locale-data/en";
import "@formatjs/intl-pluralrules/locale-data/en";
import "@formatjs/intl-numberformat/locale-data/en";
import "@formatjs/intl-datetimeformat/locale-data/en";
import "@formatjs/intl-datetimeformat/add-all-tz";

Component example:

const startDate = new Date("2024-09-22T14:00:00Z");
const endDate = new Date("2024-09-22T16:00:00Z");

const thisYear = startDate.getFullYear() === new Date().getFullYear();

const config = {
  use12HourTime: false,
};

return (
  <FormattedDateTimeRange
    from={startDate}
    to={endDate}
    weekday="short"
    day="numeric"
    month="short"
    hour="2-digit"
    minute="2-digit"
    hour12={config.use12HourTime}
    year={thisYear ? undefined : "numeric"}
  />
);

Expected behavior

1. The date should not be duplicated; I expect it to be displayed as Sun, 22 Sept, 14:00–16:00 when the from and to dates are the same day.
2. The time should be shown in the user's device timezone instead of UTC by default (I can get this working when removing the polyfills and using FormattedDate to test)

Smartphone:

• Device: iPhone 12
• OS: iOS 18.0
• Browser: N/A
• Version: react-intl 6.6.8

Additional context

Thanks in advance for helping, really appreciate what you guys are building!