1 00:00:02,470 --> 00:00:09,580 Let's replace the categories dummy screen content here with a grid of categories because that's the 2 00:00:09,580 --> 00:00:13,090 idea behind this screen after all. Now 3 00:00:13,090 --> 00:00:18,140 for that, we can use a component we used before and that's the FlatList. 4 00:00:18,160 --> 00:00:20,980 Thus far, we used that for normal lists, 5 00:00:20,980 --> 00:00:25,490 you can actually also render grids with it and that's exactly what we'll do here. 6 00:00:25,730 --> 00:00:34,960 Now for that in this category screen, I'll replace everything with FlatList here and only output my flat 7 00:00:34,960 --> 00:00:35,530 list 8 00:00:35,530 --> 00:00:42,520 here in this screen which I return in the end and I will set num columns here which is a new property 9 00:00:42,520 --> 00:00:47,950 we haven't seen before to 2 and this defines how many columns we want to have. The default is 1 which is a 10 00:00:47,950 --> 00:00:53,610 normal list but you can have more than one column in there and this gives you a grid effectively. 11 00:00:53,620 --> 00:00:55,080 Now with that, we could render a grid 12 00:00:55,090 --> 00:00:57,070 but of course we need some data for that, 13 00:00:57,070 --> 00:00:59,340 otherwise it's hard to render a grid, 14 00:00:59,350 --> 00:00:59,640 right? 15 00:01:00,590 --> 00:01:06,290 For that, I'll add a new folder which I'll name data and in there, I'll add a dummy-data.js 16 00:01:06,290 --> 00:01:10,040 file because in the end, it is just some dummy data which I'm supplying here, 17 00:01:10,040 --> 00:01:16,740 we're not loading this from a server or anything like that right now, just load it like this instead. 18 00:01:16,920 --> 00:01:23,340 I want to have a bunch of categories in there and for this, I'll add yet another folder which I name models 19 00:01:23,520 --> 00:01:29,550 which is in the end a folder where I want to define how my data is shaped in this app, how it looks 20 00:01:29,550 --> 00:01:30,440 like. 21 00:01:30,450 --> 00:01:36,810 So there, we can add a category.js file for example and in this file, all I want to have is a class 22 00:01:36,840 --> 00:01:43,920 which I'll name category and classes are default Javascript features in modern Javascript which I export 23 00:01:44,040 --> 00:01:52,800 and there I will simply define how a category object in my application should look like, so that we basically 24 00:01:52,920 --> 00:01:59,110 have an easier way of creating these objects without mistyping and so on. 25 00:01:59,130 --> 00:02:05,670 So here, this category class will take a constructor and you can use this constructor which is a default 26 00:02:05,700 --> 00:02:06,610 method 27 00:02:06,630 --> 00:02:11,790 you can add to any class in Javascript to initialize an object based on this class. 28 00:02:12,000 --> 00:02:16,350 You do this by expecting some arguments here in the constructor and for a category, I want to get an 29 00:02:16,350 --> 00:02:22,200 ID for the category, a title and a color which I'll use as a background color in the grid for this 30 00:02:22,200 --> 00:02:23,880 grid item for this category 31 00:02:24,060 --> 00:02:29,460 and I will store all this data in properties with the help of the this keyword. In case this is totally 32 00:02:29,460 --> 00:02:35,670 brand new to you, definitely dive into some Javascript courses or resources first because this has nothing 33 00:02:35,670 --> 00:02:38,550 to do with React navigation or with React Native, 34 00:02:38,580 --> 00:02:42,470 this is vanilla modern Javascript. 35 00:02:42,480 --> 00:02:44,470 Now why did I create this? 36 00:02:44,490 --> 00:02:52,650 Because now I can import my category class from the models folder, from the category.js file into the 37 00:02:52,650 --> 00:02:56,460 dummy data file and then use it to create some dummy data. 38 00:02:56,460 --> 00:03:04,650 Now you find that dummy data attached, attached you find Javascript file with these dummy categories 39 00:03:04,860 --> 00:03:09,070 which I store in a constant which I then export as a named export here. 40 00:03:09,240 --> 00:03:14,200 This is some dummy category data for the categories in this app, in 41 00:03:14,520 --> 00:03:19,290 these categories I want to have in this app. These are the categories I will use in this app and these 42 00:03:19,290 --> 00:03:25,590 are the categories we can now therefore use inside of our screens, in the categories screen to be precise. 43 00:03:26,540 --> 00:03:37,110 So in there, I want to add an import and import categories from data/dummy-data, 44 00:03:37,120 --> 00:03:40,640 so that's importing that named constant we're exporting there. 45 00:03:40,660 --> 00:03:44,020 Now this is an array of Javascript objects in the end, right? 46 00:03:44,050 --> 00:03:45,610 That's what we stored in there, 47 00:03:45,640 --> 00:03:51,850 it's just an array of Javascript objects which we can now use to render our list or to be precise, our 48 00:03:51,850 --> 00:03:53,090 grid here. 49 00:03:53,170 --> 00:04:01,240 So data for this FlatList is simply my categories arrays, so I'll just point at categories 50 00:04:01,240 --> 00:04:08,510 and of course we now also need render item to define how a single grid item should be rendered, which 51 00:04:08,510 --> 00:04:15,380 component should be rendered there. For this, I'll add a new function here, render grid item which is a 52 00:04:15,380 --> 00:04:22,580 function that will receive some item data in the end here and that should return a jsx element, should 53 00:04:22,580 --> 00:04:25,460 return some React component here 54 00:04:25,460 --> 00:04:33,950 and I will point at render grid item here. Now in there, I'll render a view and to keep things simple, 55 00:04:33,950 --> 00:04:39,380 for now this will be a view with a text in there and in that text, I want to render 56 00:04:39,500 --> 00:04:40,160 itemData.item, 57 00:04:40,160 --> 00:04:42,400 that's what we have available on a FlatList 58 00:04:42,410 --> 00:04:48,250 if you remember earlier modules, the item data object here has an item property, React Native 59 00:04:48,250 --> 00:04:55,520 FlatList gives you this property and in there, we'll have a title property because an item 60 00:04:55,520 --> 00:05:01,940 we're getting here is just a category we're getting from our data we're feeding into the FlatList, so 61 00:05:01,970 --> 00:05:05,490 we'll have such a Javascript object as an item there 62 00:05:05,630 --> 00:05:12,000 and this Javascript object is based on our model here and there we set up a title, a color and an ID 63 00:05:12,040 --> 00:05:12,820 property, 64 00:05:12,980 --> 00:05:19,160 hence we have a title property, hence we can extract the title here like this, we'll use the color later. 65 00:05:20,250 --> 00:05:22,010 So that's the first thing, 66 00:05:22,080 --> 00:05:26,850 this should work. Now in new versions of React Native, 67 00:05:26,850 --> 00:05:35,340 you also don't need to inform React Native that your ID is not named key but is actually named ID 68 00:05:35,400 --> 00:05:42,270 because newer versions of React Native accept ID as an ID on list data as well. 69 00:05:42,270 --> 00:05:48,300 If you would follow along in a older version, you would need to add a key extractor here which is a function 70 00:05:48,630 --> 00:05:54,660 that gets the item and the index and needs to return the value that should be used as a key, 71 00:05:54,720 --> 00:05:56,980 so in this case that would be item.id, 72 00:05:57,030 --> 00:06:03,030 again newer versions of React Native don't need this but just for reference and for older versions, I'll 73 00:06:03,030 --> 00:06:05,150 still add this here. 74 00:06:05,160 --> 00:06:08,610 So now we return our FlatList here with our data. 75 00:06:08,610 --> 00:06:11,930 If we now save this, we should already see our data here, 76 00:06:11,940 --> 00:06:15,320 of course not really that beautiful but a grid, 77 00:06:15,330 --> 00:06:16,960 we have Italian, next to it 78 00:06:17,040 --> 00:06:20,000 quick and easy hamburgers, next to it German, 79 00:06:20,130 --> 00:06:23,690 it just doesn't look like a grid but it technically is. 80 00:06:24,030 --> 00:06:32,250 Now to make it look a bit more like a grid, we of course need to add more styling. Now to change that styling 81 00:06:32,250 --> 00:06:33,080 a little bit, 82 00:06:33,090 --> 00:06:40,830 we can go to our grid items here, to single grid item and add the style prop here and add the grid item 83 00:06:40,830 --> 00:06:42,620 style or whatever you want to name it 84 00:06:43,430 --> 00:06:50,700 and then down there, I'll add grid item to my stylesheet and give this property of flex, we want to take 85 00:06:50,700 --> 00:06:52,250 as much space as it can get, 86 00:06:53,390 --> 00:06:57,530 save this, now this looks already a bit more like a grid. 87 00:06:57,530 --> 00:07:00,640 Now some margin around each item would also be nice, so for that 88 00:07:00,650 --> 00:07:08,450 we can just add margin and maybe add 15 as a margin around each item, so that we have more spacing in 89 00:07:08,450 --> 00:07:10,070 all directions 90 00:07:10,070 --> 00:07:12,500 and with that, it's not too bad, 91 00:07:12,500 --> 00:07:18,080 of course we can now also change the general look and for example give each item a height of let's say 92 00:07:18,080 --> 00:07:24,230 150 and it's totally up to you which values you choose there but I'd say with that, 93 00:07:24,230 --> 00:07:25,610 it's a quite nice 94 00:07:25,610 --> 00:07:26,400 grid, 95 00:07:26,450 --> 00:07:31,310 certainly doesn't win a style award yet but we're going in the right direction. 96 00:07:32,920 --> 00:07:38,830 Now before we finish the styling of this and we definitely have some work left to do for that, let's 97 00:07:38,830 --> 00:07:44,950 make sure that we can tap these items and we then go to the detail screen for that specific item again, 98 00:07:45,090 --> 00:07:50,770 let's therefore also see how we can actually set a title in the header so that we have a better 99 00:07:50,770 --> 00:07:52,780 idea of where we're currently at.