Hi, everyone, and welcome back.
Today, what we're going to do is make sure that we create this content for each tab.
We created this tab one, tab two, and tab three initially to see how this
would function and how the content would differ for each tab.
But right now what we want to do is just get rid of all of this and have a custom
component that would take care of showing this content.
As you see here, we're going to be using the default post PNG file.
I'm sure that you already have it in your code base.
If not, you can also always download it from your resources folder.
I'll just quickly get started with this.
What we want to do is create a new
component and let's create the directory for it.
Let's call it profile tab content.
We can name the file the same way.
Let's use profileTabContent.js
here.
Let's also create the style.js file.
This is what we always do.
Since we're in this file,
I'm just going to quickly import the style sheet and I'm going to define the style
and use this imported stylesheet to create an empty set of styles.
Let's export this style and make sure that we use it inside here.
Let's set this up real quick.
It will be importing React.
Then we're also going to need to import our styles from style.js file.
Let's set up a profile tab, content, functional component.
Let's let it return null so far.
We're not going to have any props, so let's just export this as it is.
Now what we want to do is make sure that we use this component.
Let's go back and let's delete this tab one, tab two, and tab three.
We don't need them anymore.
Therefore, we can also delete this import statement.
We also don't need this anymore.
Instead of tab one, we're going to be using profile tab content.
Let's copy this and make sure that this is imported for you.
My editor does it automatically.
I'm going to place this here and now we
are going to see the content here disappear, which is totally fine.
But the background color stayed.
As with the rest of the navigations,
we have the gray background automatically applied here.
We're just going to go to style.js
and create a new style and let's call it profile tab content container.
It's going to have a background color set
to white and it's going to be six Fs or you can also always use the word white.
Now let's copy this name and come back here and create a new scroll view.
We're going to definitely need a scroll view because of the fact that we're going
to place a bunch of images here and it should be scrollable.
Let's just apply a style to this, and this style is going to be style.profileTabContainer.
Now, if we save this,
you're going to see that for each tab, it actually has a white color.
But we do want to place some items here.
First and foremost,
the item that we're definitely going to need is going to be an image.
Let's create this image here and let's import it and let's require
the source from our assets folder, images, and then it would be default_post.png
let's close this here, save this,
and you're going to see the image appear here.
Now we want this to be specific width than height.
We also want some horizontal padding here.
Let's just create a view container around this to make sure that the padding
horizontal is applied to all of the items given here.
We're going to import this view.
Now, let's call this style.profileTabContent
let's copy this, go to our styles and make sure that this has padding
horizontal applied and it would be
horizontal scale around 21, I would say.
Great. Now this looks better.
And what we want to do also is create
an image style and let's give this image some dimensions.
Let's say that width of this is going
to be 157, for example, and height is going to be vertical scale around 90.
Let's grab this style and apply it to our image right here.
It would be style.image.
Let's save this. This is how we see our image.
You can probably tell that its corners are cut.
Therefore, let's create resize mode here and let's use the contain.
Perfect. Now we can see it's rounded corners,
and this is how our image actually looks like as well.
The content will be contained inside the dimensions that we gave to the image.
Now what we want to do is try to place a bunch of these images.
Let's say that we will place eight items.
Okay, so we have four right now and this is how it's displayed.
We are going to take care of this.
Let's create four more. Perfect.
Now if we scroll, we can see that this is scrollable.
Oh, let's get rid of this horizontal bar here.
Let's say shows vertical scroll indicator
is set to false so that we don't see it anymore when scrolling.
What we want to do is apply some styles to this view container.
First of all, we're going to say that flex direction is set to row,
and then you're going to see that all of these images are going to be in a row.
We don't want this to happen.
Let's say that we're going to have a flex
wrap that will wrap these images if they don't fit inside this dimension.
Now it's going to wrap.
Let's also say that we want justify content to be space between.
These items have some space in between.
Now what we also might need to do is actually make this width a little bit
smaller because I don't think that they actually are able to fit on this row.
What if we made this 150?
Okay, this looks much better.
Then what we want to do is make sure
that these images have space in between each other.
For that, let's use margin top on the image,
and let's say that vertical scale is going to be something like 11.
Now this looks very similar to our setup here, and we can also scroll this.
If we were to add a couple more items, let's say two more items here.
In total, we're going to have 10 images displayed here.
If I went to this tab and if I were to scroll like this and just leave
the state as is here and go to the videos, you're actually going to notice that even
though we're using the same profile tab content component inside each tab,
the instances of them is different for each tab.
Therefore, if we were to use profile tab content on one tab and some
different component on another, they're going to be their own instances.
We have already seen
an example of this when we created tab one, tab two, and tab three.
These sections dedicated to social media
application were just created so that you could practice your
skills of designing UI using React Native
and you would be able to see how you can
put your skills together after all these
sections that we went through together.
Sor particularly this section
was about navigation.
And in this section, we learned how to use
the Stack Navigator and then how
to use the Drawer Navigator.
And this was about the tabs.
So you can see that this
is working just fine.
If you're confused about anything about
the navigation systems that were set up
in this section, please
never hesitate to reach out.
I'm pretty quick with the responses,
so just always ask your questions.
You can always directly message me,
or you can also always write your
questions inside Q&A section.
Thank you so much for watching this.
I'll see you in the next section where
we're going to be creating a totally different application.
It's going to be a lot of fun and we're
going to introduce many more new concepts and we're going to use all of these
concepts that we learned inside the social media application and apply it one more
time to the new application that we're going to be creating.
It's going to be a great practice for you.
So have a great day, take some rest and come back.
Stay tuned and motivated.
Thank you so much for watching this video and I'll see you soon.