VC-1407: UI Language won’t be the same after app restart (#617)

https://jesusfilmmedia.atlassian.net/browse/VC-1407

Co-authored-by: Vlad Mitkovsky <vlad@mitkovsky.com>

src/actions/auth.ts

@@ -16,6 +16,7 @@ import request from 'actions/utils';
 import { TAdventureSingle, TDataState } from 'utils/types';
 import { ThunkDispatch } from 'redux-thunk';
 import { Action } from 'redux';
+import i18next from 'i18next';
 
 import ROUTES from './routes';
 import {
@@ -93,12 +94,15 @@ export function userBlockedAction() {
 
 // Check current system language against the one already stored.
 // Update it on the server if different.
-export function checkCurrentLanguage() {
+export function checkCurrentLanguage(prefLang = '') {
   return async (dispatch, getState): void => {
     const languageStored = getState().auth.language;
-    const languageCurrent = (
-      getLocales()[0]?.languageCode || 'EN'
-    ).toUpperCase();
+    const languageCurrent =
+      prefLang.toUpperCase() || i18next.language.toUpperCase();
+
+    if (prefLang !== i18next.language) {
+      i18next.changeLanguage(prefLang.toLowerCase());
+    }
 
     if (languageStored !== languageCurrent) {
       const { user } = getState().auth;

src/domain/Common/LanguageSwitch/index.tsx

@@ -1,8 +1,14 @@
+import Select from 'domain/Common/Select';
+
 import React, { ReactElement, useEffect, useState } from 'react';
 import i18next from 'i18next';
-import Select from 'domain/Common/Select';
 import VokeIcon from 'components/VokeIcon';
 import Text from 'components/Text';
+import { useDispatch } from 'react-redux';
+import { checkCurrentLanguage, updateMe } from 'actions/auth';
+import { Alert } from 'react-native';
+import { setPrefLang } from 'actions/info';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import styles from './styles';
 
@@ -15,6 +21,7 @@ type Option = {
 };
 
 const LanguageSwitch = (): ReactElement => {
+  const dispatch = useDispatch();
   const lang = languageCodes[i18next.language.substr(0, 2).toLowerCase()];
   const availableTranslations = i18next.languages;
   const [modalVisible, setModalVisible] = useState(false);
@@ -61,6 +68,8 @@ const LanguageSwitch = (): ReactElement => {
       }
     });
     setSelectOptions(newSelectOptions);
+    AsyncStorage.setItem('prefLanguage', option.label.toLowerCase());
+    dispatch(checkCurrentLanguage(option.label.toLowerCase()));
   };
 
   return (

src/i18n/index.ts

@@ -6,6 +6,9 @@ import i18n, {
 import { NativeModules, Platform } from 'react-native';
 import { initReactI18next, reactI18nextModule } from 'react-i18next';
 import { findBestAvailableLanguage } from 'react-native-localize';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import store from '../store';
 
 import oneSkyTranslations from './locales/translations.json';
 import en_US from './locales/en-US.json';
@@ -85,10 +88,16 @@ const aliasedResourceLanguages: Resource = aliasLanguages(
 
 const languageDetector: LanguageDetectorModule = {
   type: 'languageDetector',
-  detect: () => {
-    return (
-      findBestAvailableLanguage(Object.keys(aliasedResourceLanguages)) || {}
-    ).languageTag;
+  async: true, // flags below detection to be async
+  detect: async callback => {
+    // Preferred user language (selected by the user in Profile)
+    // is being saved in AsyncStorage (Redux isn't available here).
+    const prefLanguage = await AsyncStorage.getItem('prefLanguage');
+    const selectLanguage =
+      prefLanguage ||
+      (findBestAvailableLanguage(Object.keys(aliasedResourceLanguages)) || {})
+        .languageTag;
+    callback(selectLanguage);
   },
   init: () => {},
   cacheUserLanguage: () => {},