Hi and welcome back to this video tutorial of the donation mobile app.
And today we're going to start with making the first page.
I was observing the design of the Figma
file that I have here and I have discovered that they also use inter font
family as we have use it in our last project.
And I wanted to start off by installing it
for those people who have not installed the custom font inter yet.
You can just go to fonts.Google.com find, enter, download the package.
Let's open this up.
Here you're going to go to the ttf file and you're going to click Install.
Just because I already have it installed, I am not going to replace my files
but just click on install and you're going to have it installed on your computer.
And let's what we need is to move these
files into our assets folder that we're about to make.
So let's do that and then I'm going
to create new directory inside of here and call it fonts.
And then what I'm going to do is I'm going
to move all the files from here inside the static folder to the fonts folder.
Great. Now they're located here.
I'm going to close this.
And now we are going to create a new react native config file.
react-native.config.js file.
And inside here I'm going to copy the following code.
Take your time and copy your code inside here as well.
And once you have done that,
just navigate to your terminal, go to your project root
and here you can just run the following command
npx react-native-asset
Great, once you have done that, your Info.plist file should have changed.
So let's find the Info.plist file and then let's see our fonts.
Great, they are installed for iOS
and to check that they were successfully installed for Android as well,
just navigate to Android app source main assets.
And here you should see your fonts.
If everything's looking good,
now you have access to the font.
In the next video we're going to jump into making our header component it.
So I'll see you there and thanks so much for watching.