title: Updating React Native language by user choice
body: <p>I'm using <a href="https://github.com/AlexanderZaytsev/react-native-i18n" rel="nofollow noreferrer">I18n</a> to create multiple language application.</p>
  <p>I have created &quot;on first launch&quot; screen that offers the user option to choose his preferred language, it works fine but there is problem.</p>
  <p>Once I choose language, <code>App()</code> component updates, it showing login component (<code>initialRouteName=&quot;Login&quot;</code>). But the language is still by default English, only when I proceed to another screen it works or either <a href="https://reactnative.dev/docs/fast-refresh" rel="nofollow noreferrer">FastRefresh</a> login screen.</p>
  <pre><code>const Stack = createStackNavigator();
  const HAS_LAUNCHED = &quot;hasLaunched&quot;;
  const ENGLISH = &quot;en&quot;;
  const HEBREW = &quot;he&quot;;
  
  
  //Save the language as AsyncStorage for other times the user will open the app
  async function setAppLaunched(en) {
    AsyncStorage.clear()
    AsyncStorage.setItem(HAS_LAUNCHED, &quot;true&quot;);
    AsyncStorage.setItem(en ? ENGLISH : HEBREW, &quot;true&quot;);
    if(await AsyncStorage.getItem(HEBREW)){
      i18n.locale = &quot;he&quot;;
      I18nManager.forceRTL(true);
    }
    else{
      i18n.locale = &quot;en&quot;;
      I18nManager.forceRTL(false);
    }
  }
  
  
  //If first launch show this screen
  function CheckIfFirstLaunch({ onSelect }) {
  
    const selectLaunched = (value) =&gt; {
      setAppLaunched(value);
      onSelect();
    };
  
  
    return (
      &lt;View&gt;
          &lt;Text&gt;Choose Language&lt;/Text&gt;
          &lt;Button onPress={() =&gt; selectLaunched(false)} title=&quot;Hebrew&quot;/&gt;
          &lt;Button onPress={() =&gt; selectLaunched(true)} title=&quot;English&quot;/&gt;
      &lt;/View&gt;
    );
  }
  
  export default function App() {
    const [selected, setSelected] = useState(false);
  
    const verifyHasLaunched = async () =&gt; {
      try {
        const hasLaunched = await AsyncStorage.getItem(HAS_LAUNCHED);
        setSelected(hasLaunched != null);
      } catch (err) {
        setSelected(false);
      }
    };
  
    useEffect(() =&gt; verifyHasLaunched, []);
  
    if (!selected){
      return &lt;CheckIfFirstLaunch onSelect={() =&gt; setSelected(true)} /&gt;;
    }
    else{
      const verifyLang = async () =&gt; {
        const lang = await AsyncStorage.getItem('he');
        if(lang != null){
          i18n.locale = &quot;he&quot;;
          I18nManager.forceRTL(true);
        }
        else{
          i18n.locale = &quot;en&quot;;
          I18nManager.forceRTL(false);
        }
     };
     () =&gt; verifyLang;
    }
  
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator screenOptions={{headerShown: false}} initialRouteName=&quot;Login&quot;&gt;
          &lt;Stack.Screen name=&quot;Login&quot; component={Login} /&gt;
          &lt;Stack.Screen name=&quot;Register&quot; component={Register} /&gt;
          &lt;Stack.Screen name=&quot;Dashboard&quot; component={Dashboard} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>
  <p>I wonder since I have updated my component, the language should update as well, isn't?</p>
  <p>Here are some screenshots that will visually explain what my problem is.</p>
  <p><a href="https://i.stack.imgur.com/YylK9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YylK9.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/gm7Ew.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gm7Ew.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/BsxZm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BsxZm.png" alt="enter image description here" /></a></p>
  <p>How can I update React Native app by user choice using I18n plugin?</p>
  <p><strong>EDIT</strong></p>
  <p>Debugging results:</p>
  <p><code>selectedLaunched(value)</code> - value returns boolean value correctly.</p>
  <p>Checking <code>setAppLaunched(en)</code> if statement to see if responding correctly, it does.</p>
  <p><code>selected</code> state is also working fine and rendering the <code>NavigationContainer</code> component right after it set to true.</p>