1import { Picker } from '@react-native-picker/picker';
2import * as Localization from 'expo-localization';
3import i18n from 'i18n-js';
4import chunk from 'lodash/chunk';
5import React from 'react';
6import { ScrollView, StyleSheet, Text, View } from 'react-native';
7
8import DeprecatedHeading from '../components/DeprecatedHeading';
9import HeadingText from '../components/HeadingText';
10import ListButton from '../components/ListButton';
11import MonoText from '../components/MonoText';
12
13i18n.fallbacks = true;
14i18n.locale = Localization.getLocales()[0].languageTag;
15i18n.translations = {
16  en: {
17    phrase: 'Hello my friend',
18    default: 'English language only',
19  },
20  es: {
21    phrase: 'Hola mi amigo',
22  },
23};
24
25interface State {
26  isoCurrencyCodes: any;
27  currentLocale: any;
28  preferredLocales: any;
29  locale?: string;
30}
31
32function HooksLocalizationSection() {
33  const locales = Localization.useLocales();
34  const calendars = Localization.useCalendars();
35  return (
36    <>
37      <HeadingText>Locales in Preference Order (hook)</HeadingText>
38      <MonoText>{JSON.stringify(locales, null, 2)}</MonoText>
39      <HeadingText>Calendars in Preference Order (hook)</HeadingText>
40      <MonoText>{JSON.stringify(calendars, null, 2)}</MonoText>
41    </>
42  );
43}
44
45// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
46// eslint-disable-next-line @typescript-eslint/ban-types
47export default class LocalizationScreen extends React.Component<{}, State> {
48  static navigationOptions = {
49    title: 'Localization',
50  };
51
52  readonly state: State = {
53    currentLocale: Localization.locale,
54    preferredLocales: Localization.locales,
55    isoCurrencyCodes: Localization.isoCurrencyCodes,
56  };
57
58  queryPreferredLocales = async () => {
59    const preferredLocales = Localization.locales;
60    const currentLocale = Localization.locale;
61    this.setState({ preferredLocales, currentLocale });
62  };
63
64  queryCurrencyCodes = async () => {
65    if (this.state.isoCurrencyCodes.length === 0) {
66      const isoCurrencyCodes = Localization.isoCurrencyCodes;
67      this.setState({ isoCurrencyCodes });
68    }
69  };
70
71  prettyFormatCurrency = () => {
72    let buffer = '';
73    let seenCount = 0;
74    const sample = this.state.isoCurrencyCodes.slice(0, 100);
75    const grouped = chunk(sample, 10);
76    let drilldownIndex = 0;
77    let currentColumn = 0;
78    while (true) {
79      while (true) {
80        if (seenCount === sample.length) return buffer;
81        if (currentColumn === grouped.length) {
82          currentColumn = 0;
83          buffer += '\n';
84          drilldownIndex++;
85          continue;
86        }
87        buffer += `${grouped[currentColumn][drilldownIndex]}\t`;
88        seenCount++;
89        currentColumn++;
90      }
91    }
92  };
93
94  changeLocale = (locale: string) => {
95    i18n.locale = locale;
96    this.setState({ locale });
97  };
98  render() {
99    return (
100      <ScrollView>
101        <View style={styles.container}>
102          <HooksLocalizationSection />
103
104          <HeadingText>Locales in Preference Order</HeadingText>
105          <MonoText>{JSON.stringify(Localization.getLocales(), null, 2)}</MonoText>
106
107          <HeadingText>Calendars in Preference Order</HeadingText>
108          <MonoText>{JSON.stringify(Localization.getCalendars(), null, 2)}</MonoText>
109
110          <HeadingText>Localization Table</HeadingText>
111          <Picker
112            style={styles.picker}
113            selectedValue={this.state.locale}
114            onValueChange={(value) => this.changeLocale(`${value}`)}>
115            <Picker.Item label="���� English" value="en" />
116            <Picker.Item label="���� Spanish" value="es" />
117          </Picker>
118
119          <View style={styles.languageBox}>
120            <View style={styles.row}>
121              <Text>Exists in Both: </Text>
122              <Text>{this.state.currentLocale ? i18n.t('phrase') : ''}</Text>
123            </View>
124            <View style={styles.row}>
125              <Text>Default Case Only: </Text>
126              <Text>{this.state.currentLocale ? i18n.t('default') : ''}</Text>
127            </View>
128          </View>
129
130          <DeprecatedHeading>Current Locale</DeprecatedHeading>
131          <MonoText>{JSON.stringify(this.state.currentLocale, null, 2)}</MonoText>
132          <DeprecatedHeading>Locales in Preference Order</DeprecatedHeading>
133          <ListButton title="Show preferred Locales" onPress={this.queryPreferredLocales} />
134          {this.state.preferredLocales && this.state.preferredLocales.length > 0 && (
135            <MonoText>{JSON.stringify(this.state.preferredLocales, null, 2)}</MonoText>
136          )}
137
138          <DeprecatedHeading>Currency Codes</DeprecatedHeading>
139          <ListButton title="Show first 100 currency codes" onPress={this.queryCurrencyCodes} />
140          {this.state.isoCurrencyCodes && this.state.isoCurrencyCodes.length > 0 && (
141            <MonoText>{this.prettyFormatCurrency()}</MonoText>
142          )}
143        </View>
144      </ScrollView>
145    );
146  }
147}
148const styles = StyleSheet.create({
149  row: {
150    flexDirection: 'row',
151    justifyContent: 'space-between',
152  },
153  languageBox: {
154    padding: 10,
155    borderWidth: 1,
156  },
157  picker: {
158    borderWidth: 1,
159    padding: 0,
160    margin: 0,
161  },
162  container: {
163    padding: 10,
164  },
165});
166