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
32// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
33// eslint-disable-next-line @typescript-eslint/ban-types
34export default class LocalizationScreen extends React.Component<{}, State> {
35  static navigationOptions = {
36    title: 'Localization',
37  };
38
39  readonly state: State = {
40    currentLocale: Localization.locale,
41    preferredLocales: Localization.locales,
42    isoCurrencyCodes: Localization.isoCurrencyCodes,
43  };
44
45  queryPreferredLocales = async () => {
46    const preferredLocales = Localization.locales;
47    const currentLocale = Localization.locale;
48    this.setState({ preferredLocales, currentLocale });
49  };
50
51  queryCurrencyCodes = async () => {
52    if (this.state.isoCurrencyCodes.length === 0) {
53      const isoCurrencyCodes = Localization.isoCurrencyCodes;
54      this.setState({ isoCurrencyCodes });
55    }
56  };
57
58  prettyFormatCurrency = () => {
59    let buffer = '';
60    let seenCount = 0;
61    const sample = this.state.isoCurrencyCodes.slice(0, 100);
62    const grouped = chunk(sample, 10);
63    let drilldownIndex = 0;
64    let currentColumn = 0;
65    while (true) {
66      while (true) {
67        if (seenCount === sample.length) return buffer;
68        if (currentColumn === grouped.length) {
69          currentColumn = 0;
70          buffer += '\n';
71          drilldownIndex++;
72          continue;
73        }
74        buffer += `${grouped[currentColumn][drilldownIndex]}\t`;
75        seenCount++;
76        currentColumn++;
77      }
78    }
79  };
80
81  changeLocale = (locale: string) => {
82    i18n.locale = locale;
83    this.setState({ locale });
84  };
85  render() {
86    return (
87      <ScrollView>
88        <View style={styles.container}>
89          <HeadingText>Locales in Preference Order</HeadingText>
90          <MonoText>{JSON.stringify(Localization.getLocales(), null, 2)}</MonoText>
91
92          <HeadingText>Calendars in Preference Order</HeadingText>
93          <MonoText>{JSON.stringify(Localization.getCalendars(), null, 2)}</MonoText>
94
95          <HeadingText>Localization Table</HeadingText>
96          <Picker
97            style={styles.picker}
98            selectedValue={this.state.locale}
99            onValueChange={(value) => this.changeLocale(`${value}`)}>
100            <Picker.Item label="���� English" value="en" />
101            <Picker.Item label="���� Spanish" value="es" />
102          </Picker>
103
104          <View style={styles.languageBox}>
105            <View style={styles.row}>
106              <Text>Exists in Both: </Text>
107              <Text>{this.state.currentLocale ? i18n.t('phrase') : ''}</Text>
108            </View>
109            <View style={styles.row}>
110              <Text>Default Case Only: </Text>
111              <Text>{this.state.currentLocale ? i18n.t('default') : ''}</Text>
112            </View>
113          </View>
114
115          <DeprecatedHeading>Current Locale</DeprecatedHeading>
116          <MonoText>{JSON.stringify(this.state.currentLocale, null, 2)}</MonoText>
117          <DeprecatedHeading>Locales in Preference Order</DeprecatedHeading>
118          <ListButton title="Show preferred Locales" onPress={this.queryPreferredLocales} />
119          {this.state.preferredLocales && this.state.preferredLocales.length > 0 && (
120            <MonoText>{JSON.stringify(this.state.preferredLocales, null, 2)}</MonoText>
121          )}
122
123          <DeprecatedHeading>Currency Codes</DeprecatedHeading>
124          <ListButton title="Show first 100 currency codes" onPress={this.queryCurrencyCodes} />
125          {this.state.isoCurrencyCodes && this.state.isoCurrencyCodes.length > 0 && (
126            <MonoText>{this.prettyFormatCurrency()}</MonoText>
127          )}
128        </View>
129      </ScrollView>
130    );
131  }
132}
133const styles = StyleSheet.create({
134  row: {
135    flexDirection: 'row',
136    justifyContent: 'space-between',
137  },
138  languageBox: {
139    padding: 10,
140    borderWidth: 1,
141  },
142  picker: {
143    borderWidth: 1,
144    padding: 0,
145    margin: 0,
146  },
147  container: {
148    padding: 10,
149  },
150});
151