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)
  }

  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);
  };

  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);
  };

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

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);
    };

// 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);
  };

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

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

  // 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;
  };
  

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

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

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

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

  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);
  };

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

  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.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.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.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.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.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.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.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.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.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.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.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.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.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;
  };

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);

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;

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;