formatMessage with ICU behave different then formatNumber

[idoodler]

Which package?

react-intl

Describe the bug

When formatting a string that contains a number using formatMessage I get the US style number format, but If I format the same number using formatNumber its correctly formated using the German format.

I see this behaviour on my iPhone which is in the Region "Germany" with Language "Germany". The Locale is correctly set and returns de.

To Reproduce

Codesandbox URL

Not aplicable

Reproducible Steps/Repo

Steps to reproduce the behavior:

import './polyfills'; // Here we do import all the react-intl polyfils for native platforms, including all the locale-data files we need
import {
	findBestLanguageTag,
	getLocales,
	getTimeZone,
} from 'react-native-localize';
import { locales } from '../locales';
import { createIntl, createIntlCache } from 'react-intl';

if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
	// @ts-expect-error __setDefaultTimeZone is not in the type definition
	Intl.DateTimeFormat.__setDefaultTimeZone(getTimeZone());
}

const defaultLocale = 'en-US';
const cache = createIntlCache();

const getBestLanguageTag = () => {
	const deviceLocales = getLocales();
	return (
		findBestLanguageTag(
			[
				...Object.values(deviceLocales).map(
					({ languageCode }) => languageCode,
				),
				...Object.values(deviceLocales).map(
					({ languageTag }) => languageTag,
				),
			].filter(langTag => Object.keys(locales).includes(langTag)),
		) ?? {
			languageTag: defaultLocale,
		}
	);
};

const { languageTag: locale } = getBestLanguageTag();

const getIntl = () =>
	createIntl(
		{
			locale,
			messages: locales[locale],
			defaultLocale,
			onError: error => {
				if (error.code === 'MISSING_TRANSLATION') {
					return;
				}
				throw error;
			},
		},
		cache,
	);

export const intl = getIntl();
export { locale };

import {intl, locale} from `./translationProvider` // Same file as above
appLogger.debug('Internationalization', {
	locale,
	symbols:
		Intl.NumberFormat.localeData?.[locale]?.numbers.symbols.latn,
});
const formatTest = 100000.1234;
appLogger.debug('Internationalization', {
	number: `${formatTest.toFixed(4)} = ${intl.formatNumber(formatTest)}`,
	message: `${formatTest.toFixed(4)} = ${intl.formatMessage(
		{
			defaultMessage: '{val, number}',
		},
		{
			val: formatTest,
		},
	)}`,
});

Expected behavior

In the locale de both results should be 100.000,123, not 100,000.123

Screenshots

Desktop (please complete the following information):

• OS: maCOS
• Browser: -
• Version -

Smartphone (please complete the following information):

• Device: iPhone 15 Pro
• OS: iOS 17.3
• Browser: -
• Version -

[idoodler]

I can work around it in the first file

const getIntl = () =>
    createIntl(
        {
            locale,
            messages: locales[locale],
            defaultLocale,
            onError: error => {
                if (error.code === 'MISSING_TRANSLATION') {
                    return;
                }
                throw error;
            },
        },
        cache,
    );

const internalIntl = getIntl();
const formatMessageOverride: typeof internalIntl.formatMessage<string> = (
    ...args: Parameters<typeof internalIntl.formatMessage<string>>
) => {
    const [description, values, opts] = args;
    return internalIntl.formatMessage<string>(description, values, {
        ...(opts ?? {}),
        formatters: {
            // @ts-ignore
            getDateTimeFormat: internalIntl.formatters.getDateTimeFormat,
            getPluralRules: internalIntl.formatters.getPluralRules,
            ...(opts?.formatters ?? {}),
            getNumberFormat: (locals, opts) => {
                return {
                    ...internalIntl.formatters.getNumberFormat(locals, opts),
                    format: internalIntl.formatNumber,
                };
            },
        },
    });
};
export const intl = {
    ...internalIntl,
    formatMessage: formatMessageOverride,
    $t: formatMessageOverride,
};

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.