title: How to integrate i18n-js in React Native Expo app
body: <p>I'm having issues instantiating I18n in my Expo app. The TL;DR of the problem is that components that need the translations are rendered before</p>
  
  <pre><code>Expo.Util.getLocaleAsync()
  </code></pre>
  
  <p>returns and sets the locale. I can't figure out how to best set it up. As of now, I have a file for my instance of I18n, which I then import and use everywhere else in my app. It looks something like this: </p>
  
  <pre><code>import Expo from 'expo';
  import I18n from 'i18n-js';
  import english from './resources/strings/en';
  import danish from './resources/strings/da';
  
  I18n.defaultLocale = 'en-GB';
  I18n.fallbacks = true;
  
  I18n.initAsync = async () =&gt; {
    var locale = 'en-GB';
    try {
      locale = await Expo.Util.getCurrentLocaleAsync();
    } catch (error) {
      console.log('Error getting locale: ' + error);
    }
  
    I18n.locale = locale ? locale.replace(/_/, '-') : '';
  };
  
  I18n.translations = {
    en: english,
    da: danish,
  };
  
  export default I18n;
  </code></pre>
  
  <p>Then, in my root app component, I do the following:</p>
  
  <p>import I18n from './src/i18n';</p>
  
  <pre><code>class App extends React.Component {
    async componentWillMount() {
      console.log('Current locale (main1): ' + I18n.currentLocale());
      try {
        await I18n.initAsync();
      } catch (error) {
        console.log('Error setting locale ' + error);
      }
  
      console.log('Current locale (main2): ' + I18n.currentLocale());
    }
  
    render() {
      return &lt;AppContainer /&gt;;
    }
  }
  
  Expo.registerRootComponent(App);
  </code></pre>
  
  <p>The logs state the expected values - first the default locale, and then the updated locale in main2. The problem is that the child views are rendered with the first locale before the change is made, and I don't understand why?</p>
  
  <p>I can't figure out a better way to do this, any ideas/tips would be much appreciated :-)</p>