Internationalization and Localization

JS INTL APIs

Support for a subset of ECMA-402 INTL APIs has been added to the Hermes Engine bundled with React Native for Vega.

See: https://hermesengine.dev/docs/intl/

The INTL methods supported may differ for Vega than for other platforms, refer to details below for supported methods.

INTL Supported Methods Vega

Intl.Collator

The Intl.Collator object enables language-sensitive string comparison.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator

import React, { useState } from 'react';
import { AppRegistry, I18nManager, ScrollView, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
    intlText: {
        fontSize: 18,
        color: 'white',
    }
});

const I18nManagerApp = () => {
    const ac = Intl ? new Intl.Collator().compare('a', 'c') : "Intl not avaliable";
    const ca = Intl ? new Intl.Collator().compare('c', 'a') : "Intl not avaliable";
    const aa = Intl ? new Intl.Collator().compare('a', 'a') : "Intl not avaliable";
    const de = Intl ? new Intl.Collator('de').compare('ä', 'z') : "Intl not avaliable";
    const sv = Intl ? new Intl.Collator('sv').compare('ä', 'z') : "Intl not avaliable";
    const des = Intl ? new Intl.Collator('de', { sensitivity: 'base' }).compare('ä', 'a') : "Intl not avaliable";
    const svs = Intl ? new Intl.Collator('sv', { sensitivity: 'base' }).compare('ä', 'a') : "Intl not avaliable";
    const des_base = Intl ? new Intl.Collator('de', { sensitivity: 'base' }).compare('äbc', 'abc') : "Intl not avaliable";
    const svs_base = Intl ? new Intl.Collator('sv', { sensitivity: 'base' }).compare('äbc', 'abc') : "Intl not avaliable";
    const des_accent = Intl ? new Intl.Collator('de', { sensitivity: 'accent' }).compare('äbc', 'abc') : "Intl not avaliable";
    const svs_accent = Intl ? new Intl.Collator('sv', { sensitivity: 'accent' }).compare('äbc', 'abc') : "Intl not avaliable";
    const desc_base = Intl ? new Intl.Collator('de', { sensitivity: 'base' }).compare('abcDef', 'abcdef') : "Intl not avaliable";
    const desc_accent = Intl ? new Intl.Collator('de', { sensitivity: 'accent' }).compare('abcDef', 'abcdef') : "Intl not avaliable";
    const desc_case = Intl ? new Intl.Collator('de', { sensitivity: 'case' }).compare('abcDef', 'abcdef') : "Intl not avaliable";
    const desc_variant = Intl ? new Intl.Collator('de', { sensitivity: 'variant' }).compare('abcDef', 'abcdef') : "Intl not avaliable";
    const cn = Intl ? new Intl.Collator('zh-CN').compare('你好', '再见') : "Intl not avaliable";
    const jp = Intl ? new Intl.Collator('jp-JP').compare('こんにちは', 'さようなら') : "Intl not avaliable";

    const emptyOptions = {
        locale: "Intl not avaliable",
        usage: "Intl not avaliable",
        sensitivity: "Intl not avaliable",
        ignorePunctuation: "Intl not avaliable",
        collation: "Intl not avaliable",
        numeric: "Intl not avaliable",
        caseFirst: "Intl not avaliable"
    };
    const inputLocale01 = 'sl-SI-u-co-phonebk-cu-usd';
    const inputOptions01 = { sensitivity: 'base' };
    const collator01 = Intl ? new Intl.Collator(inputLocale01, inputOptions01) : undefined;
    const usedOptions01 = collator01 ? collator01.resolvedOptions() : emptyOptions;

    const inputLocale02 = 'sl-SI-u-co-phonebk-cu-usd';
    const inputOptions02 = { collation: 'emoji' };
    const collator02 = Intl ? new Intl.Collator(inputLocale02, inputOptions02) : undefined;
    const usedOptions02 = collator02 ? collator02.resolvedOptions() : emptyOptions;

    const inputSupportedLocales = ['ban', 'id-u-co-pinyin', 'de-ID'];
    const inputSupportedOptions = { localeMatcher: 'lookup' };
    const supportedLocales = Intl ? Intl.Collator.supportedLocalesOf(inputSupportedLocales, inputSupportedOptions) : [];

    return (
            <ScrollView>
                <Text style={styles.intlText}>
                    Intl.Collator().compare('a', 'c') = {ac} // expect negative value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator().compare('c', 'a') = {ca} // expect positive value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator().compare('a', 'a') = {aa} // expect 0
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('de').compare('ä', 'z') = {de} // expect negative value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('sv').compare('ä', 'z') = {sv} // expect positive value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('de', {"{"} sensitivity: 'base' {"}"}).compare('ä', 'a') = {des} // expect 0
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('sv', {"{"} sensitivity: 'base' {"}"}).compare('ä', 'a') = {svs} // expect positive value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('de', {"{"} sensitivity: 'base' {"}"}).compare('äbc', 'abc') = {des_base} // expect 0
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('sv', {"{"} sensitivity: 'base' {"}"}).compare('äbc', 'abc') = {svs_base} // expect positive value
                </Text>

                <Text style={styles.intlText}>
                    Intl.Collator('de', {"{"} sensitivity: 'accent' {"}"}).compare('äbc', 'abc') = {des_accent} // expect positive value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('sv', {"{"} sensitivity: 'accent' {"}"}).compare('äbc', 'abc') = {svs_accent} // expect positive value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('de', {"{"} sensitivity: 'base' {"}"}).compare('abcDef', 'abcdef') = {desc_base} // expect 0
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('de', {"{"} sensitivity: 'accent' {"}"}).compare('abcDef', 'abcdef') = {desc_accent} // expect 0
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('de', {"{"} sensitivity: 'case' {"}"}).compare('abcDef', 'abcdef') = {desc_case} // expect positive value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('de', {"{"} sensitivity: 'variant' {"}"}).compare('abcDef', 'abcdef') = {desc_variant} // expect positive value
                </Text>

                <Text style={styles.intlText}>
                    Intl.Collator('zh-CN').compare('你好', '再见') = {cn} // expect negative value
                </Text>
                <Text style={styles.intlText}>
                    Intl.Collator('jp-JP').compare('こんにちは', 'さようなら') = {jp} // expect negative value
                </Text>

                <Text style={styles.intlText}>usedOptions01 = Intl.Collator({inputLocale01}, {JSON.stringify(inputOptions01)}).resolvedOptions();</Text>
                <Text style={styles.intlText}>usedOptions01.locale = {usedOptions01.locale}</Text>
                <Text style={styles.intlText}>usedOptions01.usage = {usedOptions01.usage}</Text>
                <Text style={styles.intlText}>usedOptions01.sensitivity = {usedOptions01.sensitivity}</Text>
                <Text style={styles.intlText}>usedOptions01.ignorePunctuation = {usedOptions01.ignorePunctuation.toString()}</Text>
                <Text style={styles.intlText}>usedOptions01.collation = {usedOptions01.collation}</Text>
                <Text style={styles.intlText}>usedOptions01.numeric = {usedOptions01.numeric.toString()}</Text>
                <Text style={styles.intlText}>usedOptions01.caseFirst = {usedOptions01.caseFirst}</Text>

                <Text style={styles.intlText}>usedOptions02 = Intl.Collator({inputLocale02}, {JSON.stringify(inputOptions02)}).resolvedOptions();</Text>
                <Text style={styles.intlText}>usedOptions02.locale = {usedOptions02.locale}</Text>
                <Text style={styles.intlText}>usedOptions02.usage = {usedOptions02.usage}</Text>
                <Text style={styles.intlText}>usedOptions02.sensitivity = {usedOptions02.sensitivity}</Text>
                <Text style={styles.intlText}>usedOptions02.ignorePunctuation = {usedOptions02.ignorePunctuation.toString()}</Text>
                <Text style={styles.intlText}>usedOptions02.collation = {usedOptions02.collation}</Text>
                <Text style={styles.intlText}>usedOptions02.numeric = {usedOptions02.numeric.toString()}</Text>
                <Text style={styles.intlText}>usedOptions02.caseFirst = {usedOptions02.caseFirst}</Text>

                <Text style={styles.intlText}>Intl.Collator.supportedLocalesOf({JSON.stringify(inputSupportedLocales)}, {JSON.stringify(inputSupportedOptions)}) = {JSON.stringify(supportedLocales)}</Text>
            </ScrollView>

        </View>
    );
};

export default I18nManagerApp;
AppRegistry.registerComponent('I18nManagerApp', () => I18nManagerApp);

Intl.DurationFormat

The Intl.DurationFormat object enables language-sensitive duration formatting.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';

const DurationFormatDemo = () => {
    if (!Intl || !Intl.DurationFormat) {
        return (
            <View>
                <Text>
                    Intl.DurationFormat : unavailable
                </Text>
            </View>
        );
    }

    const defaultDF = new Intl.DurationFormat();
    const enUSDigitalDF = new Intl.DurationFormat(['en-US'], { style: 'digital' });
    const frFRLongDF = new Intl.DurationFormat('fr-FR', { style: 'long' });
    const duration1 = { years: 1, months: 2, weeks: 3, days: 4 };
    const duration2 = { hours: 3, minutes: 18, seconds: 52 };
    return (
        <View>
            <Text>
                Intl.DurationFormat : available
            </Text>
            <Text>
                Example: Default locale and options,
                duration = {JSON.stringify(duration1)}
            </Text>
            <Text>
                format : {defaultDF.format(duration1)}
            </Text>
            <Text>
                formatToParts : {JSON.stringify(defaultDF.formatToParts(duration1))}
            </Text>
            <Spacer />
            <Text>
                Example: en-US locale and digital style,
                duration = {JSON.stringify(duration2)}
            </Text>
            <Text>
                format : {enUSDigitalDF.format(duration2)}
            </Text>
            <Text>
                formatToParts : {JSON.stringify(enUSDigitalDF.formatToParts(duration2))}
            </Text>
            <Spacer />
            <Text>
                Example: fr-FR locale and long style,
                duration = {JSON.stringify(duration1)}
            </Text>
            <Text>
                format : {frFRLongDF.format(duration1)}
            </Text>
            <Text>
                formatToParts : {JSON.stringify(frFRLongDF.formatToParts(duration1))}
            </Text>
            <Spacer />
            <Text>
                Example: fr-FR locale and long style,
                duration = {JSON.stringify(duration2)}
            </Text>
            <Text>
                format : {frFRLongDF.format(duration2)}
            </Text>
            <Text>
                formatToParts : {JSON.stringify(frFRLongDF.formatToParts(duration2))}
            </Text>
        </View>
    );
};

const IntlApp = () => {
    console.log('Intl Demo');

    return (
        <View style={DEFAULT_STYLES.CONTAINER}>
            <Text style={DEFAULT_STYLES.TITLE}>Intl Demos</Text>
            <ScrollView>
                <Text>
                    Intl : {Intl ? 'available' : 'unavailable'} // expect available
                </Text>
                <Text style={DEFAULT_STYLES.HEADING}>Intl.DurationFormat Demo</Text>
                <DurationFormatDemo />
            </ScrollView>
        </View>
    );
};

export default IntlApp;

Intl.DateTimeFormat

The Intl.DateTimeFormat object enables language-sensitive date and time formatting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

Intl.DateTimeFormat.format()

The format() method of Intl.DateTimeFormat instances formats a date according to the locale and formatting options of this Intl.DateTimeFormat object.

  const options1: Intl.DateTimeFormatOptions = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };
  // Intl.DateTimeFormat.format()
  const prototypeFormat= ()=>{    
    const date1 = new Date(2012, 5);  
    const dateTimeFormat2 = new Intl.DateTimeFormat('en-GB', options1); 
    return dateTimeFormat2.format(date1)
  }

Intl.DateTimeFormat.formatRange()

The formatRange() method of Intl.DateTimeFormat instances formats a date range in the most concise way based on the locales and options provided when instantiating this Intl.DateTimeFormat object.

  const options1: Intl.DateTimeFormatOptions = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };
  // Intl.DateTimeFormat.formatRange()
  const formatRange = () => {
    const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
    const endDate = new Date(Date.UTC(2008, 0, 10, 11, 0, 0));
    const dateTimeFormat = new Intl.DateTimeFormat('en', options1);
    return dateTimeFormat.formatRange(startDate, endDate);
  };

Intl.DateTimeFormat.formatRangeToParts()

The formatRangeToParts() method of Intl.DateTimeFormat instances returns an array of locale-specific tokens representing each part of the formatted date range produced by this Intl.DateTimeFormat object.

  const formatRangeToParts = () => {
    const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
    const endDate = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
    const dateTimeFormat = new Intl.DateTimeFormat('en', {
      hour: 'numeric',
      minute: 'numeric',
    });
    return dateTimeFormat.formatRangeToParts(startDate, endDate);
  };

Intl.DateTimeFormat.formatToParts()

The formatToParts() method of Intl.DateTimeFormat instances allows locale-aware formatting of strings produced by this Intl.DateTimeFormat object.

  const options1: Intl.DateTimeFormatOptions = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };
 // Intl.DateTimeFormat.formatToParts()
  const prototypeFormatToParts= ()=>{    
    const date = new Date(2012, 5);  
    const dateTimeFormat = new Intl.DateTimeFormat('en-US', options1);
    const parts = dateTimeFormat.formatToParts(date);
    return parts.map((p) => p.value);
  }

Intl.DateTimeFormat.resolvedOptions()

The resolvedOptions() method of Intl.DateTimeFormat instances returns a new object with properties reflecting the locale and date and time formatting options computed during initialization of this Intl.DateTimeFormat object.

 // Intl.DateTimeFormat.resolvedOptions()
  const prototypeResolvedOptions = () => {
    const region1 = new Intl.DateTimeFormat('zh-CN', {timeZone: 'UTC'});
    const options1 = region1.resolvedOptions();
    return `Locale - ${options1.locale}, Calendar - ${options1.calendar}, Numbering System - ${options1.numberingSystem}`
  };

Intl.DateTimeFormat.supportedLocalesOf()

The Intl.DateTimeFormat.supportedLocalesOf() static method returns an array containing those of the provided locales that are supported in date and time formatting without having to fall back to the runtime's default locale.

  // Intl.DateTimeFormat.supportedLocalesOf()
  const supportedLocalesOf = () => {
    const locales1 = ['ban', 'id-u-co-pinyin', 'de-ID'];
    const options: Intl.DateTimeFormatOptions = {localeMatcher: 'lookup'};
    return Intl.DateTimeFormat.supportedLocalesOf(locales1, options);
  };

Intl.RelativeTimeFormat

The Intl.RelativeTimeFormat object enables language-sensitive relative time formatting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat

Intl.RelativeTimeFormat() Creates a new Intl.RelativeTimeFormat object.

Intl.RelativeTimeFormat.format()

Formats a value and a unit according to the locale and formatting options of the given Intl.RelativeTimeFormat object.

const time = 3;
const unit = 'quarter';
const formatOptions: Intl.RelativeTimeFormatOptions = {style: 'short'};

    const formatRelativeTime = () => {
      const formatter = new Intl.RelativeTimeFormat('en', formatOptions);
      return formatter.format(time, unit);
    };

Intl.RelativeTimeFormat.formatToParts()

The formatToParts() method of Intl.RelativeTimeFormat instances returns an Array of objects representing the relative time format in parts that can be used for custom locale-aware formatting.

// formatToParts
  const formatToPartsOptions: Intl.RelativeTimeFormatOptions = {
    numeric: 'auto',
  };
  const formatToPartsTime = 15;
  const formatToPartsUnit = 'seconds';
  const formatToPartsRelativeTime = () => {
    const formatter = new Intl.RelativeTimeFormat('en', formatToPartsOptions);
    return formatter.formatToParts(formatToPartsTime, formatToPartsUnit);
  };

Intl.RelativeTimeFormat.resolvedOptions()

The resolvedOptions() method of Intl.RelativeTimeFormat instances returns a new object with properties reflecting the locale and relative time formatting options computed during initialization of this Intl.RelativeTimeFormat object.

  // resolve option
  const resolvedOption: Intl.RelativeTimeFormatOptions = {style: 'narrow'};

  const resolvedOptionObj = () => {
    return new Intl.RelativeTimeFormat('en', resolvedOption).resolvedOptions();
  };

Intl.RelativeTimeFormat.supportedLocalesOf()

The Intl.RelativeTimeFormat.supportedLocalesOf() static method returns an array containing those of the provided locales that are supported in relative time formatting without having to fall back to the runtime's default locale.

  // supportedLocalesOf
  const supportedLocales = ['ban', 'id-u-co-pinyin', 'de-ID'];
  const options: Intl.RelativeTimeFormatOptions = {localeMatcher: 'lookup'};

  const supportedLocalesOfObj = () => {
    const supportedLocalesOf = Intl.RelativeTimeFormat.supportedLocalesOf(
      supportedLocales,
      options,
    );
    return supportedLocalesOf;
  };
  

Intl.NumberFormat

The Intl.NumberFormat object enables language-sensitive number formatting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

Intl.NumberFormat() Creates a new NumberFormat object.

Intl.NumberFormat.format()

The format() method of Intl.NumberFormat instances formats a number according to the locale and formatting options of this Intl.NumberFormat object.

  const format = () => {
    const number = 123456.789;
    return  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(
      number,
    );
  }
// Expected output: "123.456,79 €"

Intl.NumberFormat.formatRange()

The formatRange() method of Intl.NumberFormat instances formats a range of numbers according to the locale and formatting options of this Intl.NumberFormat object.

  const formatRange = () => {
    const nf = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      maximumFractionDigits: 0,
    });
    return nf.formatRange(3, 5);
  };

Intl.NumberFormat.formatRangeToParts()

The formatRangeToParts() method of Intl.NumberFormat instances returns an Array of objects containing the locale-specific tokens from which it is possible to build custom strings while preserving the locale-specific parts. This makes it possible to provide locale-aware custom formatting ranges of number strings.

  const formatRangeToParts = () => {
    const startRange = 3500;
    const endRange = 9500;

    const formatter = new Intl.NumberFormat('de-DE', {
      style: 'currency',
      currency: 'EUR',
    });
    return formatter.formatRangeToParts(startRange, endRange);
  };

Intl.NumberFormat.formatToParts()

The formatToParts() method of Intl.NumberFormat instances allows locale-aware formatting of strings produced by this Intl.NumberFormat object.

  const formatToParts = () => {
    const amount = 654321.987;
    const options: Intl.NumberFormatOptions = {
      style: 'currency',
      currency: 'USD',
    };
    const numberFormat = new Intl.NumberFormat('en-US', options);
    return numberFormat.formatToParts(amount);
  };

Intl.NumberFormat.resolvedOptions()

The resolvedOptions() method of Intl.NumberFormat instances returns a new object with properties reflecting the locale and number formatting options computed during initialization of this Intl.NumberFormat object.

  const resolvedOptions = () => {
    const numberFormat1 = new Intl.NumberFormat('de-DE');
    const options1 = numberFormat1.resolvedOptions();
    return {
      locale: options1.locale,
      numberingSystem: options1.numberingSystem,
      style: options1.style,
    };
  };

Intl.NumberFormat.supportedLocalesOf()

The Intl.NumberFormat.supportedLocalesOf() static method returns an array containing those of the provided locales that are supported in number formatting without having to fall back to the runtime's default locale.

  const supportedLocalesOf = () => {
    const locales1 = ['ban', 'id-u-co-pinyin', 'de-ID'];
    const options1: Intl.NumberFormatOptions = {localeMatcher: 'lookup'};
    return Intl.NumberFormat.supportedLocalesOf(locales1, options1);
  };

Intl.Locale

The Intl.Locale object is a standard built-in property of the Intl object that represents a Unicode locale identifier. The Intl.Locale object was created to allow for easier manipulation of Unicode locales. Unicode represents locales with a string, called a locale identifier. The locale identifier consists of a language identifier and extension tags. Language identifiers are the core of the locale, consisting of language, script, and region subtags. Additional information about the locale is stored in the optional extension tags. Extension tags hold information about locale aspects such as calendar type, clock type, and numbering system type.

Traditionally, the Intl API used strings to represent locales, just as Unicode does. This is a simple and lightweight solution that works well. Adding a Locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale

Intl.Locale() Creates a new Locale object.

Intl.Locale.maximize()

The maximize() method of Intl.Locale instances gets the most likely values for the language, script, and region of this locale based on existing values.

 // Intl.Locale.prototype.maximize()
  const LocaleMaximize = (): Intl.Locale => {
    const locale = "en";
    const option: Intl.LocaleOptions = {
      "calendar": "gregory",
      "hourCycle": "h12"
    };
    const result = new Intl.Locale(locale, option).maximize();
    console.log(result); // en-Latn-US-u-ca-gregory-hc-h12
    return result;
  };

Intl.Locale.minimize()

The minimize() method of Intl.Locale instances attempts to remove information about this locale that would be added by calling maximize().

  // Intl.Locale.prototype.minimize()
  const LocaleMinimize = (): Intl.Locale => {
    const locale = "ar-Arab-EG";
    const option: Intl.LocaleOptions = {
      "calendar": "gregory",
      "hourCycle": "h12"
    };
    const result = new Intl.Locale(locale, option).minimize();
    console.log(result); // ar-u-ca-gregory-hc-h12
    return result;
  };

Intl.Locale.toString()

The toString() method of Intl.Locale instances returns this Locale's full locale identifier string.

  // Intl.Locale.prototype.toString()
  const LocaleToString = (): string => {
    const locale = "jp";
    const option: Intl.LocaleOptions = {
      "calendar": "gregory",
      "hourCycle": "h12"
    };
    const result = new Intl.Locale(locale, option).toString();
    console.log(result); // "jp-u-ca-gregory-hc-h12"
    return result;
  };

Intl.Locale.baseName

The baseName accessor property of Intl.Locale instances returns a substring of this locale's string representation, containing core information about this locale, including the language, and the script and region if available. baseName returns the language ["-" script] ["-" region] *("-" variant) subsequence of the unicode_language_id grammar. It only includes information explicitly specified in the constructor, either through the locale identifier string or the options object.

The set accessor of baseName is undefined. This property cannot be changed directly.

// Intl.Locale.prototype.baseName
  const LocalePropertyBaseName = (): string => {
    const locale = 'ko';
    const option: Intl.LocaleOptions = {
      script: 'Kore',
      region: 'KR',
      hourCycle: 'h23',
      calendar: 'gregory',
    };
    const result = new Intl.Locale(locale, option).baseName;
    console.log(result); // "ko-Kore-KR"
    return result;
  };

Intl.Locale.calendar

The calendar accessor property of Intl.Locale instances returns the calendar type for this locale. While most of the world uses the Gregorian calendar, there are several regional calendar eras used around the world. The calendar property's value is set at construction time, either through the ca key of the locale identifier or through the calendar option of the Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined. For a list of supported calendar types, see Intl.Locale.prototype.getCalendars(). The set accessor of calendar is undefined. This property cannot be changed directly.

  // Intl.Locale.prototype.calendar
  const LocalePropertyCalendar = (): string | undefined => {
    const locale = 'ko';
    const option: Intl.LocaleOptions = {
      script: 'Kore',
      region: 'KR',
      hourCycle: 'h23',
      calendar: 'gregory',
    };
    const result = new Intl.Locale(locale, option).calendar;
    console.log(result); // "gregory"
    return result;
  };

Intl.Locale.caseFirst

The caseFirst accessor property of Intl.Locale instances returns whether case is taken into account for this locale's collation rules. A locale's collation rules are used to determine how strings are ordered in that locale. Certain locales use a character's case (UPPERCASE or lowercase) in the collation process. This additional rule can be expressed in a Intl.Locale object's caseFirst property. There are 3 values that the caseFirst property can have - upper, lower and false.

  // Intl.Locale.prototype.caseFirst
  const LocalePropertyCaseFirst = (): Intl.LocaleCollationCaseFirst | undefined => {
    const locale = new Intl.Locale("fr-Latn-FR-u-kf-upper");
    const result = locale.caseFirst
    console.log(result); // upper
    return result;
  };

Intl.Locale.collation

The collation accessor property of Intl.Locale instances returns the collation type for this locale, which is used to order strings according to the locale's rules. Collation is the process of ordering strings of characters. It is used whenever strings must be sorted and placed into a certain order, from search query results to ordering records in a database. While the idea of placing strings in order might seem trivial, the idea of order can vary from region to region and language to language. The collation property's value is set at construction time, either through the co key of the locale identifier or through the collation option of the Intl.Locale() constructor. The latter takes priority if they are both present and if neither is present, the property has value undefined. For a list of supported collation types, see Intl.Locale.prototype.getCollations(). The set accessor of collation is undefined. This property cannot be changed directly.

  // Intl.Locale.prototype.collation
  const LocalePropertyCollation = (): string | undefined => {
    const locale = 'zh-Hant-u-co-zhuyin';
    const result = new Intl.Locale(locale).collation;
    console.log(result); // zhuyin
    return result;
  };

Intl.Locale.hourCycle

The hourCycle accessor property of Intl.Locale instances returns the hour cycle type for this locale. There are 2 main types of time keeping conventions (clocks) used around the world: the 12 hour clock and the 24 hour clock. The hourCycle property's value is set at construction time, either through the hc key of the locale identifier or through the hourCycle option of the Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined. For a list of supported hour cycle types, see Intl.Locale.prototype.getHourCycles(). The set accessor of hourCycle is undefined. This property cannot be changed directly.

  // Intl.Locale.prototype.hourCycle
  const LocalePropertyHourCycle = (): Intl.LocaleHourCycleKey | undefined => {
    const locale = 'ko';
    const option: Intl.LocaleOptions = {
      script: 'Kore',
      region: 'KR',
      hourCycle: 'h23',
      calendar: 'gregory',
    };
    const result = new Intl.Locale(locale, option).hourCycle;
    console.log(result); // "h23"
    return result;
  };

Intl.Locale.language

The language accessor property of Intl.Locale instances returns the language associated with this locale. Language is one of the core attributes of a locale. The Unicode specification treats the language identifier of a locale as the language and the region together (to make a distinction between dialects and variations, e.g. British English vs. American English). The language property of a Intl.Locale returns strictly the locale's language subtag. The language property's value is set at construction time, either through the language subtag (first part) of the locale identifier or through the language option of the Intl.Locale() constructor. The latter takes priority if they are both present. The set accessor of language is undefined. This property cannot be changed directly.

  // Intl.Locale.prototype.language
  const LocalePropertyLanguage = (): string => {
    const locale = 'ko';
    const option: Intl.LocaleOptions = {
      script: 'Kore',
      region: 'KR',
      hourCycle: 'h23',
      calendar: 'gregory',
    };
    const result = new Intl.Locale(locale, option).language;
    console.log(result); // "ko"
    return result;
  };

Intl.Locale.numberingSystem

The numberingSystem accessor property of Intl.Locale instances returns the numeral system for this locale. A numeral system is a system for expressing numbers. The numberingSystem property's value is set at construction time, either through the nu key of the locale identifier or through the numberingSystem option of the Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined. For a list of supported numbering system types, see Intl.Locale.prototype.getNumberingSystems().

  // Intl.Locale.prototype.numberingSystem
  const LocalePropertyNumberingSystem = (): string | undefined => {
    const locale = 'ko';
    const option: Intl.LocaleOptions = {
      script: 'Kore',
      region: 'KR',
      hourCycle: 'h23',
      calendar: 'gregory',
      numberingSystem: 'latn'
    };
    const result = new Intl.Locale(locale, option).numberingSystem;
    console.log(result); // "latn"
    return result;
  };

Intl.Locale.numeric

The numeric accessor property of Intl.Locale instances returns whether this locale has special collation handling for numeric characters. Like caseFirst, numeric represents a modification to the collation rules utilized by the locale. numeric is a boolean value, which means that it can be either true or false. If numeric is set to false, there will be no special handling of numeric values in strings. If numeric is set to true, then the locale will take numeric characters into account when collating strings. This special numeric handling means that sequences of decimal digits will be compared as numbers. For example, the string "A-21" will be considered less than "A-123".

  // Intl.Locale.prototype.numeric
  const LocalePropertyNumeric = (): boolean | undefined => {
    const locale = 'ko';
    const option: Intl.LocaleOptions = {
      script: 'Kore',
      region: 'KR',
      hourCycle: 'h23',
      calendar: 'gregory',
      numeric: true
    };
    const result = new Intl.Locale(locale, option).numeric;
    console.log(result); // true
    return result;
  };

Intl.Locale.region

The region accessor property of Intl.Locale instances returns the region of the world (usually a country) associated with this locale. Region is one of the core attributes of a locale. It allows selection for differences between the same language in, say, different countries. For example, English is spoken in the United Kingdom and the United States of America, but there are differences in spelling and other language conventions between those two countries. Knowing the locale's region helps JavaScript programmers make sure that the content from their sites and applications is correctly displayed when viewed from different areas of the world. The region property's value is set at construction time, either through the region subtag (third part if script is present, second part otherwise) of the locale identifier or through the region option of the Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined. The set accessor of region is undefined. This property cannot be changed directly.

  // Intl.Locale.prototype.region
  const LocalePropertyRegion = (): string | undefined => {
    const locale = 'ko';
    const option: Intl.LocaleOptions = {
      script: 'Kore',
      region: 'KR',
      hourCycle: 'h23',
      calendar: 'gregory',
    };
    const result = new Intl.Locale(locale, option).region;
    console.log(result); // "KR"
    return result;
  };

Intl.Locale.script

The script accessor property of Intl.Locale instances returns the script used for writing the particular language used in this locale Script, sometimes called writing system, is one of the core attributes of a locale. It indicates the set of symbols, or glyphs, that are used to write a particular language. For instance, the script associated with English is Latin, whereas the script typically associated with Korean is Hangul. In many cases, denoting a script is not strictly necessary, since the language (which is necessary) is only written in a single script. There are exceptions to this rule, however, and it is important to indicate the script when multiple scripts are applicable. The script property's value is set at construction time, either through the script subtag (second part, if present) of the locale identifier or through the script option of the Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined. The set accessor of script is undefined. This property cannot be changed directly.

  // Intl.Locale.prototype.script
  const LocalePropertyScript = (): string | undefined => {
    const locale = 'ko';
    const option: Intl.LocaleOptions = {
      script: 'Kore',
      region: 'KR',
      hourCycle: 'h23',
      calendar: 'gregory',
      numeric: true
    };
    const result = new Intl.Locale(locale, option).script;
    console.log(result); // "Kore"
    return result;
  };

I18NManager Vega

Other internationalization and localization utilities for apps can be accessed via the I18NManager.

I18NManager Example

import React, { useState } from 'react';
import { AppRegistry, Button, I18nManager ,Text, View } from 'react-native';

const I18nManagerApp = () => {
    const [response, setResponse] = useState('');
    const [locale, setLocale] = useState('');
    const [timezone, setTimezone] = useState('');

    const displayLocale = () => {
        setLocale(`I18nManager locale value - ${I18nManager.getAppLocale()}`);
    };

    const displayTimezone = () => {
        setTimezone(`I18nManager timezone value - ${I18nManager.getTimezone()}`);
    };

     const updateLocaleSetting = (newLocale: string) => {
         I18nManager.setAppLocale(newLocale);
     };

     const updateTimezoneSetting = (newTimezone: string) => {
         I18nManager.setTimezone(newTimezone);
     };

    I18nManager.addListener(I18nManager.SettingEventName.Locale, displayLocale);
    I18nManager.addListener(I18nManager.SettingEventName.Timezone, displayTimezone);

   return (
         <View>
             <Button title="Display I18n Preferences" onPress={displayI18nPreferences} />
             <Text>{response}</Text>

             <Button title="Set Locale - en-CA" onPress={updateLocaleSetting("en-CA")} />
             <Text>{locale}</Text>

            <Button title="Set App TZ - Paris" onPress={updateTimezoneSetting("Europe/Paris")} />
             <Text>{timezone}</Text>

         </View>
     );
};

export default I18nManagerApp;

I18NManager Methods

getAppLocale()

I18nManager.getAppLocale();

Get application's locale setting. If the app's locale is not set, the system locale will be returned.

setAppLocale()

I18nManager.setAppLocale(locale);

Set the application's locale.

getSystemLocale()

I18nManager.getSystemLocale();

Get system's locale setting.

resetLocale()

I18nManager.resetLocale();

Reset the App locale back to the system locale.

getTimezone()

I18nManager.getTimezone();

Get application's timezone setting. If the app's timezone is not set, the system timezone will be returned.

setTimezone()

I18nManager.setTimezone(timezone);

Set the application's timezone.

Parameters:

getSystemTimezone()

I18nManager.getSystemTimezone();

Get system's timezone setting.

resetTimezone()

I18nManager.resetTimezone();

Reset the App timezone back to the system timezone.

addListener()

I18nManager.addListener(eventName, callback);

Add listener for locale or timezone change. Listener will be triggered when another app changes the locale or timezone.

Parameters:

eventName

This can be any of the following:

• I18nManager.SettingEventName.Locale
• I18nManager.SettingEventName.Timezone

removeListeners()

I18nManager.removeListeners();

Remove all added event listeners from the I18NManager

Last updated: May 13, 2026