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