ADD: rerender UI after language change

blue_modules/storage-context.js

@@ -12,7 +12,9 @@ export const BlueStorageProvider = ({ children }) => {
   const [selectedWallet, setSelectedWallet] = useState('');
   const [walletsInitialized, setWalletsInitialized] = useState(false);
   const [preferredFiatCurrency, _setPreferredFiatCurrency] = useState();
+  const [language, _setLanguage] = useState();
   const getPreferredCurrencyAsyncStorage = useAsyncStorage(AppStorage.PREFERRED_CURRENCY).getItem;
+  const getLanguageAsyncStorage = useAsyncStorage(AppStorage.LANG).getItem;
   const [newWalletAdded, setNewWalletAdded] = useState(false);
   const saveToDisk = async () => {
     BlueApp.tx_metadata = txMetadata;
@@ -34,8 +36,18 @@ export const BlueStorageProvider = ({ children }) => {
     getPreferredCurrency();
   };
 
+  const getLanguage = async () => {
+    const item = await getLanguageAsyncStorage();
+    _setLanguage(item);
+  };
+
+  const setLanguage = () => {
+    getLanguage();
+  };
+
   useEffect(() => {
     getPreferredCurrency();
+    getLanguageAsyncStorage();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -169,6 +181,8 @@ export const BlueStorageProvider = ({ children }) => {
         setIsAdancedModeEnabled,
         setPreferredFiatCurrency,
         preferredFiatCurrency,
+        setLanguage,
+        language,
       }}
     >
       {children}

components/WalletsCarousel.js

@@ -270,7 +270,7 @@ const cStyles = StyleSheet.create({
 const WalletsCarousel = forwardRef((props, ref) => {
   const carouselRef = useRef();
   const [loading, setLoading] = useState(true);
-  const { preferredFiatCurrency } = useContext(BlueStorageContext);
+  const { preferredFiatCurrency, language } = useContext(BlueStorageContext);
   const renderItem = useCallback(
     ({ item, index }) => (
       <WalletCarouselItem
@@ -282,7 +282,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.vertical, props.selectedWallet, props.handleLongPress, props.onPress, preferredFiatCurrency],
+    [props.vertical, props.selectedWallet, props.handleLongPress, props.onPress, preferredFiatCurrency, language],
   );
 
   useImperativeHandle(ref, () => ({

loc/index.js

@@ -13,7 +13,7 @@ const currency = require('../blue_modules/currency');
 dayjs.extend(relativeTime);
 
 // first-time loading sequence
-(async () => {
+const setLanguageAndDateTimeLocale = async () => {
   // finding out whether lang preference was saved
   // For some reason using the AppStorage.LANG constant is not working. Hard coding string for now.
   let lang = await AsyncStorage.getItem('lang');
@@ -142,7 +142,8 @@ dayjs.extend(relativeTime);
       strings.setLanguage('en');
     }
   }
-})();
+};
+setLanguageAndDateTimeLocale();
 
 const strings = new Localization({
   en: require('./en.json'),
@@ -187,6 +188,7 @@ const strings = new Localization({
 strings.saveLanguage = lang => {
   AsyncStorage.setItem(AppStorage.LANG, lang);
   strings.setLanguage(lang);
+  setLanguageAndDateTimeLocale();
 };
 
 export const transactionTimeToReadable = time => {

screen/settings/language.js

@@ -1,9 +1,12 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
-import { SafeBlueArea, BlueListItem, BlueCard, BlueLoading, BlueNavigationStyle, BlueText } from '../../BlueComponents';
+import { SafeBlueArea, BlueListItem, BlueLoading, BlueNavigationStyle } from '../../BlueComponents';
 import { AvailableLanguages } from '../../loc/languages';
 import loc from '../../loc';
 
+import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useNavigation, useTheme } from '@react-navigation/native';
+
 const styles = StyleSheet.create({
   flex: {
     flex: 1,
@@ -11,42 +14,51 @@ const styles = StyleSheet.create({
 });
 
 const Language = () => {
+  const { setLanguage, language } = useContext(BlueStorageContext);
   const [isLoading, setIsLoading] = useState(true);
-  const [language, setLanguage] = useState(loc.getLanguage());
-
+  const [selectedLanguage, setSelectedLanguage] = useState(loc.getLanguage());
+  const { setOptions } = useNavigation();
+  const { colors } = useTheme();
+  const stylesHook = StyleSheet.create({
+    flex: {
+      backgroundColor: colors.background,
+    },
+  });
   useEffect(() => {
     setIsLoading(false);
   }, []);
 
-  const renderItem = useCallback(
-    ({ item }) => {
+  useEffect(() => {
+    setOptions({ headerTitle: loc.settings.language });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [language]);
+
+  const renderItem = item => {
     return (
       <BlueListItem
         onPress={() => {
-            console.log('setLanguage', item.value);
-            loc.saveLanguage(item.value);
-            setLanguage(item.value);
+          console.log('setLanguage', item.item.value);
+          loc.saveLanguage(item.item.value);
+          setSelectedLanguage(item.item.value);
+          setLanguage();
         }}
-          title={item.label}
-          {...(language === item.value
-            ? {
-                rightIcon: { name: 'check', type: 'octaicon', color: '#0070FF' },
-              }
-            : { hideChevron: true })}
+        title={item.item.label}
+        checkmark={selectedLanguage === item.item.value}
       />
     );
-    },
-    [language],
-  );
+  };
 
   return isLoading ? (
     <BlueLoading />
   ) : (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={styles.flex}>
-      <FlatList style={styles.flex} keyExtractor={(_item, index) => `${index}`} data={AvailableLanguages} renderItem={renderItem} />
-      <BlueCard>
-        <BlueText>{loc.settings.language_restart}</BlueText>
-      </BlueCard>
+    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={[styles.flex, stylesHook.flex]}>
+      <FlatList
+        style={[styles.flex, stylesHook.flex]}
+        keyExtractor={(_item, index) => `${index}`}
+        data={AvailableLanguages}
+        renderItem={renderItem}
+        initialNumToRender={25}
+      />
     </SafeBlueArea>
   );
 };

screen/settings/settings.js

@@ -1,8 +1,9 @@
-import React from 'react';
-import { ScrollView, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
+import React, { useContext } from 'react';
+import { ScrollView, StyleSheet, StatusBar } from 'react-native';
 import { BlueListItem, BlueNavigationStyle, BlueHeaderDefaultSubHooks } from '../../BlueComponents';
 import { useNavigation } from '@react-navigation/native';
 import loc from '../../loc';
+import { BlueStorageContext } from '../../blue_modules/storage-context';
 
 const styles = StyleSheet.create({
   root: {
@@ -12,36 +13,22 @@ const styles = StyleSheet.create({
 
 const Settings = () => {
   const { navigate } = useNavigation();
+  // By simply having it here, it'll re-render the UI if language is changed
+  // eslint-disable-next-line no-unused-vars
+  const { language } = useContext(BlueStorageContext);
 
   return (
     <ScrollView style={styles.root}>
       <StatusBar barStyle="default" />
       <BlueHeaderDefaultSubHooks leftText={loc.settings.header} rightComponent={null} />
-      <BlueListItem title={loc.settings.general} component={TouchableOpacity} onPress={() => navigate('GeneralSettings')} chevron />
-      <BlueListItem title={loc.settings.currency} component={TouchableOpacity} onPress={() => navigate('Currency')} chevron />
-      <BlueListItem title={loc.settings.language} component={TouchableOpacity} onPress={() => navigate('Language')} chevron />
-      <BlueListItem
-        title={loc.settings.encrypt_title}
-        onPress={() => navigate('EncryptStorage')}
-        component={TouchableOpacity}
-        testID="SecurityButton"
-        chevron
-      />
-      <BlueListItem title={loc.settings.network} component={TouchableOpacity} onPress={() => navigate('NetworkSettings')} chevron />
-      <BlueListItem
-        title={loc.settings.notifications}
-        component={TouchableOpacity}
-        onPress={() => navigate('NotificationSettings')}
-        chevron
-      />
-      <BlueListItem title={loc.settings.privacy} component={TouchableOpacity} onPress={() => navigate('SettingsPrivacy')} chevron />
-      <BlueListItem
-        title={loc.settings.about}
-        component={TouchableOpacity}
-        onPress={() => navigate('About')}
-        testID="AboutButton"
-        chevron
-      />
+      <BlueListItem title={loc.settings.general} onPress={() => navigate('GeneralSettings')} chevron />
+      <BlueListItem title={loc.settings.currency} onPress={() => navigate('Currency')} chevron />
+      <BlueListItem title={loc.settings.language} onPress={() => navigate('Language')} chevron />
+      <BlueListItem title={loc.settings.encrypt_title} onPress={() => navigate('EncryptStorage')} testID="SecurityButton" chevron />
+      <BlueListItem title={loc.settings.network} onPress={() => navigate('NetworkSettings')} chevron />
+      <BlueListItem title={loc.settings.notifications} onPress={() => navigate('NotificationSettings')} chevron />
+      <BlueListItem title={loc.settings.privacy} onPress={() => navigate('SettingsPrivacy')} chevron />
+      <BlueListItem title={loc.settings.about} onPress={() => navigate('About')} testID="AboutButton" chevron />
     </ScrollView>
   );
 };