Merge pull request #38565 from callstack-internal/audit/app-startup/r…

…emove-intl-polyfills

package.json

@@ -65,7 +65,6 @@
     "@expensify/react-native-live-markdown": "0.1.5",
     "@expo/metro-runtime": "~3.1.1",
     "@formatjs/intl-datetimeformat": "^6.10.0",
-    "@formatjs/intl-getcanonicallocales": "^2.2.0",
     "@formatjs/intl-listformat": "^7.2.2",
     "@formatjs/intl-locale": "^3.3.0",
     "@formatjs/intl-numberformat": "^8.5.0",
@@ -155,8 +154,8 @@
     "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
-    "react-native-release-profiler": "^0.1.6",
     "react-native-reanimated": "^3.7.2",
+    "react-native-release-profiler": "^0.1.6",
     "react-native-render-html": "6.3.1",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "3.29.0",

src/CONST.ts

@@ -2974,7 +2974,7 @@ const CONST = {
         CURRENCY: 'XAF',
         FORMAT: 'symbol',
         SAMPLE_INPUT: '123456.789',
-        EXPECTED_OUTPUT: 'FCFA 123,457',
+        EXPECTED_OUTPUT: 'FCFA 123,457',
     },
 
     PATHS_TO_TREAT_AS_EXTERNAL: ['NewExpensify.dmg', 'docs/index.html'],

src/libs/IntlPolyfill/index.android.ts

@@ -0,0 +1,17 @@
+import polyfillListFormat from './polyfillListFormat';
+import type IntlPolyfill from './types';
+
+/**
+ * Polyfill the Intl API, always performed for native devices.
+ */
+const intlPolyfill: IntlPolyfill = () => {
+    // Native devices require extra polyfills which are
+    // not yet implemented in hermes.
+    // see support: https://hermesengine.dev/docs/intl/
+
+    require('@formatjs/intl-locale/polyfill');
+
+    polyfillListFormat();
+};
+
+export default intlPolyfill;

src/libs/IntlPolyfill/index.native.ts → src/libs/IntlPolyfill/index.ios.ts

@@ -7,12 +7,21 @@ import type IntlPolyfill from './types';
  * Polyfill the Intl API, always performed for native devices.
  */
 const intlPolyfill: IntlPolyfill = () => {
-    // Native devices require extra polyfills
-    require('@formatjs/intl-getcanonicallocales/polyfill');
+    // Native devices require extra polyfills which are
+    // not yet implemented in hermes.
+    // see support: https://hermesengine.dev/docs/intl/
+
     require('@formatjs/intl-locale/polyfill');
+
+    // Required to polyfill NumberFormat on iOS
+    // see: https://github.com/facebook/hermes/issues/1172#issuecomment-1776156538
     require('@formatjs/intl-pluralrules/polyfill');
     polyfillNumberFormat();
+
+    // Required to polyfill DateTimeFormat on iOS
+    // see: https://github.com/facebook/hermes/issues/1172#issuecomment-1776156538
     polyfillDateTimeFormat();
+
     polyfillListFormat();
 };
 

src/libs/IntlPolyfill/polyfillNumberFormat.ts

@@ -1,21 +1,29 @@
 import CONST from '@src/CONST';
 
+const numberFormat = new Intl.NumberFormat(CONST.LOCALES.DEFAULT, {
+    style: CONST.POLYFILL_TEST.STYLE,
+    currency: CONST.POLYFILL_TEST.CURRENCY,
+    currencyDisplay: CONST.POLYFILL_TEST.FORMAT,
+});
+
 /**
  * Check if the locale data is as expected on the device.
  * Ensures that the currency data is consistent across devices.
  */
 function hasOldCurrencyData(): boolean {
-    return (
-        new Intl.NumberFormat(CONST.LOCALES.DEFAULT, {
-            style: CONST.POLYFILL_TEST.STYLE,
-            currency: CONST.POLYFILL_TEST.CURRENCY,
-            currencyDisplay: CONST.POLYFILL_TEST.FORMAT,
-        }).format(Number(CONST.POLYFILL_TEST.SAMPLE_INPUT)) !== CONST.POLYFILL_TEST.EXPECTED_OUTPUT
-    );
+    return numberFormat.format(Number(CONST.POLYFILL_TEST.SAMPLE_INPUT)) !== CONST.POLYFILL_TEST.EXPECTED_OUTPUT;
+}
+
+/**
+ * Checks if the formatToParts function is available on the
+ * Intl.NumberFormat object.
+ */
+function hasFormatToParts(): boolean {
+    return typeof numberFormat.formatToParts === 'function';
 }
 
 export default function () {
-    if (Intl && 'NumberFormat' in Intl && !hasOldCurrencyData()) {
+    if (Intl && 'NumberFormat' in Intl && !hasOldCurrencyData() && hasFormatToParts()) {
         return;
     }