Hi and welcome back.
Today we're going to start off by building
the components as we discussed in the last video.
And we're going to be building header component.
And this header component for example, has the highest font size.
So what we are going to do is create one
component that is going to take care of headers and we are going to pass props
to it and we're going to say what kind of header it is.
So for example in HTML, if you know HTML, you have headers that are one to six
and six is the smallest one and one is the biggest one.
So we're going to pass props to our header
and it's going to determine what should be its font size automatically.
So for example, this is the biggest one.
So we might pass a prop one.
And for example, this is one that's smaller so this might
be two and this is a little bit even smaller so this might be three.
So let's start by doing this.
I just want to make this visible to us as we're building our components and we are
going to be seeing how this component look on our homepage.
So let's do that.
Let's create the components folder here and let's call our first component header.
So we have a header directory and inside this we're going to create header JS file
and we definitely are going to need the style JS file for this.
So let's just quickly do this.
Let's import style sheet here from react native.
Let's create the style variable and create the style sheet for this.
Let's export default style and then let's do the very basics here as well.
Let's import react from react
and then we are going to need the view container and the text definitely.
So let's import those from react native.
We're going to create the header constant that is going to accept props
and for now it's just going to return null and we're going to export default header.
So since we already know that we are going
to be handling props, we're going to need prop types from prop
types and we don't have this library installed.
So I'm just quickly going to do that.
I'm going to open the terminal to the donation app.
This is the root of our project and I'm
going to do
npm install prop-types
and I'm going to save this.
Great. Now let's start by building our header
component and we want to be seeing how this looks.
So the first thing I'm going to do is
navigate to our home screen and I'm going to import this component.
So I'm going to import header from our components.
I'm going to save this.
Instead of hello world,
we're going to have the header component showing up here.
Let's save this.
And currently we see nothing because our header components returns now.
But let's start designing this.
So we're going to need a view component
that is going to be the container for our text and then we're going to need the text
itself and here we are going to take whatever props is passed as the title.
Okay, so since we already know that we are going to have a title prop,
what we do need to do is say that header prop types
and it's going to require a title and that prop type has to be a string
and we can set a default value for our headers.
So let's do that and let's say that title is empty by default.
Great so now we do have the title
and let's pass a title from here
and let's say that title is Azzahri A.
Let's save this and we see it appear here.
Now what we want to do is style this text
so I'm just going to give this a style and I'm going to say that this style is
called title one so we need to import style from style
right and now we got to create the title
one and let's see what this component has.
So this component has a font family of inter
and it has a font size of 24 for which we are going to use our scaling function.
So we're going to do scale font size 24.
And now I'm going to save this.
And then we need just going to format this
well so that you're able to see it as well.
Great and then we're going to need
the line height of 29 let's save this as well.
Great and then we need the font weight
600 let's save this and see how it looks and it looks very good.
Great so now we are done with title one
and what we want to do is design how the title two would look like.
So for this first of all what we should do is make sure that we accept a prop type
for our types and let's say that prop type is going to be a number.
Now let's say that by default this type is
going to be one and we can just pass type one here even though we don't really
need it it was working without it as well and now what we need is to handle
the cases when title is going to be two or title is going to be three.
So let's create a function here called style to apply.
And this function is going to return us which style to apply.
So we can have a switch case here
and we're going to say that it is dependent on Props type.
And if the value is one, we are going to return style.Title one.
The value is two.
We're going to return title two.
If the value is going to be three, we're going to return style.title3
i don't think we're going to have any more value.
So let's set up a default value returning style.title1
great.
So now we need to take care of showing this.
So let's style to apply and call this function inside of here.
And then let's create title two and title three styles.
So let's do title two and title two will have the same kind of setup as here.
So let's copy this here and say
that the only thing that's really changed is font size and line height.
So that would be 18 and 22.
And let's check out what title three would be it should be here.
And it is 16 and 19.
Let's take care of that.
16 and 19.
And Font weight is the same.
And let's call this title three.
Now let's go back to our header.
These are created and are looking good.
And then let's make this smaller and let's bring this up here.
Let's go to our home page and create a couple more headers.
So let's create type two and let's create type.
Three. So the first one is the biggest 1,
second one is the medium one, and third one is the smallest one.
So great. This is looking good.
Now we have all the headers that we might need in this application, which is great.
So we're all set with this video and I'll see you in the next one.
Thanks so much for watching.