Hello and welcome back.
Right now, we're going to start creating
our flat list using the user stories that we created in the previous video.
Let's just do that.
For this, we're going to need a container for this flat list.
Let's create a view container for our flat
list component and make sure that it has the right stylings.
Our flat list needs to be 20 points away, approximately from our header.
Let's make sure to create the style and I call it global style user story container.
Go to our global styles here and say that, hey, this should be 20 points away.
It also has some margins set here.
The margins for this container is approximately 28.
Let's make sure that margin horizontal is set to 28.
Let's save that.
Then what we want to do is place this flatlist right inside this container.
When creating flatlist,
I'm going to press on Enter and it's going to be imported here by the way.
There are two required properties and this is something that my editor just does
automatically because it's just required and I have to fill it in.
The first thing is going to be data and it's going to be expecting an array.
We're going to put our user stories array inside this data.
Then here we have the second property, which is actually going to be expecting
a component generated according to each item.
What happens here is that a callback
function is called and the callback function is called,
and the callback function, as an argument has each item.
Render item takes in a singular item
and that singular item is grabbed from the user stories here.
Each item is an object here.
We're going to grab each object representing the user stories when trying
to render the items and we're going to use that information to show our user stories.
What does that mean?
It means that we're going to have
to create a component for reusability for each user story shown here.
Let's do exactly that.
What we're going to need to do is create a new component.
We want to create a new directory and call it userStory.
Inside this directory, we're going to have two files.
As always, it's going to be userStory.js
and it's going to be the style for the userStory.
Great. Now we have these two files,
and what we want to do with them is start creating each userStory.
Here, we're definitely going to need React.
Then we're going to need the constant for user story,
which is going to be a functional component returning null so far.
We're going to have to export default user story.
As we understand, this user story will have to accept props,
and these props are going to come from the values of this item.
So what properties are we going to need?
We're going to need a first name and then the image of the user.
We could pass in the ID, but it's not very necessary because we're
not going to be displaying it in this component.
So that's okay.
We can refrain from doing that.
Now here, what we're going to do is make
sure that we have the type checker for our props.
We're going to have to import prop types from prop types.
We're going to say here that
prop types expected for the user story is going to be a first name,
which is going to be a type of string, and it's definitely going to be required.
Then we're going to need the prop type for the image.
We're going to say profile image.
It's going to be of type object, and it's going to be required.
Great.
Now that we have this set up, what we want to do is actually start
creating the user stories and how they look.
Let's do that.
We are going to need a view container
definitely, and we're going to have to import this from React Native.
Great.
Inside here, first, we're definitely going to need an image
and it's going to have a source, and its source is going to be props.profileImage.
The other thing that we're going to need is going to be a text and this text is
going to be used to display the first name of the user.
Now let's make sure that these items are available here.
Perfect.
What I'm going to need to do here is make sure that I use the user story.
The user story would be used right inside here.
Let's make sure that we use this user story and we have to import this.
Let's import the user story. It's imported right now.
Let's save this.
Here we see that there are some props required that I haven't passed.
Let's make sure that we pass those.
The first property required is called firstName, and we're going to use item.
Firstname.
This item.firstname, this property comes directly from here.
If you named this variable somehow
differently, this attribute, you would have used the same name here.
Then we also need the profile image, right?
We're going to say that that is going to be item.profileimage.
We're going to say that that is going to be item.profileImage.
Let's save this. Now this is way better formatted and we
see our list appear here in a vertical manner.
Now, we want this to be horizontal.
All you have to do for this in flatlist is make sure that horizontal is set to true.
Now you see horizontally.
When you scroll here, you're going to always see the scroll
indicator, which is not the best thing ever.
Let's get rid of that.
You can look up a property of a flatlist called shows horizontal scroll indicator.
The same exists for vertical, but we are scrolling horizontally right
now, so I'm going to use this and I'm going to set it to false.
Now if I start to scroll,
you're going to see that that indicator is not shown anymore.
Now, the main thing that we got to do here
is make sure that this is styled appropriately.
Let's go here and make sure that we do that.
Now, the first style that we're going to need is going to be story container.
Let's create a style called story container.
So style.storyContainer.
But the thing is that we haven't really created the initial stylesheet here.
Let's go here inside the userStoryStyle.
Js file and import the stylesheet and then make sure that we create a style
constant that is going to use this styleship to create a new stylesheet.
We can just place the story container right here already.
Let's export default, story, no, styles.
Great.
Let's make sure that this is imported here so that we get no errors.
Let's save this.
Now let's make sure that we actually write some styles inside here.
What style do we need to write here?
First style that we definitely need is margin to the right so that each story has
some space to its right and the value is 20 as shown on the Figma file.
Let's make sure that we have margin right
20 and you're going to see that we now have this space available here.
After that, we're definitely going to need to style the name of the user.
Let's create first name here and let's make sure that we assign that style here.
Great. Let's call this style.firstname.
Let's go back here and now let's look
into the properties that we need to assign to this name.
I'm going to click here.
The development mode is on on my Figma.
I'm just going to move my editor a little bit to the right and let's get started.
The first name has the font family of guess what?
It's going to be inter.
We're going to need our getFontFamily function and we're going to say that we
need the inter font and we have the font weight of 500.
Let's just input that here as well.
now, what we also need to do is make sure
that we have the font size set correctly, so that would be 14.
Let's make sure that color is also appropriate.
I'm just going to pass it here.
Then we have some spacing.
If you see, it's margin top eight.
Let's make sure that we have that here as well.
Now we also want to make sure that the text is centered inside its container.
As you see, it's not right here.
Let's say text align center, and now they should be centered.
Let's see if we have any other properties that we might need.
It seems that we got everything under control.
Now we can just go back to looking at our simulator here.
Here we go.
We see that this is a scrollable container.
What we're missing is this border for our image, this purple border.
Here, and to put this purple border around
the image, we're going to have to place this inside the view container.
Then what we're going to have to do is come up with some style name here as well.
Let's call it User Image container.
That's very simple.
Let's go to styles and create this User Image container right here.
Let's say that border color is going to be what's different about this.
Let's grab this color from here.
It's copied.
I'm going to paste right here.
Let's make sure this is Camel case.
And then actually we need border width and it's going to be one.
And then what we're going to need is the padding and this padding is going
to be the space in between this image given here and the border.
It seems like this is a grouped component.
Therefore, it's going to be hard to come up with what's the padding inside of it?
I'm just going to say it's eight.
Okay, I think that's a bit too much.
Okay, what about three?
That seems a bit better.
Now let's set the border radius,
and let's say that the border radius is 50, and it's going to be circular.
Great.
This looks a lot more like the image given here.
We can also set the height and width of the image that was given here.
We can totally do that.
We can go back here and have a style for the image and call it image.
Let's go back here.
We're going to create an image style,
and let's say that with this 65 and height is 65 as well, now images got bigger.
What we also need to do is make sure that border radius matches that.
I'm just going to make this 65. Perfect.
Now we have our scrollable list
that we created using the flatlist and user story component.
In the next video, we're going to go into explaining
something very interesting that is called infinite scrolling.
Stay tuned, come back, and we're going to go over this very exciting topic.
Thank you so much for joining and see you in the next video.