WEBVTT

00:00:00.000 --> 00:00:02.020
Hello and welcome back.

00:00:02.040 --> 00:00:03.920
Right now, we're going to start creating

00:00:03.950 --> 00:00:08.090
our flat list using the user stories
that we created in the previous video.

00:00:08.120 --> 00:00:10.140
Let's just do that.

00:00:10.160 --> 00:00:12.900
For this, we're going to need
a container for this flat list.

00:00:12.930 --> 00:00:15.760
Let's create a view container for our flat

00:00:15.790 --> 00:00:21.760
list component and make sure
that it has the right stylings.

00:00:22.000 --> 00:00:27.820
Our flat list needs to be 20 points away,
approximately from our header.

00:00:27.850 --> 00:00:36.600
Let's make sure to create the style and I
call it global style user story container.

00:00:37.240 --> 00:00:43.420
Go to our global styles here and say that,
hey, this should be 20 points away.

00:00:43.450 --> 00:00:48.420
It also has some margins set here.

00:00:48.450 --> 00:00:53.980
The margins for this container
is approximately 28.

00:00:54.010 --> 00:00:58.200
Let's make sure that margin
horizontal is set to 28.

00:00:58.230 --> 00:00:59.500
Let's save that.

00:00:59.530 --> 00:01:06.240
Then what we want to do is place this
flatlist right inside this container.

00:01:06.520 --> 00:01:08.740
When creating flatlist,

00:01:08.770 --> 00:01:12.820
I'm going to press on Enter and it's
going to be imported here by the way.

00:01:12.850 --> 00:01:16.880
There are two required properties and this
is something that my editor just does

00:01:16.910 --> 00:01:21.340
automatically because it's just
required and I have to fill it in.

00:01:21.370 --> 00:01:26.280
The first thing is going to be data
and it's going to be expecting an array.

00:01:26.310 --> 00:01:30.620
We're going to put our user
stories array inside this data.

00:01:30.650 --> 00:01:36.930
Then here we have the second property,
which is actually going to be expecting

00:01:36.960 --> 00:01:41.740
a component generated
according to each item.

00:01:41.770 --> 00:01:44.740
What happens here is that a callback

00:01:44.770 --> 00:01:48.040
function is called and
the callback function is called,

00:01:48.070 --> 00:01:51.100
and the callback function,
as an argument has each item.

00:01:51.130 --> 00:01:55.000
Render item takes in a singular item

00:01:55.030 --> 00:01:58.840
and that singular item is grabbed
from the user stories here.

00:01:58.870 --> 00:02:02.340
Each item is an object here.

00:02:02.370 --> 00:02:08.080
We're going to grab each object
representing the user stories when trying

00:02:08.110 --> 00:02:15.660
to render the items and we're going to use
that information to show our user stories.

00:02:15.690 --> 00:02:17.170
What does that mean?

00:02:17.200 --> 00:02:19.140
It means that we're going to have

00:02:19.170 --> 00:02:26.300
to create a component for reusability
for each user story shown here.

00:02:26.330 --> 00:02:29.500
Let's do exactly that.

00:02:29.530 --> 00:02:33.940
What we're going to need to do is create
a new component.

00:02:33.970 --> 00:02:38.170
We want to create a new
directory and call it userStory.

00:02:38.200 --> 00:02:40.920
Inside this directory,
we're going to have two files.

00:02:40.950 --> 00:02:43.940
As always, it's going to be userStory.js

00:02:47.160 --> 00:02:51.140
and it's going to be
the style for the userStory.

00:02:51.160 --> 00:02:53.340
Great.
Now we have these two files,

00:02:53.370 --> 00:02:58.580
and what we want to do with them is
start creating each userStory.

00:02:58.610 --> 00:03:02.020
Here, we're definitely
going to need React.

00:03:02.050 --> 00:03:06.240
Then we're going to need the constant
for user story,

00:03:06.270 --> 00:03:11.820
which is going to be a functional
component returning null so far.

00:03:11.850 --> 00:03:15.460
We're going to have to export
default user story.

00:03:15.490 --> 00:03:21.060
As we understand,
this user story will have to accept props,

00:03:21.090 --> 00:03:25.700
and these props are going to come
from the values of this item.

00:03:25.730 --> 00:03:28.160
So what properties are we going to need?

00:03:28.190 --> 00:03:34.580
We're going to need a first name
and then the image of the user.

00:03:34.610 --> 00:03:38.880
We could pass in the ID,
but it's not very necessary because we're

00:03:38.910 --> 00:03:41.320
not going to be displaying
it in this component.

00:03:41.350 --> 00:03:42.700
So that's okay.

00:03:42.730 --> 00:03:45.700
We can refrain from doing that.

00:03:45.730 --> 00:03:49.400
Now here, what we're going to do is make

00:03:49.430 --> 00:03:52.360
sure that we have the type
checker for our props.

00:03:52.390 --> 00:03:56.480
We're going to have to import
prop types from prop types.

00:03:56.510 --> 00:03:58.610
We're going to say here that

00:03:58.640 --> 00:04:03.180
prop types expected for the user story is
going to be a first name,

00:04:03.210 --> 00:04:09.020
which is going to be a type of string,
and it's definitely going to be required.

00:04:09.050 --> 00:04:12.580
Then we're going to need
the prop type for the image.

00:04:12.610 --> 00:04:14.800
We're going to say profile image.

00:04:14.830 --> 00:04:22.620
It's going to be of type object,
and it's going to be required.

00:04:22.650 --> 00:04:23.380
Great.

00:04:23.410 --> 00:04:27.620
Now that we have this set up,
what we want to do is actually start

00:04:27.650 --> 00:04:31.100
creating the user stories
and how they look.

00:04:31.130 --> 00:04:32.860
Let's do that.

00:04:32.880 --> 00:04:34.520
We are going to need a view container

00:04:34.540 --> 00:04:40.840
definitely, and we're going to have
to import this from React Native.

00:04:41.680 --> 00:04:42.700
Great.

00:04:42.720 --> 00:04:48.420
Inside here, first, we're definitely going
to need an image

00:04:48.450 --> 00:04:55.340
and it's going to have a source,
and its source is going to be props.profileImage.

00:04:55.360 --> 00:04:59.960
The other thing that we're going to need
is going to be a text and this text is

00:04:59.980 --> 00:05:04.820
going to be used to display
the first name of the user.

00:05:04.840 --> 00:05:09.280
Now let's make sure that these
items are available here.

00:05:10.840 --> 00:05:12.100
Perfect.

00:05:12.130 --> 00:05:17.020
What I'm going to need to do here is
make sure that I use the user story.

00:05:17.040 --> 00:05:21.060
The user story would be
used right inside here.

00:05:21.090 --> 00:05:28.740
Let's make sure that we use this user
story and we have to import this.

00:05:28.770 --> 00:05:31.680
Let's import the user story.
It's imported right now.

00:05:31.710 --> 00:05:32.680
Let's save this.

00:05:32.710 --> 00:05:36.900
Here we see that there are some props
required that I haven't passed.

00:05:36.920 --> 00:05:39.300
Let's make sure that we pass those.

00:05:39.330 --> 00:05:45.100
The first property required is called
firstName, and we're going to use item.

00:05:45.130 --> 00:05:46.460
Firstname.

00:05:46.480 --> 00:05:51.580
This item.firstname, this property
comes directly from here.

00:05:51.600 --> 00:05:54.160
If you named this variable somehow

00:05:54.190 --> 00:05:57.940
differently, this attribute,
you would have used the same name here.

00:05:57.970 --> 00:06:01.300
Then we also need
the profile image, right?

00:06:01.330 --> 00:06:03.960
We're going to say that
that is going to be item.profileimage.

00:06:03.960 --> 00:06:05.760
We're going to say that
that is going to be item.profileImage.

00:06:05.790 --> 00:06:09.060
Let's save this.
Now this is way better formatted and we

00:06:09.090 --> 00:06:13.860
see our list appear
here in a vertical manner.

00:06:13.890 --> 00:06:16.620
Now, we want this to be horizontal.

00:06:16.650 --> 00:06:22.620
All you have to do for this in flatlist is
make sure that horizontal is set to true.

00:06:22.650 --> 00:06:24.900
Now you see horizontally.

00:06:24.920 --> 00:06:29.120
When you scroll here,
you're going to always see the scroll

00:06:29.150 --> 00:06:31.900
indicator, which is not
the best thing ever.

00:06:31.920 --> 00:06:33.340
Let's get rid of that.

00:06:33.360 --> 00:06:39.820
You can look up a property of a flatlist
called shows horizontal scroll indicator.

00:06:39.850 --> 00:06:43.320
The same exists for vertical,
but we are scrolling horizontally right

00:06:43.350 --> 00:06:46.580
now, so I'm going to use this
and I'm going to set it to false.

00:06:46.600 --> 00:06:47.940
Now if I start to scroll,

00:06:47.970 --> 00:06:52.900
you're going to see that
that indicator is not shown anymore.

00:06:52.920 --> 00:06:55.520
Now, the main thing that we got to do here

00:06:55.540 --> 00:06:58.740
is make sure that this
is styled appropriately.

00:06:58.770 --> 00:07:01.660
Let's go here and make
sure that we do that.

00:07:01.690 --> 00:07:06.300
Now, the first style that we're going
to need is going to be story container.

00:07:06.330 --> 00:07:10.620
Let's create a style called
story container.

00:07:10.650 --> 00:07:12.840
So style.storyContainer.

00:07:12.860 --> 00:07:18.380
But the thing is that we haven't really
created the initial stylesheet here.

00:07:18.410 --> 00:07:21.280
Let's go here inside the userStoryStyle.

00:07:21.300 --> 00:07:26.200
Js file and import the stylesheet and
then make sure that we create a style

00:07:26.230 --> 00:07:30.460
constant that is going to use this
styleship to create a new stylesheet.

00:07:30.480 --> 00:07:34.740
We can just place the story
container right here already.

00:07:34.770 --> 00:07:41.100
Let's export default, story, no, styles.

00:07:41.120 --> 00:07:42.140
Great.

00:07:42.170 --> 00:07:46.780
Let's make sure that this is imported
here so that we get no errors.

00:07:46.800 --> 00:07:47.940
Let's save this.

00:07:47.970 --> 00:07:52.300
Now let's make sure that we actually
write some styles inside here.

00:07:52.330 --> 00:07:54.780
What style do we need to write here?

00:07:54.800 --> 00:08:00.040
First style that we definitely need is
margin to the right so that each story has

00:08:00.070 --> 00:08:04.860
some space to its right and the value
is 20 as shown on the Figma file.

00:08:04.890 --> 00:08:07.020
Let's make sure that we have margin right

00:08:07.040 --> 00:08:11.540
20 and you're going to see that we
now have this space available here.

00:08:11.560 --> 00:08:15.160
After that, we're definitely going
to need to style the name of the user.

00:08:15.190 --> 00:08:21.920
Let's create first name here and let's
make sure that we assign that style here.

00:08:23.120 --> 00:08:27.840
Great.
Let's call this style.firstname.

00:08:28.720 --> 00:08:31.040
Let's go back here and now let's look

00:08:31.070 --> 00:08:34.520
into the properties that we
need to assign to this name.

00:08:34.550 --> 00:08:36.300
I'm going to click here.

00:08:36.320 --> 00:08:39.100
The development mode is on on my Figma.

00:08:39.130 --> 00:08:43.920
I'm just going to move my editor a little
bit to the right and let's get started.

00:08:43.940 --> 00:08:47.620
The first name has the font
family of guess what?

00:08:47.650 --> 00:08:49.220
It's going to be inter.

00:08:49.250 --> 00:08:53.400
We're going to need our getFontFamily
function and we're going to say that we

00:08:53.430 --> 00:08:57.660
need the inter font and we
have the font weight of 500.

00:08:57.690 --> 00:08:59.780
Let's just input that here as well.

00:09:00.850 --> 00:09:05.240
now, what we also need to do is make sure

00:09:05.270 --> 00:09:08.980
that we have the font size set
correctly, so that would be 14.

00:09:09.010 --> 00:09:12.380
Let's make sure that color
is also appropriate.

00:09:12.410 --> 00:09:15.300
I'm just going to pass it here.

00:09:15.320 --> 00:09:17.380
Then we have some spacing.

00:09:17.410 --> 00:09:21.020
If you see, it's margin top eight.

00:09:21.050 --> 00:09:24.400
Let's make sure that we
have that here as well.

00:09:24.440 --> 00:09:30.640
Now we also want to make sure that the
text is centered inside its container.

00:09:30.670 --> 00:09:32.940
As you see, it's not right here.

00:09:32.970 --> 00:09:39.340
Let's say text align center,
and now they should be centered.

00:09:39.370 --> 00:09:43.140
Let's see if we have any other
properties that we might need.

00:09:43.170 --> 00:09:46.220
It seems that we got
everything under control.

00:09:46.250 --> 00:09:49.860
Now we can just go back
to looking at our simulator here.

00:09:49.890 --> 00:09:51.080
Here we go.

00:09:51.110 --> 00:09:53.740
We see that this is
a scrollable container.

00:09:53.770 --> 00:10:00.000
What we're missing is this border
for our image, this purple border.

00:10:00.030 --> 00:10:03.280
Here, and to put this purple border around

00:10:03.310 --> 00:10:07.740
the image, we're going to have to place
this inside the view container.

00:10:07.770 --> 00:10:12.140
Then what we're going to have to do is
come up with some style name here as well.

00:10:12.170 --> 00:10:14.820
Let's call it User Image container.

00:10:14.850 --> 00:10:16.360
That's very simple.

00:10:16.390 --> 00:10:20.780
Let's go to styles and create this
User Image container right here.

00:10:20.810 --> 00:10:25.260
Let's say that border color is going
to be what's different about this.

00:10:25.290 --> 00:10:27.880
Let's grab this color from here.

00:10:27.910 --> 00:10:29.020
It's copied.

00:10:29.050 --> 00:10:31.420
I'm going to paste right here.

00:10:31.440 --> 00:10:34.420
Let's make sure this is Camel case.

00:10:34.440 --> 00:10:39.140
And then actually we need border width
and it's going to be one.

00:10:39.170 --> 00:10:43.320
And then what we're going to need is
the padding and this padding is going

00:10:43.350 --> 00:10:50.660
to be the space in between this image
given here and the border.

00:10:50.690 --> 00:10:53.820
It seems like this is a grouped component.

00:10:53.840 --> 00:10:57.360
Therefore, it's going to be hard to come
up with what's the padding inside of it?

00:10:57.390 --> 00:10:59.500
I'm just going to say it's eight.

00:10:59.520 --> 00:11:01.120
Okay, I think that's a bit too much.

00:11:01.150 --> 00:11:03.060
Okay, what about three?

00:11:03.080 --> 00:11:04.900
That seems a bit better.

00:11:04.930 --> 00:11:06.680
Now let's set the border radius,

00:11:06.710 --> 00:11:11.320
and let's say that the border radius
is 50, and it's going to be circular.

00:11:11.320 --> 00:11:12.140
Great.

00:11:12.170 --> 00:11:15.780
This looks a lot more like
the image given here.

00:11:15.810 --> 00:11:20.120
We can also set the height and width
of the image that was given here.

00:11:20.150 --> 00:11:21.640
We can totally do that.

00:11:21.670 --> 00:11:27.620
We can go back here and have a style
for the image and call it image.

00:11:27.650 --> 00:11:29.780
Let's go back here.

00:11:29.800 --> 00:11:31.560
We're going to create an image style,

00:11:31.580 --> 00:11:38.620
and let's say that with this 65 and height
is 65 as well, now images got bigger.

00:11:38.640 --> 00:11:41.920
What we also need to do is make sure
that border radius matches that.

00:11:41.950 --> 00:11:45.320
I'm just going to make this 65.
Perfect.

00:11:45.350 --> 00:11:47.940
Now we have our scrollable list

00:11:47.970 --> 00:11:52.700
that we created using the flatlist
and user story component.

00:11:52.730 --> 00:11:56.120
In the next video,
we're going to go into explaining

00:11:56.150 --> 00:12:00.740
something very interesting that is
called infinite scrolling.

00:12:00.770 --> 00:12:05.700
Stay tuned, come back, and we're going
to go over this very exciting topic.

00:12:05.720 --> 00:12:08.440
Thank you so much for joining
and see you in the next video.