1
00:00:02,190 --> 00:00:07,460
Now you learned how you can add fonts to an application and attached, you'll find a zip file with the fonts

2
00:00:07,470 --> 00:00:10,000
I want to add. For that in the assets folder,

3
00:00:10,020 --> 00:00:16,290
I'll add a new fonts folder and then it's the OpenSans-Bold and regular.ttf file which is in the zip

4
00:00:16,290 --> 00:00:19,350
file you find attached that I want to add here.

5
00:00:19,470 --> 00:00:22,670
Now adding the files alone won't do much as you of course know,

6
00:00:22,710 --> 00:00:27,690
instead we have to load these fonts and we do that in the app.js file which is our starting file that

7
00:00:27,690 --> 00:00:31,070
starts the entire app. In there,

8
00:00:31,170 --> 00:00:36,660
we need to import everything as font from expo-font

9
00:00:36,660 --> 00:00:43,320
and this might not be available in your project yet, so therefore you might want to run npm install

10
00:00:43,320 --> 00:00:45,010
--save expo-font

11
00:00:45,030 --> 00:00:52,530
to be sure that it's available, to install that package and with that installed, you can import font

12
00:00:52,620 --> 00:00:54,750
from there, like that

13
00:00:54,750 --> 00:01:02,910
and I also want to import the app loading component from expo, that's the component that will prolong

14
00:01:02,910 --> 00:01:09,000
the splash screen when the app starts until our fonts are loaded so that we only see something on

15
00:01:09,000 --> 00:01:14,670
the screen when all our assets, and in this case these are the fonts, are really available and are really

16
00:01:14,700 --> 00:01:22,950
there. Now with these imports added, we can add a function here outside of our component function

17
00:01:23,250 --> 00:01:25,130
which I'll name fetch fonts

18
00:01:25,310 --> 00:01:30,180
and this is a function which will in the end use font,

19
00:01:30,600 --> 00:01:39,190
so what I'm importing here, load async and then we pass in an object where we describe the data we want

20
00:01:39,190 --> 00:01:47,110
to load and that's the open sans font which I'll register under open sans, we add this by requiring

21
00:01:47,110 --> 00:01:57,890
this from ./assets/fonts/OpenSans, not bold but regular.ttf and then in addition, we have 

22
00:01:57,890 --> 00:02:05,470
open-sans-bold, that's the other font I want to register, by requiring it from 

23
00:02:05,470 --> 00:02:08,210
assets/fonts/OpenSans-Bold.ttf, like this.

24
00:02:08,440 --> 00:02:14,320
Now we need to return this because load async returns a promise and I want to return this in my fetch

25
00:02:14,320 --> 00:02:20,410
fonts function because with this, we can use it together with the app loading component and that's a pattern

26
00:02:20,410 --> 00:02:22,430
you learned about earlier in the course.

27
00:02:22,450 --> 00:02:23,970
So in case this is brand new to you,

28
00:02:24,010 --> 00:02:28,040
make sure you go through the other sections of this course first.

29
00:02:28,060 --> 00:02:34,840
So now we can use fetch fonts with app loading and we do this inside of our app component, in there,

30
00:02:34,840 --> 00:02:41,680
I will manage some state and I do this with the help of the useState hook which we import from React

31
00:02:42,610 --> 00:02:51,760
and I'll name this state font loaded and set font loaded and call useState and initially, that's false

32
00:02:51,790 --> 00:02:54,260
because initially, the font hasn't been loaded

33
00:02:54,400 --> 00:03:00,100
and then here, we can check if the font has not been loaded which initially is the case, then I want to

34
00:03:00,100 --> 00:03:07,270
return the app loading component instead of my normal app content because in the app loading component,

35
00:03:07,600 --> 00:03:14,600
we can add the start async property and point at fetch fonts which kicks off this font fetching function

36
00:03:14,860 --> 00:03:21,430
and once this is done, the function we pass to onFinish will be called and in this function, I'll simply

37
00:03:21,430 --> 00:03:29,240
set font loaded to true, like this. So this makes sure that we simply keep the splash screen open until

38
00:03:29,240 --> 00:03:35,600
our fonts are loaded and this will be rendered until we reloaded our fonts and thereafter,

39
00:03:35,840 --> 00:03:42,590
we'll instead load this content. Now with that, we're making sure that we're importing our fonts and that

40
00:03:42,590 --> 00:03:45,870
we can start using them and we'll need them throughout this module.

41
00:03:45,980 --> 00:03:52,280
With that, it's now time to get started with actually adding what we all came for, the navigation.