Change language based on user selection

Please provide the following:

  1. SDK Version: 38
  2. Platforms: Android/iOS

I’m trying to make a dual language app that allows users to select the language they’re after, but when selecting, it doesn’t change despite i18n.currentLocale() showing the correct selected language. The language will change if I save something on VS code and fast refresh is on.

Below is the code I have for it. Built on expo with typescript.

This is the i18n config

import i18n from 'i18n-js';
import AsyncStorage from '@react-native-community/async-storage'

import en from './en.json'
import zh from './zh.json'

i18n.translations = {
  en,
  zh
}

async function getLanguage() {
  const choice = await AsyncStorage.getItem('setLanguage')
  i18n.locale = choice
  i18n.fallbacks = true

  console.log(i18n.currentLocale())
}

getLanguage()

export function t(name: string) {
  return i18n.t(name)
}

Language selector

export default function LanguageChange() {

    const onPress = async (language: string) => {
        await AsyncStorage.setItem('setLanguage', language).then(()=>{});
        Updates.reload();
    }
  
  return (
      <View style={styles.selectLanguageContainer}>
          <TouchableOpacity onPress={() => onPress("en")}>
              <Text>English</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => onPress('zh')}>
              <Text>Chinese</Text>
          </TouchableOpacity>
      </View>
  );
}

I’m using https://github.com/xcarpentier/ex-react-native-i18n (despite not updated since a few months).
In my case, there is no need for Updates.reload().

1 Like

Thanks for replying, however, nothing seems to happen when there’s no Updates.reload()
The value is stored on asyncStorage but that’s it