title: React Native promise and queue
body: <p>I have a localization in my project; and before calling the component, I want to call the setI18nConfig () method, which is responsible for languages.
  But when I call it, the component is processed first, and then this method.
  That is, this method becomes the last in the queue. I think this is because of the promise.
  But what can affect the problem to solve it</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import {setI18nConfig} from './src/localesConfig';
  import StackNavigator from './src/routes/homeStack';
  
  export default class App extends Component {
    constructor(props) {
      super(props);
      setI18nConfig(); // &lt;---- here
    }
  
    render() {
      return (StackNavigator());
    }
  }
  </code></pre>
  
  <p><strong>localesConfig.js</strong></p>
  
  <pre><code>export async function getCurrentLanguage() {
    try {
      return await AsyncStorage.getItem('Language');
    } catch (e) {
      // error reading value
    }
  }
  
  export const translationGetters = {
    // lazy requires (metro bundler does not support symlinks)
    en: () =&gt; require('./translations/en.json'),
    ru: () =&gt; require('./translations/ru.json'),
  };
  
  export const setI18nConfig = () =&gt; {
    i18n.missingTranslation = function(key) {
      return key;
    };
    // fallback if no available language fits
    const fallback = {languageTag: 'en', isRTL: false};
  
    const isRTL = fallback.isRTL;
    getCurrentLanguage().then(val =&gt; { //&lt;----here quee
      const languageTag = val || fallback.languageTag;
      // clear translation cache
      translate.cache.clear();
      // update layout direction
      I18nManager.forceRTL(isRTL);
      // set i18n-js config
      i18n.translations = {[languageTag]: translationGetters[languageTag]()};
      i18n.locale = languageTag;
    });
  </code></pre>
  
  <p><strong>homeBottomTabs.js</strong></p>
  
  <pre><code>render() {
      return (
        &lt;View&gt;
          &lt;Text&gt;{translate('password')}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }export default function RootTab() {
    return (
      &lt;BottomTab.Navigator
        screenOptions={{gestureEnabled: false}}
        tabBarOptions={{
          tabStyle: {
            justifyContent: 'center',
            alignItems: 'center',
          },
          showIcon: false,
        }}&gt;
        &lt;BottomTab.Screen
          name="Main"
          component={MainScreen}
          options={{title: translate('Menu:Home'), headerShown: false}}
        /&gt;
        &lt;BottomTab.Screen
          name="Chat"
          component={ChatScreen}
          options={{title: translate('Menu:Chat'), headerShown: false}}
        /&gt;
      &lt;/BottomTab.Navigator&gt;
    );
  }
  </code></pre>
  
  <p>And when the Main screen is called (that is, when the application starts), as a result I get <a href="https://i.stack.imgur.com/clAAP.png" rel="nofollow noreferrer">this</a>, but it should be like <a href="https://i.stack.imgur.com/wRqQm.png" rel="nofollow noreferrer">that</a></p>