Hi and welcome back to this video.
Today we're going to be building the flat
list for our categories and we're going to be displaying it on our home page.
So right now we have nothing displayed
here even though we do have the categories in our reducer.
So let's get to work.
So the first thing that we're going to need to do is create a view container
for our categories and I'm going text styles it it with the style categories.
Now I'm going to create the style here
and let's see what styling we need exactly.
So as I know we have a margin of 24
on the left side here and this is actually taking up the full rest of the width.
So all we need to do here is say margin left horizontal scale 24.
Now we still see nothing on our simulator because we haven't created a flat list.
So let's place it inside our view.
So let's create the flat list and import
it from react native and it's requesting some data from me.
So I'm going to use this categories here and I'm going to say that we need
categories.categories because that is what we defined inside our reducer.
So this is called Categories reducer
but in the state inside we also have the categories variable so we need
to access that and then for rendering the items, what we're going to do is we're
going to take in each item and we're going to render the items according to that.
What we're going to need for each
of the items is a view container and this view container will have a style
and we're going to call that style category item.
And we need this style because
we have a margin on the right side of each category and it is ten.
So we're going to have to define that on our view container.
So let's create the category items styling
here and let's say that we have a margin right of horizontal scale ten
and then what we need is this list to be laid out horizontally and not vertically
which is the default value of the flat list.
So let's say horizontal true and then we don't need a horizontal
scroll indicator showing there so let's set it to false.
Now since we have bunch of items in our categories, what we don't want to happen
is our editor asking us to have a unique key for each one of them.
So let's say that we're going to take
the category ID defined for each item and that's what is going to be its own key.
And inside this we're going to use the tabs that we created.
It would have been better if I just called
it categories, but no, I already called this tab so I'm just
going to use it like that and I'm going to import it and it has some required props.
First required prop is the name so I'm
going to use item name here and they're all visible and they're all
selected and we don't really want that to happen.
So we have an is inactive state here and we're going to say that if the items
category ID that we're displaying is not equal to the selected category.
So categories selected category ID that we have defined in our reducer,
then it has to be inactive and then we see it being inactive.
But we do want to be able to press and activate, right?
So we got to take care of that.
Let's go to our tab component and explore how we can do that.
And we see that we have an onpress event
but we never use the category ID here, which is bad because what we want to do is
on press, we want to dispatch an event and that event is going to be updating
selected category ID and we're going to have to pass it.
The category ID that we want to make
the update to, we made this function inside our reducers it's right here so it
is expecting some kind of data to be passed to it.
But right now we don't handle that onpress.
So let's say that onpress we're going
to get some value and we're going to use that value to update our category.
So if I press here, nothing really happens.
And for that we're going to have to define one more prop here.
Let's call it category ID or rather than tab ID just because we called this a tab
component, let's say that this is required and it is going to be a number.
So if it's not passed, our simulator is going to be yelling at us
telling that it is required but its value is undefined.
So we're never going to miss doing this.
And then on press we're going to say pass
as a value to the function that we're calling props tabid.
Let's save this go here and we should be all good as long as we
pass a tab ID which is going to be item category ID.
And now we press here, nothing's really going to be happening
because this onpress event is not actually firing.
And the reason it's not firing is because we have disabled the prop according
to is negative state which we don't want to do actually, let's delete it.
And now if we press here we should be able
to see that these ones actually do activate which is exactly what we wanted.
And now to make this design much more
similar to our design here, what we do need is the selected category title here.
So let's do that.
I think that selected category is type two.
So let's create a header on our donation apps home screen.
I'm going to do it here and I'm going
to put it in a view container and I'm going to say that it is going
to be a header with a title of select category and that the type is going to be
two and let's see how this works out for us.
Yes, it's right here and we do need some
margin horizontal and margin bottom for this as well.
So let's set up style, category header style.
Let's go here.
Let's say that we need margin horizontal,
horizontal scale 24 and that we do need a margin
bottom for it as well and it's going to be vertical state of I'm just going to put
in ten but I am going to see what its real value is and the real value is 16.
So let's use that.
Let's use that here.
Let's open up our simulator.
And this is looking pretty good except
for the fact that I think above we also
need so we need 20 above and 16 below.
And let's see our
highlighted image container and this has some margin horizontal
and then highlighted image is contained in the height that we gave it.
So actually if we give this some background color
we're going to see that this margin bottom is coming from this image given here.
What we would need to do is
apply a little bit of margin top to the select category header.
So let's say margin top is just vertical scale six and this seems to me is equal.
And what we're going to do in the next video is we're going to set up
a pagination so that not all the categories are visible right away
and they're just visible as the user is scrolling.
Because I think this would be a good experience for you guys just in case you
are communicating later with the APIs that would give such data in a paginated way.
So we're going to pretend that this should be paginated as well and we're going
to set up the infinite scroll pagination for our flatlist.
Thank you so much for watching and I'll see you in the next video.