React Native & i18n 在路由到另一个屏幕后返回默认语言

Question

I'm using React Native with i18n language manager, and I'm trying to create language choice on first app launch.

The language selection screen does work, after choosing language the component re-renders and execute the correct language. (Assuming I selected English, the buttons string is in English)

But after signing in to the app the language changes, and I can't really understand why. (Here suppose to be in English, instead displays the Hebrew string)

Here is App.js file, I have used Async Storage to check if the app has launched before (If didn't show language selection, if did use the saved language choice).

import React, {useEffect, useState} from "react";
import Login from "./login.js";
import Register from "./register.js";
import Dashboard from "./dashboard.js";
import i18n from "./translation.js";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { Text, View, Button, I18nManager } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";



const Stack = createStackNavigator();
const HAS_LAUNCHED = "hasLaunched";
const ENGLISH = "en";
const HEBREW = "he";


//Save the language as AsyncStorage for other times the user will open the app
async function setAppLaunched(en) {
  AsyncStorage.setItem(HAS_LAUNCHED, "true");
  AsyncStorage.setItem(en ? ENGLISH : HEBREW, "true");
  if(await AsyncStorage.getItem(HEBREW)){
    i18n.locale = "he";
    I18nManager.forceRTL(true);
  }
  else{
    i18n.locale = "en";
    I18nManager.forceRTL(false);
  }
}


//If first launch show this screen
function CheckIfFirstLaunch({ onSelect }) {
  const navigation = useNavigation();

  const selectLaunched = (value) => {
    if(value){
      i18n.locale = "en";
      I18nManager.forceRTL(false);
    }
    else{
      i18n.locale = "he";
      I18nManager.forceRTL(true);
    }
    setAppLaunched(value);
    onSelect();
    navigation.navigate('Login');
  };


  return (
    <View>
        <Text>Choose Language</Text>
        <Button onPress={() => selectLaunched(false)} title="Hebrew"/>
        <Button onPress={() => selectLaunched(true)} title="English"/>
    </View>
  );
}

export default function App() {
  const [selected, setSelected] = useState(false);
  const verifyHasLaunched = async () => {
    try {
      const hasLaunched = await AsyncStorage.getItem(HAS_LAUNCHED);
      console.log(await AsyncStorage.getItem(HAS_LAUNCHED));
      if(hasLaunched){
        setSelected(true);
      }
      else{
        setSelected(false);
      }
    } catch (err) {
      setSelected(false);
    }
  };

  useEffect(() => verifyHasLaunched, []);


  if(selected){
    const verifyLang = async () => {
      const lang = await AsyncStorage.getItem('he');
      if(lang != null){
        i18n.locale = "he";
        I18nManager.forceRTL(true);
      }
      else{
        i18n.locale = "en";
        I18nManager.forceRTL(false);
      }
   };
   () => verifyLang;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName={selected ? "Login" : "Language"}>
        <Stack.Screen name="Language" >
          {props => (<CheckIfFirstLaunch {...props} onSelect={() => setSelected(true)} />)}
        </Stack.Screen>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="Dashboard" component={Dashboard} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

translation.js

import i18n from 'i18n-js';
import en from './locale/en.json';
import he from './locale/he.json';

i18n.defaultLocale = 'en';
i18n.fallbacks = true;
i18n.translations = { en, he };


export default i18n;

I have debugged the values from AsyncStorage and received the correct values.

As it seems, the Async Storage saves the language data for the re-render of App.js file, but the I18n reset his settings after screen routing. Why is that?

How to set language for the entire app on first app launch using React Native?

Codesandbox

Answer 1

I've forked your sandbox https://codesandbox.io/s/xenodochial-mclean-ctk5p?file=/src/App.js

There are several changes.

The problem came from the fact that each time you selected a language you were setting it as a key in the storage.

Once you've selected English, reloaded and selected Hebrew you get both keys in the storage like this

{'he': true, 'en': true}

At this point this part always sets the lang to Hebrew cause indeed there is such key ('he' is true).

 const verifyLang = async () => {
      const lang = await AsyncStorage.getItem('he');
      if(lang != null){
        i18n.locale = "he";
        I18nManager.forceRTL(true);
       }

What I changed is that we no longer set each language as a key. Instead we pass down through selectLaunched the languge itself. Then we save it in a lang key in the storage. This way the lang key always has the correct language stored - 'he' or 'en'.

The verifyLang can be removed as it's no longer needed. Hope this resolves your issue.