Now you learned how you can add fonts to an application and attached, you'll find a zip file with the fonts
I want to add. For that in the assets folder,
I'll add a new fonts folder and then it's the OpenSans-Bold and regular.ttf file which is in the zip
file you find attached that I want to add here.
Now adding the files alone won't do much as you of course know,
instead we have to load these fonts and we do that in the app.js file which is our starting file that
starts the entire app. In there,
we need to import everything as font from expo-font
and this might not be available in your project yet, so therefore you might want to run npm install
--save expo-font
to be sure that it's available, to install that package and with that installed, you can import font
from there, like that
and I also want to import the app loading component from expo, that's the component that will prolong
the splash screen when the app starts until our fonts are loaded so that we only see something on
the screen when all our assets, and in this case these are the fonts, are really available and are really
there. Now with these imports added, we can add a function here outside of our component function
which I'll name fetch fonts
and this is a function which will in the end use font,
so what I'm importing here, load async and then we pass in an object where we describe the data we want
to load and that's the open sans font which I'll register under open sans, we add this by requiring
this from ./assets/fonts/OpenSans, not bold but regular.ttf and then in addition, we have
open-sans-bold, that's the other font I want to register, by requiring it from
assets/fonts/OpenSans-Bold.ttf, like this.
Now we need to return this because load async returns a promise and I want to return this in my fetch
fonts function because with this, we can use it together with the app loading component and that's a pattern
you learned about earlier in the course.
So in case this is brand new to you,
make sure you go through the other sections of this course first.
So now we can use fetch fonts with app loading and we do this inside of our app component, in there,
I will manage some state and I do this with the help of the useState hook which we import from React
and I'll name this state font loaded and set font loaded and call useState and initially, that's false
because initially, the font hasn't been loaded
and then here, we can check if the font has not been loaded which initially is the case, then I want to
return the app loading component instead of my normal app content because in the app loading component,
we can add the start async property and point at fetch fonts which kicks off this font fetching function
and once this is done, the function we pass to onFinish will be called and in this function, I'll simply
set font loaded to true, like this. So this makes sure that we simply keep the splash screen open until
our fonts are loaded and this will be rendered until we reloaded our fonts and thereafter,
we'll instead load this content. Now with that, we're making sure that we're importing our fonts and that
we can start using them and we'll need them throughout this module.
With that, it's now time to get started with actually adding what we all came for, the navigation.