WEBVTT 1 00:00:00.320 --> 00:00:02.420 Hi and welcome back to this video. 2 00:00:02.450 --> 00:00:04.610 Today we're going to be building the flat 3 00:00:04.640 --> 00:00:09.860 list for our categories and we're going to be displaying it on our home page. 4 00:00:09.890 --> 00:00:12.010 So right now we have nothing displayed 5 00:00:12.040 --> 00:00:16.180 here even though we do have the categories in our reducer. 6 00:00:16.210 --> 00:00:18.500 So let's get to work. 7 00:00:18.520 --> 00:00:22.060 So the first thing that we're going to need to do is create a view container 8 00:00:22.080 --> 00:00:28.300 for our categories and I'm going text styles it it with the style categories. 9 00:00:28.330 --> 00:00:31.580 Now I'm going to create the style here 10 00:00:31.600 --> 00:00:34.100 and let's see what styling we need exactly. 11 00:00:34.130 --> 00:00:38.860 So as I know we have a margin of 24 12 00:00:38.890 --> 00:00:45.060 on the left side here and this is actually taking up the full rest of the width. 13 00:00:45.090 --> 00:00:52.420 So all we need to do here is say margin left horizontal scale 24. 14 00:00:52.450 --> 00:00:58.100 Now we still see nothing on our simulator because we haven't created a flat list. 15 00:00:58.130 --> 00:01:01.620 So let's place it inside our view. 16 00:01:01.650 --> 00:01:04.820 So let's create the flat list and import 17 00:01:04.850 --> 00:01:08.620 it from react native and it's requesting some data from me. 18 00:01:08.650 --> 00:01:12.540 So I'm going to use this categories here and I'm going to say that we need 19 00:01:12.570 --> 00:01:21.340 categories.categories because that is what we defined inside our reducer. 20 00:01:21.370 --> 00:01:24.140 So this is called Categories reducer 21 00:01:24.170 --> 00:01:28.760 but in the state inside we also have the categories variable so we need 22 00:01:28.790 --> 00:01:33.620 to access that and then for rendering the items, what we're going to do is we're 23 00:01:33.650 --> 00:01:40.740 going to take in each item and we're going to render the items according to that. 24 00:01:40.760 --> 00:01:42.380 What we're going to need for each 25 00:01:42.410 --> 00:01:48.900 of the items is a view container and this view container will have a style 26 00:01:48.930 --> 00:01:53.290 and we're going to call that style category item. 27 00:01:53.320 --> 00:01:57.100 And we need this style because 28 00:01:57.130 --> 00:02:04.620 we have a margin on the right side of each category and it is ten. 29 00:02:04.650 --> 00:02:09.140 So we're going to have to define that on our view container. 30 00:02:09.170 --> 00:02:12.450 So let's create the category items styling 31 00:02:12.480 --> 00:02:19.940 here and let's say that we have a margin right of horizontal scale ten 32 00:02:19.970 --> 00:02:26.580 and then what we need is this list to be laid out horizontally and not vertically 33 00:02:26.610 --> 00:02:29.450 which is the default value of the flat list. 34 00:02:29.480 --> 00:02:35.580 So let's say horizontal true and then we don't need a horizontal 35 00:02:35.610 --> 00:02:40.170 scroll indicator showing there so let's set it to false. 36 00:02:40.200 --> 00:02:45.860 Now since we have bunch of items in our categories, what we don't want to happen 37 00:02:45.890 --> 00:02:50.460 is our editor asking us to have a unique key for each one of them. 38 00:02:50.490 --> 00:02:52.540 So let's say that we're going to take 39 00:02:52.570 --> 00:02:59.180 the category ID defined for each item and that's what is going to be its own key. 40 00:02:59.210 --> 00:03:03.820 And inside this we're going to use the tabs that we created. 41 00:03:03.840 --> 00:03:05.860 It would have been better if I just called 42 00:03:05.890 --> 00:03:10.760 it categories, but no, I already called this tab so I'm just 43 00:03:10.790 --> 00:03:16.500 going to use it like that and I'm going to import it and it has some required props. 44 00:03:16.530 --> 00:03:21.120 First required prop is the name so I'm 45 00:03:21.150 --> 00:03:26.660 going to use item name here and they're all visible and they're all 46 00:03:26.690 --> 00:03:30.140 selected and we don't really want that to happen. 47 00:03:30.170 --> 00:03:36.900 So we have an is inactive state here and we're going to say that if the items 48 00:03:36.930 --> 00:03:42.420 category ID that we're displaying is not equal to the selected category. 49 00:03:42.450 --> 00:03:50.220 So categories selected category ID that we have defined in our reducer, 50 00:03:50.250 --> 00:03:55.500 then it has to be inactive and then we see it being inactive. 51 00:03:55.530 --> 00:04:00.100 But we do want to be able to press and activate, right? 52 00:04:00.130 --> 00:04:02.820 So we got to take care of that. 53 00:04:02.850 --> 00:04:07.900 Let's go to our tab component and explore how we can do that. 54 00:04:07.930 --> 00:04:10.300 And we see that we have an onpress event 55 00:04:10.330 --> 00:04:17.700 but we never use the category ID here, which is bad because what we want to do is 56 00:04:17.720 --> 00:04:26.380 on press, we want to dispatch an event and that event is going to be updating 57 00:04:26.410 --> 00:04:30.380 selected category ID and we're going to have to pass it. 58 00:04:30.410 --> 00:04:34.140 The category ID that we want to make 59 00:04:34.160 --> 00:04:40.860 the update to, we made this function inside our reducers it's right here so it 60 00:04:40.890 --> 00:04:44.420 is expecting some kind of data to be passed to it. 61 00:04:44.450 --> 00:04:47.820 But right now we don't handle that onpress. 62 00:04:47.840 --> 00:04:49.680 So let's say that onpress we're going 63 00:04:49.710 --> 00:04:55.260 to get some value and we're going to use that value to update our category. 64 00:04:55.280 --> 00:04:59.060 So if I press here, nothing really happens. 65 00:04:59.090 --> 00:05:03.540 And for that we're going to have to define one more prop here. 66 00:05:03.570 --> 00:05:10.700 Let's call it category ID or rather than tab ID just because we called this a tab 67 00:05:10.720 --> 00:05:15.740 component, let's say that this is required and it is going to be a number. 68 00:05:15.770 --> 00:05:21.460 So if it's not passed, our simulator is going to be yelling at us 69 00:05:21.480 --> 00:05:25.820 telling that it is required but its value is undefined. 70 00:05:25.840 --> 00:05:28.220 So we're never going to miss doing this. 71 00:05:28.250 --> 00:05:31.460 And then on press we're going to say pass 72 00:05:31.480 --> 00:05:37.460 as a value to the function that we're calling props tabid. 73 00:05:37.480 --> 00:05:43.380 Let's save this go here and we should be all good as long as we 74 00:05:43.410 --> 00:05:49.300 pass a tab ID which is going to be item category ID. 75 00:05:49.330 --> 00:05:52.820 And now we press here, nothing's really going to be happening 76 00:05:52.850 --> 00:05:58.180 because this onpress event is not actually firing. 77 00:05:58.210 --> 00:06:04.300 And the reason it's not firing is because we have disabled the prop according 78 00:06:04.330 --> 00:06:10.540 to is negative state which we don't want to do actually, let's delete it. 79 00:06:10.570 --> 00:06:14.220 And now if we press here we should be able 80 00:06:14.250 --> 00:06:20.780 to see that these ones actually do activate which is exactly what we wanted. 81 00:06:20.800 --> 00:06:24.100 And now to make this design much more 82 00:06:24.130 --> 00:06:32.220 similar to our design here, what we do need is the selected category title here. 83 00:06:32.250 --> 00:06:33.940 So let's do that. 84 00:06:33.970 --> 00:06:38.660 I think that selected category is type two. 85 00:06:38.690 --> 00:06:44.320 So let's create a header on our donation apps home screen. 86 00:06:44.600 --> 00:06:47.540 I'm going to do it here and I'm going 87 00:06:47.570 --> 00:06:53.900 to put it in a view container and I'm going to say that it is going 88 00:06:53.920 --> 00:07:03.660 to be a header with a title of select category and that the type is going to be 89 00:07:03.690 --> 00:07:09.740 two and let's see how this works out for us. 90 00:07:09.770 --> 00:07:13.780 Yes, it's right here and we do need some 91 00:07:13.800 --> 00:07:18.580 margin horizontal and margin bottom for this as well. 92 00:07:18.600 --> 00:07:26.540 So let's set up style, category header style. 93 00:07:26.570 --> 00:07:28.260 Let's go here. 94 00:07:28.290 --> 00:07:34.260 Let's say that we need margin horizontal, 95 00:07:34.290 --> 00:07:41.460 horizontal scale 24 and that we do need a margin 96 00:07:41.480 --> 00:07:47.360 bottom for it as well and it's going to be vertical state of I'm just going to put 97 00:07:47.390 --> 00:07:56.060 in ten but I am going to see what its real value is and the real value is 16. 98 00:07:56.090 --> 00:07:58.940 So let's use that. 99 00:07:58.970 --> 00:08:01.820 Let's use that here. 100 00:08:01.850 --> 00:08:04.100 Let's open up our simulator. 101 00:08:04.130 --> 00:08:06.580 And this is looking pretty good except 102 00:08:06.600 --> 00:08:10.700 for the fact that I think above we also 103 00:08:10.730 --> 00:08:18.180 need so we need 20 above and 16 below. 104 00:08:18.210 --> 00:08:21.220 And let's see our 105 00:08:21.250 --> 00:08:28.180 highlighted image container and this has some margin horizontal 106 00:08:28.210 --> 00:08:33.420 and then highlighted image is contained in the height that we gave it. 107 00:08:33.440 --> 00:08:36.460 So actually if we give this some background color 108 00:08:36.490 --> 00:08:43.740 we're going to see that this margin bottom is coming from this image given here. 109 00:08:43.770 --> 00:08:46.780 What we would need to do is 110 00:08:46.810 --> 00:08:54.500 apply a little bit of margin top to the select category header. 111 00:08:54.530 --> 00:09:04.900 So let's say margin top is just vertical scale six and this seems to me is equal. 112 00:09:04.920 --> 00:09:08.200 And what we're going to do in the next video is we're going to set up 113 00:09:08.230 --> 00:09:12.660 a pagination so that not all the categories are visible right away 114 00:09:12.690 --> 00:09:15.780 and they're just visible as the user is scrolling. 115 00:09:15.810 --> 00:09:20.500 Because I think this would be a good experience for you guys just in case you 116 00:09:20.530 --> 00:09:27.740 are communicating later with the APIs that would give such data in a paginated way. 117 00:09:27.770 --> 00:09:32.400 So we're going to pretend that this should be paginated as well and we're going 118 00:09:32.430 --> 00:09:36.860 to set up the infinite scroll pagination for our flatlist. 119 00:09:36.880 --> 00:09:39.880 Thank you so much for watching and I'll see you in the next video.