WEBVTT

00:00:00.200 --> 00:00:01.780
Hi, everyone, and welcome back.

00:00:01.810 --> 00:00:06.780
Today, what we're going to do is make sure
that we create this content for each tab.

00:00:06.810 --> 00:00:10.960
We created this tab one, tab two,
and tab three initially to see how this

00:00:10.990 --> 00:00:14.980
would function and how the content
would differ for each tab.

00:00:15.000 --> 00:00:18.800
But right now what we want to do is just
get rid of all of this and have a custom

00:00:18.830 --> 00:00:21.980
component that would take
care of showing this content.

00:00:22.010 --> 00:00:27.260
As you see here, we're going to be
using the default post PNG file.

00:00:27.280 --> 00:00:29.420
I'm sure that you already
have it in your code base.

00:00:29.450 --> 00:00:33.020
If not, you can also always download
it from your resources folder.

00:00:33.050 --> 00:00:35.300
I'll just quickly get started with this.

00:00:35.320 --> 00:00:37.120
What we want to do is create a new

00:00:37.140 --> 00:00:39.880
component and let's create
the directory for it.

00:00:39.910 --> 00:00:44.700
Let's call it profile tab content.

00:00:44.730 --> 00:00:47.600
We can name the file the same way.

00:00:47.630 --> 00:00:50.040
Let's use profileTabContent.js

00:00:50.070 --> 00:00:51.380
here.

00:00:51.410 --> 00:00:54.000
Let's also create the style.js file.

00:00:54.030 --> 00:00:56.220
This is what we always do.

00:00:56.250 --> 00:00:57.720
Since we're in this file,

00:00:57.750 --> 00:01:02.560
I'm just going to quickly import the style
sheet and I'm going to define the style

00:01:02.590 --> 00:01:06.850
and use this imported stylesheet
to create an empty set of styles.

00:01:06.880 --> 00:01:11.380
Let's export this style and make
sure that we use it inside here.

00:01:11.410 --> 00:01:12.960
Let's set this up real quick.

00:01:12.990 --> 00:01:15.570
It will be importing React.

00:01:15.600 --> 00:01:21.020
Then we're also going to need
to import our styles from style.js file.

00:01:21.050 --> 00:01:26.780
Let's set up a profile tab, content,
functional component.

00:01:26.810 --> 00:01:28.840
Let's let it return null so far.

00:01:28.870 --> 00:01:34.540
We're not going to have any props,
so let's just export this as it is.

00:01:34.560 --> 00:01:37.440
Now what we want to do is make
sure that we use this component.

00:01:37.470 --> 00:01:41.520
Let's go back and let's delete this
tab one, tab two, and tab three.

00:01:41.550 --> 00:01:42.980
We don't need them anymore.

00:01:43.000 --> 00:01:45.480
Therefore, we can also delete
this import statement.

00:01:45.510 --> 00:01:47.540
We also don't need this anymore.

00:01:47.570 --> 00:01:52.490
Instead of tab one, we're going
to be using profile tab content.

00:01:52.520 --> 00:01:55.600
Let's copy this and make sure
that this is imported for you.

00:01:55.630 --> 00:01:58.260
My editor does it automatically.

00:01:58.290 --> 00:02:00.600
I'm going to place this here and now we

00:02:00.630 --> 00:02:04.460
are going to see the content here
disappear, which is totally fine.

00:02:04.490 --> 00:02:06.490
But the background color stayed.

00:02:06.520 --> 00:02:08.680
As with the rest of the navigations,

00:02:08.710 --> 00:02:12.100
we have the gray background
automatically applied here.

00:02:12.130 --> 00:02:15.086
We're just going to go to style.js

00:02:15.286 --> 00:02:21.260
and create a new style and let's
call it profile tab content container.

00:02:21.290 --> 00:02:24.140
It's going to have a background color set

00:02:24.170 --> 00:02:29.380
to white and it's going to be six Fs or
you can also always use the word white.

00:02:29.410 --> 00:02:34.120
Now let's copy this name and come back
here and create a new scroll view.

00:02:34.120 --> 00:02:38.080
We're going to definitely need a scroll
view because of the fact that we're going

00:02:38.110 --> 00:02:41.780
to place a bunch of images here
and it should be scrollable.

00:02:41.810 --> 00:02:48.029
Let's just apply a style to this,
and this style is going to be style.profileTabContainer.

00:02:48.229 --> 00:02:49.480
Now, if we save this,

00:02:49.510 --> 00:02:53.260
you're going to see that for each tab,
it actually has a white color.

00:02:53.290 --> 00:02:55.940
But we do want to place some items here.

00:02:55.970 --> 00:02:57.240
First and foremost,

00:02:57.270 --> 00:03:02.020
the item that we're definitely going
to need is going to be an image.

00:03:02.050 --> 00:03:07.360
Let's create this image here
and let's import it and let's require

00:03:07.390 --> 00:03:14.760
the source from our assets folder, images,
and then it would be default_post.png

00:03:16.490 --> 00:03:19.360
let's close this here, save this,

00:03:19.390 --> 00:03:21.640
and you're going to see
the image appear here.

00:03:21.670 --> 00:03:25.140
Now we want this to be
specific width than height.

00:03:25.170 --> 00:03:28.360
We also want some horizontal padding here.

00:03:28.390 --> 00:03:35.440
Let's just create a view container around
this to make sure that the padding

00:03:35.470 --> 00:03:38.820
horizontal is applied to all
of the items given here.

00:03:38.850 --> 00:03:41.060
We're going to import this view.

00:03:41.090 --> 00:03:45.000
Now, let's call this style.profileTabContent

00:03:47.610 --> 00:03:52.400
let's copy this, go to our styles
and make sure that this has padding

00:03:52.430 --> 00:03:55.439
horizontal applied and it would be

00:03:55.639 --> 00:03:58.980
horizontal scale around 21, I would say.

00:03:59.000 --> 00:04:00.760
Great.
Now this looks better.

00:04:00.790 --> 00:04:03.560
And what we want to do also is create

00:04:03.590 --> 00:04:06.800
an image style and let's give
this image some dimensions.

00:04:06.830 --> 00:04:09.600
Let's say that width of this is going

00:04:09.630 --> 00:04:18.440
to be 157, for example, and height is
going to be vertical scale around 90.

00:04:18.680 --> 00:04:23.740
Let's grab this style and apply
it to our image right here.

00:04:23.770 --> 00:04:25.820
It would be style.image.

00:04:25.840 --> 00:04:28.640
Let's save this.
This is how we see our image.

00:04:28.660 --> 00:04:31.740
You can probably tell
that its corners are cut.

00:04:31.770 --> 00:04:41.200
Therefore, let's create resize mode
here and let's use the contain.

00:04:42.040 --> 00:04:44.240
Perfect.
Now we can see it's rounded corners,

00:04:44.270 --> 00:04:47.500
and this is how our image
actually looks like as well.

00:04:47.530 --> 00:04:52.580
The content will be contained inside
the dimensions that we gave to the image.

00:04:52.600 --> 00:04:56.080
Now what we want to do is try
to place a bunch of these images.

00:04:56.100 --> 00:04:59.620
Let's say that we will place eight items.

00:04:59.650 --> 00:05:03.720
Okay, so we have four right now
and this is how it's displayed.

00:05:03.720 --> 00:05:04.960
We are going to take care of this.

00:05:04.980 --> 00:05:07.720
Let's create four more.
Perfect.

00:05:07.750 --> 00:05:11.120
Now if we scroll, we can see
that this is scrollable.

00:05:11.150 --> 00:05:14.120
Oh, let's get rid of this
horizontal bar here.

00:05:14.150 --> 00:05:16.560
Let's say shows vertical scroll indicator

00:05:16.590 --> 00:05:20.740
is set to false so that we don't
see it anymore when scrolling.

00:05:20.770 --> 00:05:25.240
What we want to do is apply some
styles to this view container.

00:05:25.270 --> 00:05:30.320
First of all, we're going to say that flex
direction is set to row,

00:05:30.350 --> 00:05:34.340
and then you're going to see that all
of these images are going to be in a row.

00:05:34.360 --> 00:05:35.600
We don't want this to happen.

00:05:35.630 --> 00:05:38.100
Let's say that we're going to have a flex

00:05:38.130 --> 00:05:43.580
wrap that will wrap these images if
they don't fit inside this dimension.

00:05:43.600 --> 00:05:45.760
Now it's going to wrap.

00:05:45.790 --> 00:05:52.020
Let's also say that we want justify
content to be space between.

00:05:52.040 --> 00:05:55.460
These items have some space in between.

00:05:55.480 --> 00:05:59.340
Now what we also might need to do is
actually make this width a little bit

00:05:59.360 --> 00:06:05.080
smaller because I don't think that they
actually are able to fit on this row.

00:06:05.100 --> 00:06:07.460
What if we made this 150?

00:06:07.480 --> 00:06:09.180
Okay, this looks much better.

00:06:09.210 --> 00:06:11.080
Then what we want to do is make sure

00:06:11.100 --> 00:06:13.640
that these images have space
in between each other.

00:06:13.670 --> 00:06:17.840
For that, let's use
margin top on the image,

00:06:17.860 --> 00:06:23.220
and let's say that vertical scale
is going to be something like 11.

00:06:23.250 --> 00:06:28.380
Now this looks very similar to our setup
here, and we can also scroll this.

00:06:28.410 --> 00:06:34.260
If we were to add a couple more items,
let's say two more items here.

00:06:34.290 --> 00:06:37.980
In total, we're going to have
10 images displayed here.

00:06:38.010 --> 00:06:42.500
If I went to this tab and if I were
to scroll like this and just leave

00:06:42.530 --> 00:06:47.640
the state as is here and go to the videos,
you're actually going to notice that even

00:06:47.670 --> 00:06:53.180
though we're using the same profile tab
content component inside each tab,

00:06:53.210 --> 00:06:57.440
the instances of them is
different for each tab.

00:06:57.470 --> 00:07:03.000
Therefore, if we were to use
profile tab content on one tab and some

00:07:03.030 --> 00:07:06.640
different component on another,
they're going to be their own instances.

00:07:06.670 --> 00:07:08.340
We have already seen

00:07:08.360 --> 00:07:12.580
an example of this when we created
tab one, tab two, and tab three.

00:07:12.600 --> 00:07:15.280
These sections dedicated to social media

00:07:15.300 --> 00:07:19.260
application were just created so that you
could practice your

00:07:19.290 --> 00:07:22.332
skills of designing UI using React Native

00:07:22.532 --> 00:07:25.300
and you would be able to see how you can

00:07:25.330 --> 00:07:27.533
put your skills together after all these

00:07:27.733 --> 00:07:29.680
sections that we went through together.

00:07:29.710 --> 00:07:31.665
Sor particularly this section

00:07:31.865 --> 00:07:33.080
was about navigation.

00:07:33.100 --> 00:07:35.720
And in this section, we learned how to use

00:07:35.750 --> 00:07:37.697
the Stack Navigator and then how

00:07:37.897 --> 00:07:39.400
to use the Drawer Navigator.

00:07:39.420 --> 00:07:41.580
And this was about the tabs.

00:07:41.600 --> 00:07:42.976
So you can see that this

00:07:43.176 --> 00:07:44.180
is working just fine.

00:07:44.210 --> 00:07:46.505
If you're confused about anything about

00:07:46.705 --> 00:07:48.800
the navigation systems that were set up

00:07:48.830 --> 00:07:50.305
in this section, please

00:07:50.505 --> 00:07:52.100
never hesitate to reach out.

00:07:52.130 --> 00:07:53.966
I'm pretty quick with the responses,

00:07:54.166 --> 00:07:55.700
so just always ask your questions.

00:07:55.720 --> 00:07:57.400
You can always directly message me,

00:07:57.420 --> 00:08:00.039
or you can also always write your

00:08:00.239 --> 00:08:02.340
questions inside Q&A section.

00:08:02.360 --> 00:08:04.180
Thank you so much for watching this.

00:08:04.200 --> 00:08:05.840
I'll see you in the next section where

00:08:05.860 --> 00:08:08.760
we're going to be creating
a totally different application.

00:08:08.760 --> 00:08:10.680
It's going to be a lot of fun and we're

00:08:10.710 --> 00:08:15.320
going to introduce many more new concepts
and we're going to use all of these

00:08:15.350 --> 00:08:19.960
concepts that we learned inside the social
media application and apply it one more

00:08:19.980 --> 00:08:23.420
time to the new application
that we're going to be creating.

00:08:23.450 --> 00:08:25.700
It's going to be a great practice for you.

00:08:25.730 --> 00:08:28.780
So have a great day,
take some rest and come back.

00:08:28.800 --> 00:08:30.260
Stay tuned and motivated.

00:08:30.290 --> 00:08:33.440
Thank you so much for watching
this video and I'll see you soon.