Let's replace the categories dummy screen content here with a grid of categories because that's the
idea behind this screen after all. Now
for that, we can use a component we used before and that's the FlatList.
Thus far, we used that for normal lists,
you can actually also render grids with it and that's exactly what we'll do here.
Now for that in this category screen, I'll replace everything with FlatList here and only output my flat
list
here in this screen which I return in the end and I will set num columns here which is a new property
we haven't seen before to 2 and this defines how many columns we want to have. The default is 1 which is a
normal list but you can have more than one column in there and this gives you a grid effectively.
Now with that, we could render a grid
but of course we need some data for that,
otherwise it's hard to render a grid,
right?
For that, I'll add a new folder which I'll name data and in there, I'll add a dummy-data.js
file because in the end, it is just some dummy data which I'm supplying here,
we're not loading this from a server or anything like that right now, just load it like this instead.
I want to have a bunch of categories in there and for this, I'll add yet another folder which I name models
which is in the end a folder where I want to define how my data is shaped in this app, how it looks
like.
So there, we can add a category.js file for example and in this file, all I want to have is a class
which I'll name category and classes are default Javascript features in modern Javascript which I export
and there I will simply define how a category object in my application should look like, so that we basically
have an easier way of creating these objects without mistyping and so on.
So here, this category class will take a constructor and you can use this constructor which is a default
method
you can add to any class in Javascript to initialize an object based on this class.
You do this by expecting some arguments here in the constructor and for a category, I want to get an
ID for the category, a title and a color which I'll use as a background color in the grid for this
grid item for this category
and I will store all this data in properties with the help of the this keyword. In case this is totally
brand new to you, definitely dive into some Javascript courses or resources first because this has nothing
to do with React navigation or with React Native,
this is vanilla modern Javascript.
Now why did I create this?
Because now I can import my category class from the models folder, from the category.js file into the
dummy data file and then use it to create some dummy data.
Now you find that dummy data attached, attached you find Javascript file with these dummy categories
which I store in a constant which I then export as a named export here.
This is some dummy category data for the categories in this app, in
these categories I want to have in this app. These are the categories I will use in this app and these
are the categories we can now therefore use inside of our screens, in the categories screen to be precise.
So in there, I want to add an import and import categories from data/dummy-data,
so that's importing that named constant we're exporting there.
Now this is an array of Javascript objects in the end, right?
That's what we stored in there,
it's just an array of Javascript objects which we can now use to render our list or to be precise, our
grid here.
So data for this FlatList is simply my categories arrays, so I'll just point at categories
and of course we now also need render item to define how a single grid item should be rendered, which
component should be rendered there. For this, I'll add a new function here, render grid item which is a
function that will receive some item data in the end here and that should return a jsx element, should
return some React component here
and I will point at render grid item here. Now in there, I'll render a view and to keep things simple,
for now this will be a view with a text in there and in that text, I want to render
itemData.item,
that's what we have available on a FlatList
if you remember earlier modules, the item data object here has an item property, React Native
FlatList gives you this property and in there, we'll have a title property because an item
we're getting here is just a category we're getting from our data we're feeding into the FlatList, so
we'll have such a Javascript object as an item there
and this Javascript object is based on our model here and there we set up a title, a color and an ID
property,
hence we have a title property, hence we can extract the title here like this, we'll use the color later.
So that's the first thing,
this should work. Now in new versions of React Native,
you also don't need to inform React Native that your ID is not named key but is actually named ID
because newer versions of React Native accept ID as an ID on list data as well.
If you would follow along in a older version, you would need to add a key extractor here which is a function
that gets the item and the index and needs to return the value that should be used as a key,
so in this case that would be item.id,
again newer versions of React Native don't need this but just for reference and for older versions, I'll
still add this here.
So now we return our FlatList here with our data.
If we now save this, we should already see our data here,
of course not really that beautiful but a grid,
we have Italian, next to it
quick and easy hamburgers, next to it German,
it just doesn't look like a grid but it technically is.
Now to make it look a bit more like a grid, we of course need to add more styling. Now to change that styling
a little bit,
we can go to our grid items here, to single grid item and add the style prop here and add the grid item
style or whatever you want to name it
and then down there, I'll add grid item to my stylesheet and give this property of flex, we want to take
as much space as it can get,
save this, now this looks already a bit more like a grid.
Now some margin around each item would also be nice, so for that
we can just add margin and maybe add 15 as a margin around each item, so that we have more spacing in
all directions
and with that, it's not too bad,
of course we can now also change the general look and for example give each item a height of let's say
150 and it's totally up to you which values you choose there but I'd say with that,
it's a quite nice
grid,
certainly doesn't win a style award yet but we're going in the right direction.
Now before we finish the styling of this and we definitely have some work left to do for that, let's
make sure that we can tap these items and we then go to the detail screen for that specific item again,
let's therefore also see how we can actually set a title in the header so that we have a better
idea of where we're currently at.