Hi, everyone, and welcome back.
Today, we're going to start thinking about
how to construct our flat list for the user stories given here.
We're going to start from basics, and at the end, we're going to change up
some of the things that we're going to develop.
But for now, what we're going to do is create a flat
list here and place it inside the view container.
Let's say we have a flat list and it's grabbing the user post.
For now, let's not think about
the pagination and the infinite scrolling yet.
We're going to have a render item
function here and it's going to take in a callback function.
Let's close this flat list.
What it's going to do is grab each item
in the flat list and it's going to do something with it.
Let's save this.
Now, what we want to do is create a user post component.
Let's do that.
Create a new directory, call it user post.
Inside here, we're going to create a new file which will be userpost.js.
We'll also need the styling function.
Let's say it is style.js.
Since we have this file open,
I'm just going to click right here that we're going to import stylesheet.
Then we also are going to need a style constant,
and it's going to use this stylesheet that we imported to create a stylesheet.
Then we're going to import this style.
Now let's go back to the userPost.s file and start creating our component.
Let's import react from react.
Then we're also going to need the user
post here and we're going to return null so far.
What we're going to do is export this user post.
Now what we need to do is make sure
that we construct it in a way that we're able to grab some properties for the user
post so that we can get the first name, the location, bookmarks, and all of that.
We're going to need props here.
And if we need props, we need import prop types here.
Let's set that up and say that user post
needs prop types and it's going to need a first name
and it's going to be Prop types string is required.
We're definitely going to need the last
name and it's also going to be a string and it's going to be required.
We can make the location string that is not necessarily required.
What we're also going to need is the image
and it is going to be required and we can make this any.
We already have an experience for this.
Let's say that we need the bookmarks
and it's going to be a number and it's going to be required.
Let me write something here.
Actually, first we should have started with likes.
Let's create a number and it's also going
to be required and we're going to need the same for comments.
We're going to need comments and it is going to be required.
Let's save this.
Oops, I missed a comma here. Great.
Now we have all of those properties set as required and we're going to be grabbing it
through these props, but we also need to pass these items here.
First of all, we're definitely going
to need an image and we don't have the image.
You do have the image inside the resources folder so just download it.
Once you have it downloaded, just
place it inside the images and we're going to be all set.
Now we can also go back to the user post
and actually make sure that we have that set up.
I'm just going to grab this code
from the profile image and copy it because I am a lazy developer.
Let's just paste it here and call it image.
It will require assets, images,
but instead of default profile, it will be default post.
Now I'm going to copy this line and paste it in each one of these posts.
Great.
We can save this and close this array.
Now we need to make sure that we use
user post component here and it automatically
prefilled all of the props that I need to give it.
It will be item.
Our first name and then it will be item.
Last name.
Let me make this more visible for you.
I have so many things open at the same time.
It will be item.
Image here and the likes will be item.
Likes, comments will be item.
Comments, and the bookmarks will be item.
Marks. Great.
Now let's make sure that we
don't have any errors here.
This needs to close before this.
I'm going to try to save this.
Let's make sure that the brace
is closed here as well.
Great.
Now my code is formatted because of my auto formator.
Now let's go into the user post here and let's start setting up this component.
Let's start thinking what we need.
First of all, we need a view container.
Let's make sure that this is imported.
Inside here, we are going to need an image.
We're going to need a profile image.
We're going to need the first name and the last name and location and these
three dots icons given here, and they all have to be in the same line.
What are we going to need for this?
We're going to need a separate container for it,
and we're going to have to make sure that we use the User Profile Image component.
For the user profile image,
I just remembered that we haven't set that up either.
Let's make sure that we pass that here as well.
It's going to be called profile image,
crop types, any, and it's going to be required.
The dimensions, we can grab from here already.
It will be 48.
We can just give this here,
but we are going to have to make sure that we fill in the profile image as well.
Let's do that.
Let's just grab this and paste it everywhere here.
Okay.
Then what we want to do is make sure that we pass it here.
Profile image will be item.
Profile_image.
We're going to go to User Post and say that, Hey, do have the profile limit now.
Let's save this. Great.
Now we see this weird thing here that's not really a problem.
What we can do with that is just style it
and make sure that we have a flex container for that.
Let's just say that this will have flex
direction of row because that is what we're going to need.
Actually, I just noticed that we also need
the margins to the left and the right side.
Here we're going to need this style and let's call it global style.
This is user post container.
Let's just copy this, go here.
Here we're going to say that margin
horizontal has to be 24.
Let's save this and now we see
this at the correct place.
Let's go back here.
Our profile image is more or less visible okay.
Now we want to make sure that we show the
text here as well, which is presented in a column in this case.
We're also going to need a view container so that those are in a column.
Let's say that we have one text here and it is going to show props.
Firstname, and then it will show props. Lastname.
We're going to need a space in between
and we are going to need a text component here as well.
Here is our text.
Now what we want to do is make sure that this is centered.
Let's create a new style here and let's say that this is going to be centered
vertically and in columns vertical, things are handled by justified content center.
This is going to be centered right now.
We are also going to need a second text
and we're going to show this if location is present.
Because this is not something that is required.
We're going to say if props.
Location then show this.
We're going to need props.
Location here.
Let's save this.
It's not really shown here.
It already should be displayed. That's weird.
Let's go back to our data and see.
Okay, we haven't passed in the location, so it was really optional, wasn't it?
Let's save this, and now we're going to see the location.
Great. Now, what we want to do is make sure
that this has some distance from the profile picture.
Let's zoom in to our design and see that we have margin to the left, which is 10.
Let's draw that here as well.
Now there is some space here.
Perfect.
What we also want to do is place these three icons here, horizontal ellipses.
That's how they are called.
Let's make sure that we do that.
It has to be in the row.
We're going to do it right outside of this view container where the texts were.
Let's just use the Font Awesome icon and let's search for horizontal ellipsis.
See, ellipsis horizontal. Great.
I'm going to include the solid one.
I'm going to save this.
Here's our icon.
But we also need to center this right and we're in the row.
We're in the row, so we're going to needline items center here.
We're also going to need some distance
in between these items, these two items and this icon,
which means that we're going to have to use space in between.
But to have space in between these items
and these items properly, we're going to have to wrap this in a view
container as well, because otherwise what would happen is...
Let's see what would happen actually.
Just if Icontent, paste between.
Let's see what would happen.
This will put space in between each
element and we don't want that and this
will be fixed by a view container here.
Let's save this and great.
Now we're viewing everything very nicely
and we see this profile image in a very weird way.
We're also going to need a row applied here.
Let's say, X direction is row.
Great, now we're getting closer to our design.
Now, what I want to do is make sure
that we don't keep on writing the styles right here.
Let's come up with these names
and save them in our style.js file.
Let's say that this one will
be specifically for the user.
Let's call it style.userContainer.
Then let's go here.
Let's import the style.
import style from style.
Let's go here and make a new user container and it will be equal to this.
Now we want to create another style for
this and it will be style.userTextContainer
let's go here, create userTextContainer
and it will be this.
Now what we want to do is make sure that
we don't have any styles there.
We can create one here and let's call this style, user.
Let's go here and paste this here. Perfect.
Now everything's looking the same,
but our code doesn't contain a bunch of styles here that we don't need.
Now let's start styling this Allison Becker's name.
Let's go to this style and create style.username
let's go here.
Say that we're creating a new style called username.
Now let's see what it needs.
It needs a color of black.
It also needs a font family.
For this, we're going to use our
getFontFamily function, which is going to be Inter.
Then we're going to need the weight for it.
It's going to be 500.
We're going to need font size, going to be 16.
Let's save this, go here.
Now what we need is also the...
Just doesn't seem bold enough.
I'm just going to go in here.
Maybe we should apply 600 and it will look more like the design.
Now what we want to do is go here
and make sure that we have
a style for the location as well.
Let's call it location style.
Let's go to the styles and create location
and let's see what styles this needs.
Let's click here
and let's copy this color.
Color is going to be this
and the font family is going to be get
font family enter 400 weight
and then the font size will be 12.
Now let's take a look at this and it looks
pretty similar to this design,
but it does have a margin top.
Let's see this.
Margin top will be five.
Let's say margin five.
It seems to me like this is
not really to the left side.
Let's go and see if background color red
would show us that it is really not
aligned where we wanted it to be.
What if we do text align left?
It's technically should be already left-aligned.
What we could also do is just do margin
left and we can give it minus five or so,
minus four, and it will be aligned correctly now.
Let's just delete this.
Now we have the correct setup.
What we might want to do is
make sure that this icon is
of the color that we're expecting.
Let's go here, copy this color, go
to User Post and say that color is this.
Then we also might need
its size, which is 32.
Let's say that size is 32 here.
That's too much.
What about 16?
That might be too little.
Let's do 24.
Great.
This looks better.
Now, what we also want to do is make
sure that we use this image given here.
We're done with the header of this item,
and we're going to need another view
container here and we're going to use
an image here and it's going to be
with the source of props.image.
Close this and we see the image right here.
Let's make sure that this image is aligned in the center.
Let's just call it image or postImage.
Let's just go here and say that this
should be aligned in center.
Aligned item center. Great.
It also has some margin top, which is 20.
Perfect.
Then we are also going to need to set up these items given here.
We just see that actually we are going
to need a margin top
for every user container.
We need to make sure that we
have this defined here.
Let's call it user post container.
Let's go to our styles.
Let's create user post container and say
that the margin top should be 25 or 35, actually.
Okay, so great.
Now this looks way better and
it is scrollable and we see that
the stories stay up here like this.
We might want to edit that actually
and we're going to do it at the end
of this lesson, so stay tuned for that.
But for now, let's just finish
up creating the user posts.
Here we're going to need another view
container and we're going to need
view container for each of the items.
First, it's going to be likes.
We're going to need a fontawesome icon
with a heart.
Let's say that it should
be a regular icon.
This way it might not be
completely filled in.
Then we're also going
to need a number of likes.
Let's just create a text component here
and say that we're going to use props.likes
now we see this and we want this to be
in a row, so we're going
to have to style this.
Let's say this is going
to be flex direction row.
We're also going to need
some space from this.
We are going to say
that style here should be margin left
something like, what is that?
Given here, says it's around three,
but I'm doubting it will be more.
Okay, three suits it.
Then we're going to need
a color for both of these.
Let's just copy this color,
go here and make sure that we set it.
We can do so here as well.
Perfect. This looks way nicer and we're going
to need some margin bottom from the image post.
Let's just go here and make sure
that we have margin bottom.
It's going to be 20,
so it should be margin vertical.
Perfect.
Then we're also going to need some
margin to the left, so this is
aligned well with the image.
Let's say that our container will have
a style and it will have a margin
left and it will be equal to 10.
This is perfect.
Now what we want to do is do
the same thing for these items here.
Let's do that.
Let's just copy this and paste it here.
This is 27 points away.
What we're going to say is that this will be margin left 27.
We have to make sure
that this is in a row.
Let's say that flex direction is row here.
This is looking better.
Now we need FA message.
Let's try a regular one again.
Yep, it looks similar to this.
Now we need the third item here,
which is going to be a bookmark.
Let's use FA bookmark here.
Let's use the regular one as well
and make sure that this will be using
bookmarks and this will be using comment.
Let's save this.
This looks very much similar
to this, I got to say.
Now what we also need is this divider.
What we can do is apply user post
container border, bottom width of one.
Then we can say that it has some padding.
Let's say how much it needs and it
will need padding bottom 20.
Great.
Let's see the color of this
divider exactly is here.
Let's just make
sure that we mentioned that here, border,
bottom color is going to be this.
Now this looks so good, but we see that we
cannot see all of the items present here.
Let's take care of that right now.
First of all, I don't want to see the vertical scroll bar that's here.
We're going to have to go to app.js
and make sure that vertical scroll
indicator is set to false.
Now when I scroll, it's not
going to be visible anymore.
What we want to do is also when we scroll,
we don't want these user stories to just stay there.
We want it to scroll with the page.
We also want this scroll to have
as much height as it needs.
Right now we came to a very cool place,
and this cool place is where I
introduce you to list header component.
Okay, so it's this component
that determines what should be at the head of this list.
We're going to grab these items that we have here.
We're going to put it in a React fragment,
an empty container, and we're going to paste this here.
We're going to save that.
Right now you will see that this is
totally scrollable and this is presented as the header of this list.
Basically, we just used one flat list
to show all of the items here and it's
totally scrollable and it doesn't use
a scroll view because the flat list
comes with its own scrolling capability.
It's a virtualized list.
If I actually try to place this in a
scroll view, technically I should get an error which
says the virtualized list should never be nested in the scroll views.
Just don't do this because the flat list
itself will allow you to set the list
header component,
which I just made our list header
components is these two items here,
and then set the main list here.
You can also have a list
footer component if you want this to,
but we don't need to do that.
Great. Now we have our flat list set up,
but what we're not doing is the infinite scrolling behavior.
In the next video, we're going to discuss how to handle that.
Stay tuned and come back to the video. You're doing so great.
Thank you so much and I'll see you in the next one.