diff --git a/components/LanguageSelector.tsx b/components/LanguageSelector.tsx index 49d66d56ca..440ca376f3 100644 --- a/components/LanguageSelector.tsx +++ b/components/LanguageSelector.tsx @@ -2,10 +2,11 @@ import React from 'react'; import {SUPPORTED_LANGUAGES} from '../i18n'; import {I18nManager, View} from 'react-native'; import {Picker} from './ui/Picker'; -import Storage from '../shared/storage'; import {useTranslation} from 'react-i18next'; -import i18next from 'i18next'; +import i18next, {i18n} from 'i18next'; import RNRestart from 'react-native-restart'; +import {setItem} from '../machines/store'; +import Keychain from 'react-native-keychain'; export const LanguageSelector: React.FC = props => { const {i18n} = useTranslation(); @@ -13,38 +14,39 @@ export const LanguageSelector: React.FC = props => { ([value, label]) => ({label, value}), ); - const changeLanguage = async (language: string) => { - if (language !== i18n.language) { - await i18n.changeLanguage(language).then(async () => { - await Storage.setItem('language', i18n.language); - const isRTL = i18next.dir(language) === 'rtl' ? true : false; - if (isRTL !== I18nManager.isRTL) { - try { - I18nManager.forceRTL(isRTL); - setTimeout(() => { - RNRestart.Restart(); - }, 150); - } catch (e) { - console.log('error', e); - } - } - }); - } - }; - return ( changeLanguage(i18n, language)} triggerComponent={props.triggerComponent} /> ); }; +export const changeLanguage = async (i18n: i18n, language: string) => { + if (language !== i18n.language) { + await i18n.changeLanguage(language).then(async () => { + const existingCredentials = await Keychain.getGenericPassword(); + await setItem('language', i18n.language, existingCredentials.password); + const isRTL = i18next.dir(language) === 'rtl' ? true : false; + if (isRTL !== I18nManager.isRTL) { + try { + I18nManager.forceRTL(isRTL); + setTimeout(() => { + RNRestart.Restart(); + }, 150); + } catch (e) { + console.log('error', e); + } + } + }); + } +}; + interface LanguageSelectorProps { triggerComponent: React.ReactElement; } diff --git a/i18n.ts b/i18n.ts index 9d4e134980..5758b50f3b 100644 --- a/i18n.ts +++ b/i18n.ts @@ -8,10 +8,11 @@ import ar from './locales/ara.json'; import hi from './locales/hin.json'; import kn from './locales/kan.json'; import ta from './locales/tam.json'; -import Storage from './shared/storage'; import {iso6393To1} from 'iso-639-3'; import {LocalizedField} from './types/VC/ExistingMosipVC/vc'; +import Keychain from 'react-native-keychain'; +import {getItem} from './machines/store'; const resources = {en, fil, ar, hi, kn, ta}; const locale = Localization.locale; @@ -36,7 +37,12 @@ i18next supportedLngs: Object.keys(SUPPORTED_LANGUAGES), }) .then(async () => { - const language = await Storage.getItem('language'); + const existingCredentials = await Keychain.getGenericPassword(); + const language = await getItem( + 'language', + null, + existingCredentials.password, + ); if (language !== i18next.language) { i18next.changeLanguage(language); populateLanguageCodeMap(); diff --git a/screens/SetupLanguageScreen.tsx b/screens/SetupLanguageScreen.tsx index 9d670bf9fb..a36d675ddf 100644 --- a/screens/SetupLanguageScreen.tsx +++ b/screens/SetupLanguageScreen.tsx @@ -1,16 +1,13 @@ import React from 'react'; import i18n, {SUPPORTED_LANGUAGES} from '../i18n'; -import {I18nManager, Dimensions} from 'react-native'; -import Storage from '../shared/storage'; import {useTranslation} from 'react-i18next'; -import i18next from 'i18next'; -import RNRestart from 'react-native-restart'; import {SetupPicker} from '../components/ui/SetupPicker'; import {Button, Column, Text} from '../components/ui'; import {Theme} from '../components/ui/styleUtils'; import {Icon} from 'react-native-elements'; import {RootRouteProps} from '../routes'; import {useWelcomeScreen} from './WelcomeScreenController'; +import {changeLanguage} from '../components/LanguageSelector'; export const SetupLanguageScreen: React.FC = props => { const {t} = useTranslation('SetupLanguage'); @@ -19,25 +16,6 @@ export const SetupLanguageScreen: React.FC = props => { ([value, label]) => ({label, value}), ); - const changeLanguage = async (language: string) => { - if (language !== i18n.language) { - await i18n.changeLanguage(language).then(async () => { - await Storage.setItem('language', i18n.language); - const isRTL = i18next.dir(language) === 'rtl' ? true : false; - if (isRTL !== I18nManager.isRTL) { - try { - I18nManager.forceRTL(isRTL); - setTimeout(() => { - RNRestart.Restart(); - }, 150); - } catch (e) { - console.log('error', e); - } - } - }); - } - }; - return ( = props => { testID="languagePicker" items={languages} selectedValue={i18n.language} - onValueChange={changeLanguage} + onValueChange={language => changeLanguage(i18n, language)} />