Hi, and welcome to this video.
Now that our custom fonts are installed,
we're ready to get started with implementing our project.
Let's take a look at our design just one more time.
Here you see my Figma design opened and we see the header title that we are
about to design using the custom fonts that we just installed.
What I want to say is that every time you click into the element like a text
element, you're able to see the properties of it.
Figma was recently updated, so if you'd like to see all the details,
you can just click on this code dev mode right here.
You might be asked a couple of questions at the first time,
so just select that would you like to see the CSS code for it.
Now that we are focusing on this text component, we can see what its font
families, what its font size is, what its font weight is.
We're going to use this information when creating our title.
That's great.
Now for the title, we are actually going to create a separate component.
To do that, we're going to create a new components folder here.
Inside this component,
we're going to create another folder and we're going to call it title.
This title is going to have
a JS file where we're going to set up our component.
It's also going to have style.
Js file where we're going to set up the styling needed for this title.
Great.
Now that we've created this file, the initial step to get started with this
is to make sure that we define the title component.
Let's import react from react and then we're going to import a text
component because we're definitely going to need it.
What we're going to do after that is import the styles from style.js file.
We should make sure that we define this style here.
Let's create a constant called style.
We're going to need to use stylesheet from react Native, it will be automatically
imported for me in my editor, so make sure that you import yours as well.
We can just call a style title.
We're not going to write anything inside
this yet, but we are going to come back to this.
Here, let's define a functional component called title.
Let's return null so far, and then let's make sure that we export this title.
Now, let's think of the reusability of this component.
If we want to reuse this title,
just placing the text here that is going to say, Let's explore,
as given on this design, is not going to be a good idea, right?
Because if we do that, then the only time we can use this
component is when we're going to be using the Let's explore text.
We're definitely going to need a prop
for this, and therefore, we're going to need the
props given here to be able to access the title.
Great.
Now that we are decided on using the props,
we got to make sure that we type-check our props and know that we should only use
this property if the user passes in a string.
In order to do that, we're going to need the library called Prop Types.
Let's install that.
Go to your terminal
inside the social media directory and then do npm install, Prop Types, Save.
Let's click on Enter.
Now that that's installed, we got to make sure that we install
the pods if there are any pods to be installed.
This is something that's only done on macOS.
Windows users, you don't need to do this.
You can skip this tab, but let's just do this together.
Let's go into the IOS folder, do pod install, and then get out of here.
Let's see if there's any pods that need to be installed.
Great, it seems like we didn't need to install the pods.
We're done with the Prop Types
installation and we can just start using it.
Now to use the Prop Types,
we're going to have to use import prop types from Prop Types.
Then here we're going to say title.propTypes.
Let's see what type of prop are we expecting here.
Let's call it a title and say that we want
this to be a string and it is something that's going to be required.
If we don't pass in a string, we're going to get an error in our
simulator and we're going to know that we missed out on passing the property.
Great. Now we have to display the text.
Let's use the text component and say that we're going to use props.
Title here.
Now let's check whether this is working at all or not.
In order to do that, we got to go back to the app.js
file.
Let's say that instead of this text
component, we are actually going to be using the title component.
Let's use the title here and let's make sure that we import this.
We're not going to need these here anymore, so we can just get rid of it.
Let's save it.
Great.
Right now, nothing is displayed, which is expected.
Here we see a warning, failed prop type.
The prop type is marked as required, but its value is undefined.
Let's make sure that we do pass in the value.
Let's set up title.
Here we can just go here, copy this text and make sure that we pass it here.
Let's save this and here we see the text, Let's explore.
Now, we are going to need styling for this
because we want to make sure that this is similar to what's given on the design.
Since we already know what is required
here, let's just make sure that we create a style here exactly according to that.
Let me move this window slightly to the right side.
What we're going to do here is set up the styles here.
First of all, we're going to need a color,
and let's just copy this color from here and paste it here.
Great.
Then we are going to need the font Family setup.
Remember that here we can use our Get font Family function.
Let's do that.
It was automatically imported for me.
Make sure it is for you as well.
Base font is going to be inter as given
here and the font weight is going to be 600.
Make sure to pass in 600 and make it a string.
Great.
Now what we want to do is also make sure that we have the font size set.
Let's set the font size to 24 as given here.
Save this.
Let's export default style so that we can use this style inside our title here.
Let's assign this style right here and say that we're going to use style.title.
Great.
Let's save this.
Now let's take a look at how this looks for us.
Here you go. You have the Let's explore text here.
It is very similar to the design given here.
This is how easy it was to set up a custom
title that we're going to use in this application.
In the next video, we're going to make sure that we can come
up with a way of showing the icon here as well.
Thank you so much for watching.
Stay tuned and I'll meet you in the next video.