FIX: Changed language selection screen to FlatList

BlueComponents.js

@@ -1128,42 +1128,42 @@ export class BlueBitcoinAmount extends Component {
 
     return (
       <TouchableWithoutFeedback onPress={() => this.textInput.focus()}>
-      <View>
+        <View>
-        <View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 16 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 16 }}>
-          <TextInput
+            <TextInput
-            keyboardType="numeric"
+              keyboardType="numeric"
-            onChangeText={text => this.props.onChangeText(text.replace(',', '.'))}
+              onChangeText={text => this.props.onChangeText(text.replace(',', '.'))}
-            placeholder="0"
+              placeholder="0"
-            maxLength={10}
+              maxLength={10}
-            ref={(textInput) => this.textInput = textInput}
+              ref={textInput => (this.textInput = textInput)}
-            editable={!this.props.isLoading && !this.props.disabled}
+              editable={!this.props.isLoading && !this.props.disabled}
-            value={amount}
+              value={amount}
-            placeholderTextColor={this.props.disabled ? '#99a0ab' : '#0f5cc0'}
+              placeholderTextColor={this.props.disabled ? '#99a0ab' : '#0f5cc0'}
-            style={{
+              style={{
-              color: this.props.disabled ? '#99a0ab' : '#0f5cc0',
+                color: this.props.disabled ? '#99a0ab' : '#0f5cc0',
-              fontSize: 36,
+                fontSize: 36,
-              fontWeight: '600',
+                fontWeight: '600',
-            }}
+              }}
-          />
+            />
-          <Text
+            <Text
-            style={{
+              style={{
-              color: this.props.disabled ? '#99a0ab' : '#0f5cc0',
+                color: this.props.disabled ? '#99a0ab' : '#0f5cc0',
-              fontSize: 16,
+                fontSize: 16,
-              marginHorizontal: 4,
+                marginHorizontal: 4,
-              paddingBottom: 6,
+                paddingBottom: 6,
-              fontWeight: '600',
+                fontWeight: '600',
-              alignSelf: 'flex-end',
+                alignSelf: 'flex-end',
-            }}
+              }}
-          >
+            >
-            {' ' + BitcoinUnit.BTC}
+              {' ' + BitcoinUnit.BTC}
-          </Text>
+            </Text>
-        </View>
+          </View>
-        <View style={{ alignItems: 'center', marginBottom: 22, marginTop: 4 }}>
+          <View style={{ alignItems: 'center', marginBottom: 22, marginTop: 4 }}>
-          <Text style={{ fontSize: 18, color: '#d4d4d4', fontWeight: '600' }}>
+            <Text style={{ fontSize: 18, color: '#d4d4d4', fontWeight: '600' }}>
-            {loc.formatBalance(amount || 0, BitcoinUnit.LOCAL_CURRENCY)}
+              {loc.formatBalance(amount || 0, BitcoinUnit.LOCAL_CURRENCY)}
-          </Text>
+            </Text>
+          </View>
         </View>
-      </View>
       </TouchableWithoutFeedback>
     );
   }

ios/BlueWallet/Info.plist

@@ -33,7 +33,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>204</string>
+	<string>205</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSRequiresIPhoneOS</key>

screen/settings/language.js

@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
-import { Picker } from 'react-native';
+import { FlatList, TouchableOpacity } from 'react-native';
-import { BlueLoading, SafeBlueArea, BlueCard, BlueNavigationStyle } from '../../BlueComponents';
+import { BlueLoading, BlueText, SafeBlueArea, BlueListItem, BlueCard, BlueNavigationStyle } from '../../BlueComponents';
 import PropTypes from 'prop-types';
-/** @type {AppStorage} */
+import { Icon } from 'react-native-elements';
-let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
 
 export default class Language extends Component {
@@ -17,16 +16,47 @@ export default class Language extends Component {
     this.state = {
       isLoading: true,
       language: loc.getLanguage(),
+      availableLanguages: [
+        { label: 'English', value: 'en' },
+        { label: 'Русский', value: 'ru' },
+        { label: 'Українська', value: 'ua' },
+        { label: 'Spanish', value: 'es' },
+        { label: 'Portuguese (BR)', value: 'pt_br' },
+        { label: 'Portuguese (PT)', value: 'pt_pt' },
+        { label: 'Deutsch (DE)', value: 'de_de' },
+        { label: 'Česky (CZ)', value: 'cs_cz' },
+      ],
     };
   }
 
   async componentDidMount() {
     this.setState({
       isLoading: false,
-      storageIsEncrypted: await BlueApp.storageIsEncrypted(),
     });
   }
 
+  renderItem = ({ item }) => {
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          console.log('setLanguage', item.value);
+          loc.setLanguage(item.value);
+          loc.saveLanguage(item.value);
+          return this.setState({ language: item.value });
+        }}
+      >
+        <BlueListItem
+          title={item.label}
+          {...(this.state.language === item.value
+            ? {
+                rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" />,
+              }
+            : { hideChevron: true })}
+        />
+      </TouchableOpacity>
+    );
+  };
+
   render() {
     if (this.state.isLoading) {
       return <BlueLoading />;
@@ -34,25 +64,15 @@ export default class Language extends Component {
 
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
+        <FlatList
+          style={{ flex: 1 }}
+          keyExtractor={(_item, index) => `${index}`}
+          data={this.state.availableLanguages}
+          extraData={this.state.availableLanguages}
+          renderItem={this.renderItem}
+        />
         <BlueCard>
-          <Picker
+          <BlueText>When selecting a new language, restarting Blue Wallet may be required for the change to take effect.</BlueText>
-            selectedValue={this.state.language}
-            onValueChange={(itemValue, itemIndex) => {
-              console.log('setLanguage', itemValue);
-              loc.setLanguage(itemValue);
-              loc.saveLanguage(itemValue);
-              return this.setState({ language: itemValue });
-            }}
-          >
-            <Picker.Item color={BlueApp.settings.foregroundColor} label="English" value="en" />
-            <Picker.Item color={BlueApp.settings.foregroundColor} label="Русский" value="ru" />
-            <Picker.Item color={BlueApp.settings.foregroundColor} label="Українська" value="ua" />
-            <Picker.Item color={BlueApp.settings.foregroundColor} label="Spanish" value="es" />
-            <Picker.Item color={BlueApp.settings.foregroundColor} label="Portuguese (BR)" value="pt_br" />
-            <Picker.Item color={BlueApp.settings.foregroundColor} label="Portuguese (PT)" value="pt_pt" />
-            <Picker.Item color={BlueApp.settings.foregroundColor} label="Deutsch (DE)" value="de_de" />
-            <Picker.Item color={BlueApp.settings.foregroundColor} label="Česky (CZ)" value="cs_cz" />
-          </Picker>
         </BlueCard>
       </SafeBlueArea>
     );