WEBVTT 1 00:00:00.400 --> 00:00:01.900 Hi and welcome back. 2 00:00:01.920 --> 00:00:04.020 I'm so excited to say that this is 3 00:00:04.050 --> 00:00:08.300 the last video in our series on using Redux and Reducers in React native. 4 00:00:08.330 --> 00:00:11.010 You've all done an amazing job learning 5 00:00:11.040 --> 00:00:14.700 how to use these powerful tools to manage state in your applications. 6 00:00:14.720 --> 00:00:16.340 And by now you should have a solid 7 00:00:16.370 --> 00:00:20.980 understanding of how to use Redux to store and manipulate data and how to use 8 00:00:21.010 --> 00:00:24.140 Reducers to update that data in response to actions. 9 00:00:24.170 --> 00:00:27.820 But this is not the end of our journey, it's just the beginning. 10 00:00:27.840 --> 00:00:29.260 And with the skills that you have 11 00:00:29.290 --> 00:00:33.700 acquired, you'll be able to build even more complex and sophisticated 12 00:00:33.730 --> 00:00:37.780 applications that are fast and efficient and easy to maintain. 13 00:00:37.810 --> 00:00:42.100 So let's take a moment to celebrate your hard work and dedication. 14 00:00:42.130 --> 00:00:46.100 You should be incredibly proud of yourselves for making it this far. 15 00:00:46.120 --> 00:00:49.740 And whether you're just starting out or you have been working with React native 16 00:00:49.770 --> 00:00:53.940 for a while, you made great strides in your development journey. 17 00:00:53.970 --> 00:00:55.820 And today we're just going to be 18 00:00:55.850 --> 00:01:00.780 concentrating on building this screen for our donation items. 19 00:01:00.810 --> 00:01:02.940 And this is going to be the last screen 20 00:01:02.970 --> 00:01:05.410 that we're going to be building for this module. 21 00:01:05.440 --> 00:01:07.340 So let's get started. 22 00:01:07.370 --> 00:01:09.490 First of all, what I want to talk about is 23 00:01:09.520 --> 00:01:13.980 the fact that we're going to be needing the information about the badge here. 24 00:01:14.010 --> 00:01:21.490 And right now what we could do is either select the categories from our single 25 00:01:21.520 --> 00:01:26.210 donation item screen to get the name of the category that we selected. 26 00:01:26.240 --> 00:01:31.980 But the problem is going to be that each item is connected to multiple categories 27 00:01:32.010 --> 00:01:36.360 and I think it's going to be very interesting to explore one 28 00:01:36.390 --> 00:01:41.700 of the information that is useful to us because we have navigation. 29 00:01:41.730 --> 00:01:45.460 So each screen comes with a parameter 30 00:01:45.490 --> 00:01:52.700 called route and through the routes you can pass params whenever you're navigating. 31 00:01:52.730 --> 00:01:57.620 So what I want to do is whenever a user selects something here, 32 00:01:57.650 --> 00:02:03.820 I want to grab the category that they have used here to select that item. 33 00:02:03.850 --> 00:02:06.700 So if they're navigated from environment, 34 00:02:06.730 --> 00:02:10.220 then we're going to show them the environment badge. 35 00:02:10.250 --> 00:02:14.730 If they were navigated from education then that's what we're going to use. 36 00:02:14.760 --> 00:02:17.700 We could show multiple categories as well. 37 00:02:17.730 --> 00:02:20.120 But what I want to explore with you is how 38 00:02:20.150 --> 00:02:23.820 to use the params functionality from the root. 39 00:02:23.850 --> 00:02:30.610 Otherwise you can feel free to just use the store and grab the information about 40 00:02:30.640 --> 00:02:34.610 each category and that is not going to be hard for you. 41 00:02:34.640 --> 00:02:37.170 So I'm going to just explore something new 42 00:02:37.200 --> 00:02:40.450 with you and show you how to pass the params. 43 00:02:40.480 --> 00:02:43.450 So first of all, you can pass the params very easily here. 44 00:02:43.480 --> 00:02:45.780 You can pass any kind of param. 45 00:02:45.810 --> 00:02:49.860 For example, I can just pass name Nata for example. 46 00:02:49.890 --> 00:02:52.380 And if I save this and I go to single 47 00:02:52.410 --> 00:02:59.260 donation item to console log routes value and open my terminal, 48 00:02:59.290 --> 00:03:01.389 if I go to this item here, 49 00:03:01.589 --> 00:03:04.780 you're going to see all of the information 50 00:03:04.810 --> 00:03:06.791 that is passed through with root 51 00:03:06.991 --> 00:03:09.020 and you're going to see that we have 52 00:03:09.050 --> 00:03:10.909 params attribute here 53 00:03:11.109 --> 00:03:13.300 and name is passed as Nata. 54 00:03:13.330 --> 00:03:16.300 So what we could do is use the params 55 00:03:16.330 --> 00:03:18.215 to pass information about 56 00:03:18.415 --> 00:03:20.100 the category information. 57 00:03:20.130 --> 00:03:23.448 For that I'm going to change the structure 58 00:03:23.648 --> 00:03:25.660 of the donation items a bit. 59 00:03:25.690 --> 00:03:28.418 Right now we use the mapping function 60 00:03:28.618 --> 00:03:31.220 to directly return the component but I 61 00:03:31.250 --> 00:03:34.406 want to reuse the code that we have here 62 00:03:34.606 --> 00:03:37.720 about the categories and what I don't want 63 00:03:37.750 --> 00:03:40.333 to do is just copy this and just paste it 64 00:03:40.533 --> 00:03:42.980 here because that's going to be duplicated 65 00:03:43.010 --> 00:03:44.623 code and I don't want to teach 66 00:03:44.823 --> 00:03:45.860 you the best practices. 67 00:03:45.890 --> 00:03:48.655 So instead of this, we're just going to 68 00:03:48.855 --> 00:03:51.420 make this into a regular function body. 69 00:03:51.450 --> 00:03:53.100 And we're going to say that we're 70 00:03:53.130 --> 00:03:55.993 returning this component and above that, 71 00:03:56.193 --> 00:03:59.000 we're going to define a variable and we're 72 00:03:59.030 --> 00:04:01.342 going to call that variable 73 00:04:01.542 --> 00:04:03.140 category information. 74 00:04:03.170 --> 00:04:05.819 And then we can just copy this, 75 00:04:06.019 --> 00:04:08.980 paste it here, get rid of the name so 76 00:04:09.010 --> 00:04:10.487 that we have the information 77 00:04:10.687 --> 00:04:11.700 about the whole object. 78 00:04:11.730 --> 00:04:13.220 And then we can use this 79 00:04:13.250 --> 00:04:17.275 categoryinformation name to display 80 00:04:17.475 --> 00:04:21.300 the badges for the categories here. 81 00:04:21.330 --> 00:04:23.585 And then what I do want to do is just 82 00:04:23.785 --> 00:04:25.900 change the filtering here and just say 83 00:04:25.920 --> 00:04:28.541 find because that's just more concise 84 00:04:28.741 --> 00:04:31.020 and we won't have to grab the first 85 00:04:31.040 --> 00:04:33.135 element and it's going to work 86 00:04:33.335 --> 00:04:35.020 the same way it did before. 87 00:04:35.040 --> 00:04:36.971 So we're going to see all 88 00:04:37.171 --> 00:04:40.060 of the categories here as we were seeing 89 00:04:40.090 --> 00:04:42.794 it before and we can then just use 90 00:04:42.994 --> 00:04:45.260 this category information here. 91 00:04:45.280 --> 00:04:48.060 And in JavaScript you could just say 92 00:04:48.090 --> 00:04:50.796 category information and that would create 93 00:04:50.996 --> 00:04:53.180 a parameter with the name of category 94 00:04:53.210 --> 00:04:55.975 information and it would give it the value 95 00:04:56.175 --> 00:04:58.740 of the category information variable here. 96 00:04:58.770 --> 00:05:04.048 So if we come here and console log route params 97 00:05:04.248 --> 00:05:07.355 and we go to this page here, 98 00:05:07.555 --> 00:05:11.460 we are going to see that our category 99 00:05:11.480 --> 00:05:12.815 information has been passed 100 00:05:13.015 --> 00:05:14.100 and its name is Highlight. 101 00:05:14.130 --> 00:05:15.468 So we're going to be 102 00:05:15.668 --> 00:05:17.140 using this for our badge. 103 00:05:17.160 --> 00:05:21.980 Now let's just go to our 104 00:05:22.010 --> 00:05:23.950 design and see what we need and we're 105 00:05:24.150 --> 00:05:26.100 going to see that the first thing that we 106 00:05:26.130 --> 00:05:29.766 need is an image that will have a margin 107 00:05:29.966 --> 00:05:33.220 top of 12 and margin bottom of 24. 108 00:05:33.250 --> 00:05:35.340 So let's just create an image. 109 00:05:35.360 --> 00:05:38.340 Let's import the image from react native 110 00:05:38.360 --> 00:05:42.840 and here we're going to use the donationiteminformation.image to get 111 00:05:42.860 --> 00:05:45.378 the Uri and we are going to have text 112 00:05:45.578 --> 00:05:48.100 style it because otherwise this image is 113 00:05:48.130 --> 00:05:49.930 not going to show up 114 00:05:50.130 --> 00:05:52.180 on our screen as you see. 115 00:05:52.210 --> 00:05:54.773 So let's go to styling and let's say 116 00:05:54.973 --> 00:05:57.620 that we want an image and that it should 117 00:05:57.650 --> 00:06:02.700 have margin top of vertical scale 12 118 00:06:02.730 --> 00:06:08.060 margin bottom of vertical scale 24. 119 00:06:08.090 --> 00:06:10.800 And then let's say that its width is going 120 00:06:10.830 --> 00:06:12.972 to be 100% and it is going 121 00:06:13.172 --> 00:06:14.620 to have some height. 122 00:06:14.650 --> 00:06:16.298 And let's check out on our 123 00:06:16.498 --> 00:06:17.820 design how much that is. 124 00:06:17.850 --> 00:06:23.820 It's 240, so let's say height vertical scale 240 125 00:06:23.850 --> 00:06:28.620 and then we are going to need some border radius. 126 00:06:28.650 --> 00:06:30.660 So let's see how much that is. 127 00:06:30.690 --> 00:06:33.900 That is 5 pixels as given here. 128 00:06:33.920 --> 00:06:36.100 So we're going to use that information 129 00:06:36.130 --> 00:06:40.380 and say that border radius is horizontal scale five. 130 00:06:40.410 --> 00:06:42.500 And now this image is going to have 131 00:06:42.530 --> 00:06:47.380 borders and since we already have all the information that we needed about 132 00:06:47.410 --> 00:06:52.860 the badge, let's say that we have a constant here called category 133 00:06:52.890 --> 00:07:00.940 information and we're going to use route params for that and category information. 134 00:07:00.970 --> 00:07:03.260 And then what we're going to do is set up 135 00:07:03.290 --> 00:07:11.420 a badge here and its title is going to be categoryinformation name. 136 00:07:11.450 --> 00:07:17.420 And now the highlight is showing up here and we're going to put this into a view 137 00:07:17.450 --> 00:07:20.099 container because the badge will 138 00:07:20.299 --> 00:07:22.500 also need some margin bottom. 139 00:07:22.530 --> 00:07:25.860 So let's use the view container 140 00:07:25.890 --> 00:07:29.293 from the React native library and let's 141 00:07:29.493 --> 00:07:32.260 set up a style for this called badge 142 00:07:32.290 --> 00:07:35.471 and let's create it here and let's see 143 00:07:35.671 --> 00:07:40.260 how much margin bottom this badge needs exactly. 144 00:07:40.290 --> 00:07:42.820 So that is 16. 145 00:07:42.850 --> 00:07:46.710 So let's say margin bottom, vertical scale 16. 146 00:07:46.910 --> 00:07:48.640 And then we see that we 147 00:07:48.670 --> 00:07:53.380 have a header component that we designed of type one given here. 148 00:07:53.410 --> 00:07:56.380 So we're just going to do header 149 00:07:56.400 --> 00:07:59.740 and we're going to import it from our components and we're going to say 150 00:07:59.770 --> 00:08:07.820 that type is of type one and the title is going to be donationitemformation name. 151 00:08:07.850 --> 00:08:09.740 And if we save this here we go, 152 00:08:09.770 --> 00:08:16.180 our selected items title is here and then we need some descriptive text. 153 00:08:16.210 --> 00:08:20.580 Okay, so we're going to need the text component from React native 154 00:08:20.600 --> 00:08:27.680 and we're going to give it some styling and we're going to call it description. 155 00:08:28.360 --> 00:08:34.260 And here we're going to put information on the donation item 156 00:08:34.290 --> 00:08:37.580 information description. Here we go. 157 00:08:37.600 --> 00:08:39.420 And then we're going to need some kind 158 00:08:39.440 --> 00:08:46.160 of margin top and a little bit of margin horizontal as well. 159 00:08:46.160 --> 00:08:50.100 But it's not really given here so I'm going to come up with something on my own. 160 00:08:50.130 --> 00:08:58.420 So let's go to this description in our styles and let's say that needs margin top 161 00:08:58.440 --> 00:09:03.460 of vertical scale seven as given and margin horizontal. 162 00:09:03.490 --> 00:09:09.420 Let's say that it is seven as well and let's save this. 163 00:09:09.440 --> 00:09:09.980 Great. 164 00:09:10.010 --> 00:09:15.220 Our text is displayed in a similar manner as it is here but we do need to follow 165 00:09:15.250 --> 00:09:20.020 the font stylings given here so let's just get to that. 166 00:09:20.050 --> 00:09:24.140 Let's say font family is inter 167 00:09:24.170 --> 00:09:27.360 and that font weight is 168 00:09:28.320 --> 00:09:36.620 600 and line height is scale font size 29. Whoops. 169 00:09:36.650 --> 00:09:40.620 Actually I'm looking at the wrong thing so we need to grab it from here. 170 00:09:40.650 --> 00:09:42.860 So it is inter with font weight 171 00:09:42.890 --> 00:09:53.000 of 400 and font size of 14. 172 00:09:53.880 --> 00:09:54.380 Great. 173 00:09:54.410 --> 00:09:59.700 So now this looks similar to here and then we need a button and that button should 174 00:09:59.730 --> 00:10:05.040 always be at the bottom no matter how much content is given on the screen and we're 175 00:10:05.060 --> 00:10:09.380 going to have to take it out of the scroll view because otherwise that button will be 176 00:10:09.410 --> 00:10:12.900 placed here because our content ends here. 177 00:10:12.930 --> 00:10:15.740 So let's create it outside of scroll view 178 00:10:15.770 --> 00:10:22.020 and let's put our button in this view and let's use our components for that. 179 00:10:22.050 --> 00:10:27.620 So it will be imported from our components and the title is going to be donate 180 00:10:27.650 --> 00:10:33.020 and onpress so far it is going to do nothing. Great, 181 00:10:33.050 --> 00:10:36.300 so this is already shown at the bottom 182 00:10:36.320 --> 00:10:46.300 of this and the what we need to do is just give it some horizontal margins. 183 00:10:46.320 --> 00:10:48.980 So let's call this button 184 00:10:49.010 --> 00:10:56.340 and create a style for this here and then let's say margin horizontal 185 00:10:56.370 --> 00:11:01.220 is equal to 20 as for everything else on the screen. 186 00:11:01.250 --> 00:11:05.120 So great. Now this is perfectly set up but what we 187 00:11:05.150 --> 00:11:09.580 do need to take care of if this text becomes very long, 188 00:11:09.610 --> 00:11:15.740 let's say we copy it multiple times here so that our screen becomes scrollable. 189 00:11:15.770 --> 00:11:20.940 We do see the text perfectly well but let's apply to some more margin bottom 190 00:11:20.970 --> 00:11:27.380 to this text so that it's not so cramped up here. 191 00:11:27.410 --> 00:11:29.780 Let's say that margin bottom's value is 192 00:11:29.810 --> 00:11:36.060 going to be vertical scale 10 and now we're able to scroll more 193 00:11:36.080 --> 00:11:42.020 and we have margin bottom of 10 compared to this bottom button given here. 194 00:11:42.050 --> 00:11:45.860 So that's all we are done with the screen 195 00:11:45.890 --> 00:11:49.400 and now if we reload our application 196 00:11:56.200 --> 00:11:58.820 and go to environment we're going to see 197 00:11:58.850 --> 00:12:02.020 an environment badge and information about that item. 198 00:12:02.050 --> 00:12:03.940 If we go to education 199 00:12:03.970 --> 00:12:08.660 we're going to see information about that specific education item. 200 00:12:08.690 --> 00:12:12.780 So everything is working out and that's it. 201 00:12:12.810 --> 00:12:15.380 You've done exceptionally well. 202 00:12:15.410 --> 00:12:18.740 Thanks so much for watching and following so far. 203 00:12:18.770 --> 00:12:23.540 You have all the knowledge that you need about reducers and in the next videos 204 00:12:23.570 --> 00:12:26.380 we're going to be exploring some more interesting topics. 205 00:12:26.410 --> 00:12:29.840 So stay tuned and I'll see you in the next video.