WEBVTT

1
00:00:00.160 --> 00:00:04.060
Hi and welcome back to this video
tutorial of the donation mobile app.

2
00:00:04.090 --> 00:00:07.100
And today we're going to start
with making the first page.

3
00:00:07.130 --> 00:00:10.140
I was observing the design of the Figma

4
00:00:10.170 --> 00:00:15.860
file that I have here and I have
discovered that they also use inter font

5
00:00:15.890 --> 00:00:18.740
family as we have use
it in our last project.

6
00:00:18.760 --> 00:00:21.700
And I wanted to start off by installing it

7
00:00:21.730 --> 00:00:26.340
for those people who have not
installed the custom font inter yet.

8
00:00:26.370 --> 00:00:34.860
You can just go to fonts.Google.com
find, enter, download the package.

9
00:00:34.890 --> 00:00:36.893
Let's open this up.

10
00:00:37.093 --> 00:00:43.060
Here you're going to go to the ttf file
and you're going to click Install.

11
00:00:43.090 --> 00:00:48.060
Just because I already have it installed,
I am not going to replace my files

12
00:00:48.080 --> 00:00:51.660
but just click on install and you're going
to have it installed on your computer.

13
00:00:51.680 --> 00:00:54.980
And let's what we need is to move these

14
00:00:55.010 --> 00:00:59.060
files into our assets folder
that we're about to make.

15
00:00:59.090 --> 00:01:01.020
So let's do that and then I'm going

16
00:01:01.050 --> 00:01:05.490
to create new directory inside
of here and call it fonts.

17
00:01:05.520 --> 00:01:08.050
And then what I'm going to do is I'm going

18
00:01:08.080 --> 00:01:17.160
to move all the files from here inside
the static folder to the fonts folder.

19
00:01:19.080 --> 00:01:21.620
Great.
Now they're located here.

20
00:01:21.650 --> 00:01:23.490
I'm going to close this.

21
00:01:23.520 --> 00:01:28.930
And now we are going to create
a new react native config file.

22
00:01:28.960 --> 00:01:31.460
react-native.config.js file.

23
00:01:31.490 --> 00:01:34.490
And inside here I'm going
to copy the following code.

24
00:01:34.520 --> 00:01:39.020
Take your time and copy your
code inside here as well.

25
00:01:39.050 --> 00:01:40.740
And once you have done that,

26
00:01:40.770 --> 00:01:47.680
just navigate to your terminal,
go to your project root

27
00:01:48.200 --> 00:01:54.276
and here you can just run the following
command

28
00:01:54.476 --> 00:01:57.120
npx react-native-asset

29
00:01:58.400 --> 00:02:03.060
Great, once you have done that, your
Info.plist file should have changed.

30
00:02:03.090 --> 00:02:11.120
So let's find the Info.plist file
and then let's see our fonts.

31
00:02:11.150 --> 00:02:13.610
Great, they are installed for iOS

32
00:02:13.640 --> 00:02:17.260
and to check that they were successfully
installed for Android as well,

33
00:02:17.290 --> 00:02:24.170
just navigate to Android
app source main assets.

34
00:02:24.200 --> 00:02:26.540
And here you should see your fonts.

35
00:02:26.570 --> 00:02:28.170
If everything's looking good,

36
00:02:28.200 --> 00:02:30.540
now you have access to the font.

37
00:02:30.570 --> 00:02:35.340
In the next video we're going to jump
into making our header component it.

38
00:02:35.360 --> 00:02:37.720
So I'll see you there and thanks
so much for watching.