Hello, everyone, and welcome back.
I'm so excited because today we're going
to go over flat list implementation for our application.
We're going to use this very powerful
component to create the user stories given here.
So flat list is a component that is going
to help us render the list of items, and user stories are a list of items, right?
What we're going to need to do,
first of all, is understand what information needs to be in our list.
The information that's going to be needed is displayed right here.
We are going to need the user's first name, we're going to need their profile
picture, and we're going to need to uniquely identify them.
Think about it.
Whenever you create your social media
profile, you always have some unique identifier.
Whether it's your email address or whether it's your username or ID,
you always have some ID assigned to you that is unique just for you.
So we're also going to need it here.
Now let's create a new variable and call it user stories.
It's going to be an array and it's going
to hold all the information about each user story.
Let's say that each user story is represented by an object.
And inside this object, we have the first name of the user.
Let's create the first user and call him Joseph and say that his ID is one.
And then we need his profile image.
For the profile image, we are going to find an image
for the profile image inside the resources of this video.
Just make sure to download that.
And once you have that, create a new folder here, call it Images,
and just drag and drop that item inside here.
Great. Now we're going to have the default
profile image edit here and I'm going to use it for our user Joseph.
I'm going to name it profile image and I'm
going to give it the path to assets, images and default profile PNG file.
Great.
We just created the object that represents the first story.
What we want to do is replicate this and we're going to have nine items
in the list so that we create a horizontally scrollable user stories.
Let's do that.
Let's replicate this and create nine items.
Let's just grab the name directly from the design.
This is going to be Angel with ID 2.
This is going to be White with ID 3.
This is going to be Olivia with ID 4.
I'm going to make this myself, so it's going to be Nadam.
Then let's create another one with Nicholas, and it's going to be of ID 6.
Let's create a couple more.
I'm going to name this Nina with ID 7.
I'm going to name this Nana with ID 8.
Let's create one more and name it Adam, for example, and this will be ID 9.
Here we have nine user stories.
Now, what we have to do is use this array
with the flatlist to display users' information.
We're going to do that in the next video.
Stay tuned.
Now that we have the data, we are all set for creating our flat list component.
I'll see you in the next video.
Thank you so much.