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