WEBVTT 1 00:00:00.400 --> 00:00:04.900 Hi friends and welcome back to our video tutorials about using redux with our 2 00:00:04.930 --> 00:00:05.748 donation app. 3 00:00:05.948 --> 00:00:10.090 Today we're actually going to dive into creating the homepage for our 4 00:00:10.120 --> 00:00:16.140 application and we're going to start off by using this header container here so 5 00:00:16.170 --> 00:00:19.180 that it appears for our application on the homepage. 6 00:00:19.210 --> 00:00:21.420 So from the last videos I've cleaned up 7 00:00:21.450 --> 00:00:26.500 this file and I've only left the dispatch and user and the safe area view. 8 00:00:26.530 --> 00:00:28.900 The rest we're just going to build together. 9 00:00:28.920 --> 00:00:34.060 And also I got rid of all the imports that we technically did not need. 10 00:00:34.090 --> 00:00:35.980 So let's get started with this. 11 00:00:36.000 --> 00:00:37.380 The first thing that we're going to have 12 00:00:37.410 --> 00:00:41.660 to do is create a view container for our header. 13 00:00:41.680 --> 00:00:42.820 So let's do that. 14 00:00:42.840 --> 00:00:44.820 And I'm going to create a style for this 15 00:00:44.850 --> 00:00:48.540 and I'm going to call it Header because that's what it is. 16 00:00:48.570 --> 00:00:51.100 And I'm going to import view from here. 17 00:00:51.130 --> 00:00:55.940 And then I'm also going to need import of style from our styles. 18 00:00:55.970 --> 00:00:57.900 And I'm going to put all these styles 19 00:00:57.930 --> 00:01:02.260 together and all the library imports together. 20 00:01:02.290 --> 00:01:04.770 So then what we're going to do is actually 21 00:01:04.800 --> 00:01:10.210 we're going to place a text given here that's hello inside here. 22 00:01:10.240 --> 00:01:11.620 So let's do that. 23 00:01:11.650 --> 00:01:15.020 Let's create text and let's say hello 24 00:01:15.050 --> 00:01:20.540 comma and let's import text component as well and save this. 25 00:01:20.570 --> 00:01:24.820 So now once we look at this we right away understand that we don't have 26 00:01:24.850 --> 00:01:29.420 the dimensions for the paddings and margins set up. 27 00:01:29.450 --> 00:01:32.060 So we're going to apply that directly to our header. 28 00:01:32.090 --> 00:01:34.360 And also if we look at our home page we're 29 00:01:34.390 --> 00:01:38.570 going to see that this is scrollable and we need a scroll view for that as well. 30 00:01:38.600 --> 00:01:43.540 So let's create the scroll view first and put this inside the scroll view 31 00:01:43.570 --> 00:01:47.840 and we're just going to say that vertical indicator should be false because I don't 32 00:01:47.870 --> 00:01:50.980 really want to see it, I don't know about you. 33 00:01:51.010 --> 00:01:56.960 And then I'm going to put my view container inside here and then I'm going 34 00:01:56.990 --> 00:02:00.440 to apply the styles that we need for the header and for that I'm going 35 00:02:00.470 --> 00:02:06.060 to go to the styles for our home and then I'm going to say that here we 36 00:02:06.090 --> 00:02:10.100 need a header style and let's see the dimensions that we need. 37 00:02:10.130 --> 00:02:17.500 So from this to the top there's a margin top of 20 so let's define that. 38 00:02:17.530 --> 00:02:19.660 We're going to say margin top vertical 39 00:02:19.690 --> 00:02:26.020 scale 20 and then let's see what's the horizontal one is 24. 40 00:02:26.050 --> 00:02:30.820 So we're going to need marginal horizontal scale 24. 41 00:02:30.850 --> 00:02:34.060 Great, now this is perfectly visible but it 42 00:02:34.090 --> 00:02:36.890 does have a different styling for the font. 43 00:02:36.920 --> 00:02:38.450 So let's come up something. 44 00:02:38.480 --> 00:02:45.080 Let's call this style, let's say header intro text 45 00:02:45.120 --> 00:02:49.980 and let's check out what font styling they have for this. 46 00:02:50.010 --> 00:02:54.220 So as always they are using font family of inter. 47 00:02:54.250 --> 00:03:01.180 Their font size is scale font size 16 and their line height 48 00:03:01.210 --> 00:03:06.860 is scale font size 19 and they have a font weight as well 49 00:03:06.890 --> 00:03:14.180 which is 400 and they have a special color that we're going to copy and paste here. 50 00:03:14.210 --> 00:03:16.500 Let's get rid of this new line. 51 00:03:16.530 --> 00:03:22.060 And now we need to apply this header intro text to this text here. 52 00:03:22.090 --> 00:03:25.820 So let's say style header intro text and this is great. 53 00:03:25.850 --> 00:03:27.940 These are very similar. 54 00:03:27.970 --> 00:03:32.780 And then we also need to use our header component that we created together. 55 00:03:32.810 --> 00:03:37.860 So let's import that from our components. 56 00:03:37.890 --> 00:03:40.380 And then let's say that title is going 57 00:03:40.410 --> 00:03:45.220 to be something that we're going to use from our user here. 58 00:03:45.250 --> 00:03:56.220 So I'm going to say user first name plus space, user last name's first character. 59 00:03:56.250 --> 00:03:59.940 And then we need a dot and then we need this emoji here. 60 00:03:59.970 --> 00:04:06.500 So I'm just going to copy this emoji from here and paste it here. 61 00:04:06.520 --> 00:04:09.220 Great. So this looks pretty similar to this 62 00:04:09.250 --> 00:04:13.060 except for the fact that we need some spacing in between these two. 63 00:04:13.090 --> 00:04:14.740 So I'm going to see what that is. 64 00:04:14.770 --> 00:04:16.180 That is five. 65 00:04:16.200 --> 00:04:18.420 So we're going to need some styling for the header. 66 00:04:18.450 --> 00:04:20.500 But the thing is because this is a custom 67 00:04:20.530 --> 00:04:22.940 component, I can't just apply styles to this. 68 00:04:22.960 --> 00:04:24.940 So I'm going to have to put it in a view 69 00:04:24.970 --> 00:04:31.140 container and I'm going to have to come up with some name for this style. 70 00:04:31.160 --> 00:04:34.940 I'm going to call it username. 71 00:04:34.970 --> 00:04:41.580 And then I'm going to create this username whoops I don't need closing here. 72 00:04:41.600 --> 00:04:44.940 And I'm going to copy this username and going to paste it here. 73 00:04:44.970 --> 00:04:51.900 And I'm going to say that margin top is vertical scale of five. 74 00:04:51.920 --> 00:04:54.900 And now we see this spacing here. 75 00:04:54.920 --> 00:04:58.680 And then we also see that there's a profile image given here and I don't 76 00:04:58.710 --> 00:05:01.380 really want to download it and put in our folders. 77 00:05:01.410 --> 00:05:06.860 So what I'm going to do is use an Uri for it and I'm going to put Uri here 78 00:05:06.890 --> 00:05:11.500 and I'm going to say that profile image should be present here and its value is 79 00:05:11.530 --> 00:05:15.500 something that I'm just grabbing from the internet. 80 00:05:15.530 --> 00:05:17.820 Okay, so let's save this. 81 00:05:17.840 --> 00:05:19.620 And now that I've saved this 82 00:05:19.650 --> 00:05:23.420 in the initial state, I want you to see something. 83 00:05:23.450 --> 00:05:28.500 Okay, so let's go to our home page here and I'm going to console log the user 84 00:05:28.530 --> 00:05:32.620 information here and I'm going to open the terminal and I'm going to reload this. 85 00:05:32.650 --> 00:05:34.060 And here we're going to see 86 00:05:34.090 --> 00:05:37.180 that the profile image is actually not present here. 87 00:05:37.210 --> 00:05:41.220 So it says that my profile image was present in the previous state but then 88 00:05:41.250 --> 00:05:45.620 somehow it was updated to the text state and basically this was lost. 89 00:05:45.650 --> 00:05:51.620 And this is because our initial state was already set up a long time ago and our 90 00:05:51.650 --> 00:05:58.100 store is already filled with the following state that we worked on in our last video. 91 00:05:58.130 --> 00:06:01.300 So if we want to update our initial state 92 00:06:01.320 --> 00:06:04.780 and go back to our initial state so that we're able to see this profile image 93 00:06:04.800 --> 00:06:09.220 later, what we're going to have to do is create a new function and call it reset 94 00:06:09.250 --> 00:06:15.020 to initial state and usually people have this function available in their reducers. 95 00:06:15.040 --> 00:06:18.980 Always set it up once you create a reducer for anything. 96 00:06:19.010 --> 00:06:22.380 So to set up and change back to initial 97 00:06:22.410 --> 00:06:26.740 state, all you need to do is return initial state and then you would need 98 00:06:26.770 --> 00:06:29.720 to export this function to be able to use it. 99 00:06:29.750 --> 00:06:37.220 And here I'm quickly going to dispatch that action to change my state. 100 00:06:37.250 --> 00:06:41.060 And then I'm going to have to import this quick. 101 00:06:41.090 --> 00:06:42.580 I'm going to save this. 102 00:06:42.600 --> 00:06:50.020 And now my initial state and the user will show the profile image that I created. 103 00:06:50.040 --> 00:06:52.380 So technically I can just get rid of this 104 00:06:52.410 --> 00:06:57.100 now because my reducer contains the information that I need. 105 00:06:57.120 --> 00:06:59.780 Great. So now what we need to do is create 106 00:06:59.800 --> 00:07:04.740 an image here and that image is going to be coming from the React native. 107 00:07:04.770 --> 00:07:07.360 Then it's going to need a Uri and I'm 108 00:07:07.390 --> 00:07:12.180 going to use user profile image Uri for this. 109 00:07:12.210 --> 00:07:14.460 And then I'm going to have to set some 110 00:07:14.480 --> 00:07:17.460 styling definitely so that we're able to see this image. 111 00:07:17.480 --> 00:07:21.620 So I'm going to call that styling file image and then we're going to need 112 00:07:21.650 --> 00:07:28.180 a resize mode that is going to be of type contain so that it's contained inside 113 00:07:28.210 --> 00:07:31.580 the dimensions that we define for this image. 114 00:07:31.600 --> 00:07:36.140 So let's create this profile image style. 115 00:07:36.170 --> 00:07:38.740 Let's see what it needs. 116 00:07:38.770 --> 00:07:42.220 So it needs a height and width of 50 so 117 00:07:42.250 --> 00:07:51.500 I'm just going to say width is horizontal scale 50 and height is vertical scale 50. 118 00:07:51.530 --> 00:07:53.860 So now we should be able to see this 119 00:07:53.890 --> 00:07:59.180 and if we compare we are string that all of these are shown in a column and we want 120 00:07:59.210 --> 00:08:02.220 them to be in a row and we want some space in between these. 121 00:08:02.250 --> 00:08:04.940 So with the terms that I'm talking about 122 00:08:04.970 --> 00:08:08.860 already, you might guess that we need a flexbox here. 123 00:08:08.890 --> 00:08:12.940 So we're going to say that we need a flex direction of row. 124 00:08:12.970 --> 00:08:15.300 And then if we see this here, 125 00:08:15.320 --> 00:08:18.020 we're going to see that some stuff is messed up for us. 126 00:08:18.040 --> 00:08:21.900 And this is because we don't have the video container set up correctly. 127 00:08:21.920 --> 00:08:24.020 We want these to be in a column. 128 00:08:24.040 --> 00:08:27.760 We only want this whole container and this 129 00:08:27.790 --> 00:08:32.500 picture to be in a row together and to fix that all we need is create a view 130 00:08:32.530 --> 00:08:38.300 container for both of these and now they are in a column. 131 00:08:38.320 --> 00:08:41.280 And we also know that we want these items 132 00:08:41.310 --> 00:08:44.220 next to each other to be vertically centered. 133 00:08:44.250 --> 00:08:50.060 So for that what we're going to need to do is use align items because now our items 134 00:08:50.080 --> 00:08:56.500 are in a row which means that our cross axis is going to be needing align items. 135 00:08:56.530 --> 00:09:02.020 So let's do align items center and now they are vertically centered and then what 136 00:09:02.050 --> 00:09:09.860 we need is justify content space between so that there is pace between these items 137 00:09:09.890 --> 00:09:14.940 and this is looking very good I must say very close to what we have here 138 00:09:14.970 --> 00:09:18.660 but with a different profile image which is totally fine. 139 00:09:18.690 --> 00:09:22.780 We could actually use the search box right in this tutorial because this should be 140 00:09:22.810 --> 00:09:26.980 very simple to define because we have a component for that already. 141 00:09:27.010 --> 00:09:29.120 So I'm going to create a view and I'm 142 00:09:29.150 --> 00:09:34.780 going to style this view with a style of search box 143 00:09:34.810 --> 00:09:40.420 and this search box is going to be needed so that we have the margin horizontal set 144 00:09:40.440 --> 00:09:47.620 up here and let's import the search that we created together in the past module. 145 00:09:47.650 --> 00:09:50.980 Let's save this. And here we see that we haven't created 146 00:09:51.010 --> 00:09:54.020 text styles so there is no margin horizontal. 147 00:09:54.050 --> 00:09:56.740 So let's create that and say margin 148 00:09:56.770 --> 00:10:03.620 horizontal is needed and it is going to be 24 and this is looking much better. 149 00:10:03.650 --> 00:10:07.620 It also needs a margin top of 20 150 00:10:07.650 --> 00:10:11.740 so let's do that as well with vertical scaling of 20. 151 00:10:11.760 --> 00:10:12.180 Great. 152 00:10:12.200 --> 00:10:15.380 And it also needs a placeholder text that we haven't set up. 153 00:10:15.410 --> 00:10:17.820 So let's go to the search component 154 00:10:17.850 --> 00:10:23.260 and let's say that we need a placeholder that is by default going to be search 155 00:10:23.290 --> 00:10:26.220 otherwise it's going to be whatever the user passes. 156 00:10:26.250 --> 00:10:30.040 So let's make sure that we accept prop type of string here that is not going 157 00:10:30.060 --> 00:10:37.740 to be required and that we set placeholder here that is going to be of value 158 00:10:37.770 --> 00:10:41.940 props.placeholder save this and here we go. 159 00:10:41.970 --> 00:10:46.700 The placeholder is visible and the next thing that we're going to have to do is 160 00:10:46.730 --> 00:10:50.860 create this image that should be pressable and something should happen. 161 00:10:50.890 --> 00:10:53.980 What I don't know yet but whatever 162 00:10:54.010 --> 00:10:59.960 it seems like we have to press it because there's this check now text here. 163 00:11:00.320 --> 00:11:06.140 So I actually already imported that image and called it highlighted image. 164 00:11:06.170 --> 00:11:11.820 So all I'm going to do is I'm going to set up a pressable so that this is pressable. 165 00:11:11.850 --> 00:11:16.500 And then I'm going to set up an image and I'm going to give it the source of two 166 00:11:16.530 --> 00:11:21.700 directories up assets images and highlighted image. 167 00:11:21.730 --> 00:11:24.780 And then again I'm going to give it resize 168 00:11:24.810 --> 00:11:29.780 mode of contain so that it's contained in whatever I define. 169 00:11:29.810 --> 00:11:33.380 And I have an error because I forgot to close the parentheses. 170 00:11:33.410 --> 00:11:36.860 And now if we look here we see that this image is actually huge. 171 00:11:36.890 --> 00:11:39.300 So we need styles definitely. 172 00:11:39.330 --> 00:11:43.020 So we're going to need a style for the image itself and let's call it 173 00:11:43.050 --> 00:11:46.880 highlighted image and we're going to need a style 174 00:11:46.910 --> 00:11:49.620 for the container as well and I will show you why. 175 00:11:49.650 --> 00:11:58.460 So if we go to the highlighted image and say that its width is 100% 176 00:11:58.490 --> 00:12:03.180 because it should take up all the space except of margins and then we need some 177 00:12:03.210 --> 00:12:09.000 height which is going to be vertical scale 160, 178 00:12:09.840 --> 00:12:12.180 we're going to see that it takes up the whole space. 179 00:12:12.210 --> 00:12:17.780 And even if we were to apply the margin horizontal 24 here, it's just going to be 180 00:12:17.810 --> 00:12:21.720 using it from the left side and on the right side it's going to use 181 00:12:21.750 --> 00:12:25.740 the width 100% that we defined here which we don't want to happen. 182 00:12:25.770 --> 00:12:31.900 So what we're going to do is we're going to create a highlighted image container, 183 00:12:31.930 --> 00:12:36.380 going to say that it's margin horizontal is 24. 184 00:12:36.410 --> 00:12:38.940 So let's apply this style here and let's 185 00:12:38.970 --> 00:12:43.340 say highlighted image container and that's it. 186 00:12:43.370 --> 00:12:44.540 This is looking great. 187 00:12:44.570 --> 00:12:48.780 And in the next video, what we're going to be doing is we are 188 00:12:48.810 --> 00:12:54.900 going to be building select category list that will be using in our newly created 189 00:12:54.930 --> 00:12:58.620 reducer that we're going to do together in the next video. 190 00:12:58.650 --> 00:13:02.260 So stay tuned, we are having a great progress. 191 00:13:02.280 --> 00:13:04.600 Thanks so much for watching and I'll see you in the next video.