WEBVTT

00:00:00.200 --> 00:00:01.920
Hello, everyone, and welcome back.

00:00:01.940 --> 00:00:04.240
I'm so excited because today we're going

00:00:04.270 --> 00:00:07.900
to go over flat list implementation
for our application.

00:00:07.920 --> 00:00:09.400
We're going to use this very powerful

00:00:09.430 --> 00:00:14.140
component to create the user
stories given here.

00:00:14.170 --> 00:00:18.320
So flat list is a component that is going

00:00:18.350 --> 00:00:24.500
to help us render the list of items, and
user stories are a list of items, right?

00:00:24.530 --> 00:00:26.180
What we're going to need to do,

00:00:26.210 --> 00:00:32.020
first of all, is understand
what information needs to be in our list.

00:00:32.050 --> 00:00:36.260
The information that's going to be
needed is displayed right here.

00:00:36.280 --> 00:00:39.520
We are going to need the user's first
name, we're going to need their profile

00:00:39.550 --> 00:00:42.820
picture, and we're going to need
to uniquely identify them.

00:00:42.850 --> 00:00:43.900
Think about it.

00:00:43.930 --> 00:00:46.540
Whenever you create your social media

00:00:46.570 --> 00:00:50.380
profile, you always have
some unique identifier.

00:00:50.410 --> 00:00:54.660
Whether it's your email address or whether
it's your username or ID,

00:00:54.680 --> 00:00:59.740
you always have some ID assigned
to you that is unique just for you.

00:00:59.770 --> 00:01:01.780
So we're also going to need it here.

00:01:01.810 --> 00:01:05.400
Now let's create a new variable
and call it user stories.

00:01:05.430 --> 00:01:07.480
It's going to be an array and it's going

00:01:07.510 --> 00:01:12.490
to hold all the information
about each user story.

00:01:12.520 --> 00:01:18.850
Let's say that each user story
is represented by an object.

00:01:18.880 --> 00:01:23.260
And inside this object, we
have the first name of the user.

00:01:23.290 --> 00:01:29.930
Let's create the first user and call
him Joseph and say that his ID is one.

00:01:29.960 --> 00:01:31.820
And then we need his profile image.

00:01:31.850 --> 00:01:35.740
For the profile image,
we are going to find an image

00:01:35.770 --> 00:01:39.180
for the profile image inside
the resources of this video.

00:01:39.200 --> 00:01:40.800
Just make sure to download that.

00:01:40.830 --> 00:01:45.780
And once you have that,
create a new folder here, call it Images,

00:01:45.810 --> 00:01:50.820
and just drag and drop
that item inside here.

00:01:50.840 --> 00:01:53.620
Great.
Now we're going to have the default

00:01:53.650 --> 00:01:59.540
profile image edit here and I'm
going to use it for our user Joseph.

00:01:59.570 --> 00:02:02.480
I'm going to name it profile image and I'm

00:02:02.510 --> 00:02:09.820
going to give it the path to assets,
images and default profile PNG file.

00:02:09.840 --> 00:02:10.200
Great.

00:02:10.230 --> 00:02:13.730
We just created the object
that represents the first story.

00:02:13.760 --> 00:02:17.280
What we want to do is replicate this
and we're going to have nine items

00:02:17.310 --> 00:02:22.380
in the list so that we create
a horizontally scrollable user stories.

00:02:22.410 --> 00:02:23.580
Let's do that.

00:02:23.610 --> 00:02:28.380
Let's replicate this
and create nine items.

00:02:28.410 --> 00:02:31.240
Let's just grab the name
directly from the design.

00:02:31.270 --> 00:02:33.520
This is going to be Angel with ID 2.

00:02:33.550 --> 00:02:36.940
This is going to be White with ID 3.

00:02:36.970 --> 00:02:41.140
This is going to be Olivia with ID 4.

00:02:41.170 --> 00:02:44.900
I'm going to make this myself,
so it's going to be Nadam.

00:02:44.930 --> 00:02:50.460
Then let's create another one with
Nicholas, and it's going to be of ID 6.

00:02:50.490 --> 00:02:52.240
Let's create a couple more.

00:02:52.270 --> 00:02:55.160
I'm going to name this Nina with ID 7.

00:02:55.190 --> 00:02:59.140
I'm going to name this Nana with ID 8.

00:02:59.170 --> 00:03:05.220
Let's create one more and name it Adam,
for example, and this will be ID 9.

00:03:05.250 --> 00:03:08.180
Here we have nine user stories.

00:03:08.210 --> 00:03:11.380
Now, what we have to do is use this array

00:03:11.410 --> 00:03:16.540
with the flatlist
to display users' information.

00:03:16.570 --> 00:03:19.220
We're going to do that in the next video.

00:03:19.250 --> 00:03:20.260
Stay tuned.

00:03:20.290 --> 00:03:26.140
Now that we have the data, we are all set
for creating our flat list component.

00:03:26.160 --> 00:03:27.700
I'll see you in the next video.

00:03:27.730 --> 00:03:28.840
Thank you so much.