Hi, everyone, and welcome back.
Today, we're going to start creating the same profile page as given right here.
What we're going to create in this video
is going to be the first half of the screen.
Let's get started on that.
Let's go to the profile.js file right
inside here and make sure
that we get rid of all of these items
because we don't need it anymore.
This page is most probably going to be scrollable.
Let's create the scroll view and it should
be imported from React Native, so make sure that you do that.
Let's get rid of some of the items that we donate from these imports.
Here I'm going to create a new style, and it's going to be content container
style that is going to use
flexGrow property.
Let's talk about this for a second.
In React Native,
flexgrow is a style property that determines how much a component
should grow relative to its siblings in a flex container.
The component with flexgrow 1 will take up
as much space as possible along the main axis of the flex container.
Let's talk about the scroll view now.
Scroll views are used to create
a scrollable area that can contain other components.
However, sometimes the content inside
the scroll view does not stretch and take up the full height of the scroll view,
even if the content is smaller than the available space.
This issue often arises when using a flex box layout as the scroll view does not
automatically stretch to its content to fill the available space.
Using the flex grow one on the content
inside the scroll view will help you fix an issue of scroll views
not taking up the space that its components are requiring it to.
This sometimes happens because the area that items should take inside
the scroll view is not calculated appropriately.
It is determined by the operating system
that you're running on and also the power of your computer.
It would always be great if you use content container style in that case.
Right now, since we have the FlexGrow
applied here, I think it would be a good idea to go to global styles file.
Let's find it right here inside our assets.
Let's click on this and create flex grow property as well.
Let's say that this is going to be one and let's use this instead of inline styles.
Let's use FlexGrow right here and we will
face no issues like that with the scroll view.
Great.
Now let's just get started with the creation of this.
Here we see that the first thing
that we're going to need is going to be a profile image.
Let's create an image
and import it in the React native right here and let's use require function here.
What we're going to do is actually find the assets folder and then images.
Here you should already have default profile PNG file.
If you don't have it,
then it's going to be attached to this video anyway, so you can download it.
But I'm pretty sure that you are going to have it.
Let's save this and you're going to see
that this is very small and we want to make this bigger.
Let's just look at Figma for a second and let's click here,
make sure that DevCode is on right here so that you see the full dimensions.
Here we can see that the width and the height of this picture is actually 110.
Let's create a new style.
For this, we're going to need a style.js file here.
Let's create style.js file
and let's import style sheet
from React Native,
create a constant of style and use this
style sheet to create a new style sheet.
Here, we can just say profile image.
This profile image should have a width of 110 and height of 110.
As always, we're going to have to stick
with the horizontal scaling as we
talked about in the past lessons.
Let's use 110 here.
For height, even though we should be using vertical scale, we're still going to use
horizontal scale because this is intended to be a square.
We're also going to need the border radius
here, but actually, it is already a circular image, so we can just skip that.
Let's apply this style back to the profile page.
To do that, we're going to have to export this and import it right here.
I can just type in style and make sure that I use style.profileImage
and then I can just import it directly like this.
Let's save this.
Now we see that this image became bigger.
Yes, the way it looks is a little bit pixelated.
This is because that image is not as high
quality, but it doesn't really matter for this case.
Let's just use it.
What we want to do here is make sure that we have this border applied here.
Before we do that,
first of all, we're going to have to set up a view container right here,
and then we're going to have to import this.
First, let's make sure that this is going
to be centered and let's apply a style here.
Let's call this style profile image container.
Let's go to styles and paste this here.
Then what we want to do is set up a flex.
Nothing's really going to change with this.
Then what we want to do is say that our
direction is row and that we want this to be centered.
Now you're going to see that this is going
to be centered and we need some margin top as well.
Let's check out how much that is. It should be 32.
Let's do margin top, vertical scale 32.
Now it's at the place where it should be.
Now we're going to have to set up another
view container inside this to make sure that we can set that border up.
Let's do another view container right here and
let's call the style profile image content, for example.
Then we can just copy this and paste it right here.
For this, we're going to need border width one.
This is how it's going to look pretty ridiculous.
We're going to have to make sure that this border is directly around this item.
Maybe we can just delete the flex one
right here and that's how it's going to happen.
Then what we want to do is make sure that we have a border color.
Here it's a gradient,
but we're just going to use a solid color and it's going to be 0, 1, 5, 0, E, and C.
Great. We can apply this color right around it.
Then we're going to need some a padding.
Let's use, for example, padding of horizontal scale four.
Again, we're using horizontal scale
because we chose to stick with this anytime we're affecting all directions.
Don't forget that.
Now we're going to need the border radius.
Border radius is going to be 110.
We can just copy this, paste it here.
Now it looks circular and very similar to our design.
Perfect. Let's just go back to profile page here
and start setting up some other stuff that we need.
Now what we want to do is actually create this text given here.
Let's create a new text component right here.
Let's make sure that this is imported.
I can't import it from here.
I'm just going to write it.
Then what we want to do is make sure
that Emmanuel Robertson is written inside here.
Let's do Emmanuel Robertson.
You can write your own name if you'd like.
Let's set up a styling for this and let's call it username.
Let's copy this and paste it right here
and say that it should have a margin top of how much?
It's 20. It's visible right here.
Let's do margin top, vertical scale 20.
Now you can see this space right here,
but we also want this to be centered.
Let's do text align center.
Great.
Now it should be centered.
Let's make sure that the styling for the
fonts also match up with the design.
I'm just going to move this a little bit
to the right side
and let's use font family.
We're going to use our get font family
function that we set up together.
We're going to say that we need a font of
inter and the font weight should be 600.
Then let's set up the font size,
which should be scale font size 20.
Note that these functions are
automatically imported for me,
so make sure that you also import them.
Great.
Let's save this and see our design.
Now I would argue that this doesn't look
as bold, and it is because I missed
out on using a string right here.
Let's do that.
Now it looks as bold as it should.
Then what we want to do here is set
up these statistics given here.
Let's do that.
For this, we're going to need
a view container definitely.
We're containing three items right here
that should be horizontally aligned.
We're going to create
one view container first,
and let's try to design this, and then
we can just copy it and paste it.
First thing that we're going to need
a text with a 45 right here.
Second thing that we're going to need is
also going to be a text with
something that says following.
Great, it appears right here.
Let's just style this
and call it stat amount.
Let's just go here and make sure that we
grab the styling for the fonts here.
I'm going to press on this
and see what it has as styles.
First of all, we're going to need font
family and it's going to be
equal to get font family inter
and the weight is still 600, apparently.
The font size is going to be
also scale font size 20.
Great. This looks great.
Then we also need the color right here.
Let's make sure that we grab that.
Let's do color.
Then what we want to do is compare this
and it looks pretty good if you ask me.
Now we also want to design
the following text the same way.
Let's go back here
and then let's call this
stat type and let's go to our styles
and make sure that we get
the font family again and it's going to be
inter, and its weight is going to be 400.
Then what we want to do is say
that font size is scale font size 16.
Then we are also going
to need the color right here.
Let's grab this and give it a color,
save it, and let's compare them,
and they look pretty similar.
Now, they also need to be centered,
so let's do a text-align center.
The first time we are going to do this is
going to appear right in the middle here.
This is something that we should prevent,
but it will automatically get sorted out
very soon, so we can
just keep it this way.
Now we can just copy this view container
and paste it two times here and use
30 M followers and 100 posts.
Great.
This is how it looks.
Now we got to make sure
that these are in a row.
Let's call this style.statContainer.
Let's copy this, go here and create another style.
Let's say that flex direction should be row.
Now this is how it looks and we also want
to make sure that these are centered.
Let's do justify content center
and they will look this way.
We might actually be better off
using space between and
this is how it would look.
But what we could do is make sure that we
have some a padding on the sides and it
seems like it's
around maybe 40 or maybe less.
Let's do padding
horizontal here and experiment with it
with horizontal scaling
and let's say it is 20.
This is how it would look.
Maybe 40 is actually
the number that we need here.
Okay, this is way better.
Now we're also going to need margin top,
which is going to be 30.
Let's do margin top, vertical scale 30.
Perfect.
This is looking so much better.
Now, what we also want to do is
have these borders applied here.
We can just create a view
here and call it style.statBorder
let's save this.
We can go inside the styles and use this
stat border and say that border right
width is going to be one.
We're going to have
to grab a color for it.
Let's use this color right here
and say color is going to be...
Oops, the border color is
going to be equal to this.
Let's save it and make sure that we use
this view container right here as well.
Look at this, it is looking so good.
Perfect.
Now that we have this,
let's create this border here as well.
This stat container will need
the margin bottom as well.
Let's just make this margin vertical instead.
Then let's make sure that it
has a border bottom
width and it will be one and this
is how it's going to look like.
See that it extends to the full width and
this is because of the padding horizontal.
If we were to make this margin horizontal
instead, this won't happen anymore.
That's totally fine.
Let's just copy the border color right
here and then let's make sure that our
margin vertical turns into padding
vertical so that this has space.
Great.
Now our first half of the application
looks pretty good, if you ask me.
We're done with this lesson.
In this next lesson, we're going
to explore this tab navigation.
We're going to install it and place
different content inside each tab and see
how the tab navigation actually
works in React Native.
Thank you so much for watching.
Stay tuned and I'll see
you in the next video.