How it works...

In step 5 and step 6, we used the componentDidMount React life cycle hook  to tell when our app finishes loading. While it may seem tempting to use componentWillMount, this too will throw an error, since componentWillMount is not guaranteed to wait for our Font.loadAsync to finish. By using componentDidMount, we can also assure we are not blocking the initial rendering of the app.

In step 9, we used the ES6 feature async/await. You're likely familiar with this pattern if you're a web developer, but if you'd like more information, I've included an awesome article from ponyfoo.com in the See also section at the end of this recipe, which does a great job of explaining how async/await works.

In step 11, we used a ternary statement to render either our custom font styled Text element if loaded, or to render nothing if it's not loaded by returning null.