WEBVTT 00:00:00.280 --> 00:00:01.640 Hi, everyone, and welcome back. 00:00:01.660 --> 00:00:07.980 Today, we're going to start creating the same profile page as given right here. 00:00:08.010 --> 00:00:10.040 What we're going to create in this video 00:00:10.070 --> 00:00:13.220 is going to be the first half of the screen. 00:00:13.240 --> 00:00:14.440 Let's get started on that. 00:00:14.470 --> 00:00:16.982 Let's go to the profile.js file right 00:00:17.182 --> 00:00:18.680 inside here and make sure 00:00:18.710 --> 00:00:20.967 that we get rid of all of these items 00:00:21.167 --> 00:00:22.980 because we don't need it anymore. 00:00:23.010 --> 00:00:26.260 This page is most probably going to be scrollable. 00:00:26.290 --> 00:00:29.480 Let's create the scroll view and it should 00:00:29.510 --> 00:00:33.100 be imported from React Native, so make sure that you do that. 00:00:33.130 --> 00:00:36.940 Let's get rid of some of the items that we donate from these imports. 00:00:36.960 --> 00:00:41.340 Here I'm going to create a new style, and it's going to be content container 00:00:41.370 --> 00:00:43.763 style that is going to use 00:00:43.963 --> 00:00:45.420 flexGrow property. 00:00:45.450 --> 00:00:48.420 Let's talk about this for a second. 00:00:48.450 --> 00:00:49.580 In React Native, 00:00:49.600 --> 00:00:52.720 flexgrow is a style property that determines how much a component 00:00:52.750 --> 00:00:56.300 should grow relative to its siblings in a flex container. 00:00:56.330 --> 00:00:59.080 The component with flexgrow 1 will take up 00:00:59.110 --> 00:01:03.500 as much space as possible along the main axis of the flex container. 00:01:03.530 --> 00:01:05.540 Let's talk about the scroll view now. 00:01:05.560 --> 00:01:07.080 Scroll views are used to create 00:01:07.080 --> 00:01:09.480 a scrollable area that can contain other components. 00:01:09.510 --> 00:01:11.400 However, sometimes the content inside 00:01:11.430 --> 00:01:15.660 the scroll view does not stretch and take up the full height of the scroll view, 00:01:15.690 --> 00:01:18.700 even if the content is smaller than the available space. 00:01:18.730 --> 00:01:23.480 This issue often arises when using a flex box layout as the scroll view does not 00:01:23.510 --> 00:01:27.570 automatically stretch to its content to fill the available space. 00:01:27.600 --> 00:01:29.560 Using the flex grow one on the content 00:01:29.590 --> 00:01:35.040 inside the scroll view will help you fix an issue of scroll views 00:01:35.070 --> 00:01:40.460 not taking up the space that its components are requiring it to. 00:01:40.490 --> 00:01:45.720 This sometimes happens because the area that items should take inside 00:01:45.750 --> 00:01:48.920 the scroll view is not calculated appropriately. 00:01:48.950 --> 00:01:51.800 It is determined by the operating system 00:01:51.830 --> 00:01:55.490 that you're running on and also the power of your computer. 00:01:55.520 --> 00:01:59.920 It would always be great if you use content container style in that case. 00:01:59.950 --> 00:02:02.440 Right now, since we have the FlexGrow 00:02:02.470 --> 00:02:08.780 applied here, I think it would be a good idea to go to global styles file. 00:02:08.810 --> 00:02:11.200 Let's find it right here inside our assets. 00:02:11.230 --> 00:02:15.240 Let's click on this and create flex grow property as well. 00:02:15.270 --> 00:02:23.500 Let's say that this is going to be one and let's use this instead of inline styles. 00:02:23.530 --> 00:02:26.400 Let's use FlexGrow right here and we will 00:02:26.430 --> 00:02:28.940 face no issues like that with the scroll view. 00:02:28.960 --> 00:02:29.320 Great. 00:02:29.350 --> 00:02:32.100 Now let's just get started with the creation of this. 00:02:32.120 --> 00:02:33.600 Here we see that the first thing 00:02:33.630 --> 00:02:37.300 that we're going to need is going to be a profile image. 00:02:37.330 --> 00:02:39.300 Let's create an image 00:02:39.330 --> 00:02:45.080 and import it in the React native right here and let's use require function here. 00:02:45.110 --> 00:02:49.920 What we're going to do is actually find the assets folder and then images. 00:02:49.950 --> 00:02:53.610 Here you should already have default profile PNG file. 00:02:53.640 --> 00:02:54.920 If you don't have it, 00:02:54.920 --> 00:02:58.600 then it's going to be attached to this video anyway, so you can download it. 00:02:58.630 --> 00:03:01.340 But I'm pretty sure that you are going to have it. 00:03:01.360 --> 00:03:03.280 Let's save this and you're going to see 00:03:03.310 --> 00:03:06.640 that this is very small and we want to make this bigger. 00:03:06.670 --> 00:03:10.120 Let's just look at Figma for a second and let's click here, 00:03:10.150 --> 00:03:15.460 make sure that DevCode is on right here so that you see the full dimensions. 00:03:15.490 --> 00:03:20.780 Here we can see that the width and the height of this picture is actually 110. 00:03:20.810 --> 00:03:22.820 Let's create a new style. 00:03:22.850 --> 00:03:26.740 For this, we're going to need a style.js file here. 00:03:26.770 --> 00:03:29.138 Let's create style.js file 00:03:29.338 --> 00:03:31.823 and let's import style sheet 00:03:32.023 --> 00:03:33.420 from React Native, 00:03:33.450 --> 00:03:35.627 create a constant of style and use this 00:03:35.827 --> 00:03:37.860 style sheet to create a new style sheet. 00:03:37.890 --> 00:03:41.260 Here, we can just say profile image. 00:03:41.290 --> 00:03:46.360 This profile image should have a width of 110 and height of 110. 00:03:46.390 --> 00:03:49.020 As always, we're going to have to stick 00:03:49.050 --> 00:03:51.795 with the horizontal scaling as we 00:03:51.995 --> 00:03:54.540 talked about in the past lessons. 00:03:54.570 --> 00:03:56.480 Let's use 110 here. 00:03:56.510 --> 00:04:00.760 For height, even though we should be using vertical scale, we're still going to use 00:04:00.790 --> 00:04:04.780 horizontal scale because this is intended to be a square. 00:04:04.810 --> 00:04:07.060 We're also going to need the border radius 00:04:07.090 --> 00:04:12.500 here, but actually, it is already a circular image, so we can just skip that. 00:04:12.530 --> 00:04:15.880 Let's apply this style back to the profile page. 00:04:15.910 --> 00:04:21.060 To do that, we're going to have to export this and import it right here. 00:04:21.090 --> 00:04:27.060 I can just type in style and make sure that I use style.profileImage 00:04:27.830 --> 00:04:33.420 and then I can just import it directly like this. 00:04:33.450 --> 00:04:34.540 Let's save this. 00:04:34.570 --> 00:04:37.060 Now we see that this image became bigger. 00:04:37.090 --> 00:04:39.760 Yes, the way it looks is a little bit pixelated. 00:04:39.780 --> 00:04:42.860 This is because that image is not as high 00:04:42.890 --> 00:04:45.660 quality, but it doesn't really matter for this case. 00:04:45.690 --> 00:04:46.940 Let's just use it. 00:04:46.970 --> 00:04:50.940 What we want to do here is make sure that we have this border applied here. 00:04:50.970 --> 00:04:52.860 Before we do that, 00:04:52.890 --> 00:04:56.740 first of all, we're going to have to set up a view container right here, 00:04:56.770 --> 00:04:59.180 and then we're going to have to import this. 00:04:59.200 --> 00:05:01.040 First, let's make sure that this is going 00:05:01.070 --> 00:05:05.820 to be centered and let's apply a style here. 00:05:05.840 --> 00:05:12.560 Let's call this style profile image container. 00:05:13.480 --> 00:05:16.520 Let's go to styles and paste this here. 00:05:16.540 --> 00:05:20.500 Then what we want to do is set up a flex. 00:05:20.520 --> 00:05:22.080 Nothing's really going to change with this. 00:05:22.100 --> 00:05:24.200 Then what we want to do is say that our 00:05:24.220 --> 00:05:28.880 direction is row and that we want this to be centered. 00:05:28.910 --> 00:05:31.680 Now you're going to see that this is going 00:05:31.700 --> 00:05:34.200 to be centered and we need some margin top as well. 00:05:34.230 --> 00:05:37.240 Let's check out how much that is. It should be 32. 00:05:37.270 --> 00:05:42.260 Let's do margin top, vertical scale 32. 00:05:42.290 --> 00:05:45.180 Now it's at the place where it should be. 00:05:45.210 --> 00:05:47.520 Now we're going to have to set up another 00:05:47.540 --> 00:05:52.780 view container inside this to make sure that we can set that border up. 00:05:52.800 --> 00:05:57.780 Let's do another view container right here and 00:05:57.800 --> 00:06:04.700 let's call the style profile image content, for example. 00:06:04.730 --> 00:06:09.120 Then we can just copy this and paste it right here. 00:06:09.360 --> 00:06:13.380 For this, we're going to need border width one. 00:06:13.410 --> 00:06:17.380 This is how it's going to look pretty ridiculous. 00:06:17.410 --> 00:06:22.800 We're going to have to make sure that this border is directly around this item. 00:06:22.830 --> 00:06:25.420 Maybe we can just delete the flex one 00:06:25.450 --> 00:06:28.140 right here and that's how it's going to happen. 00:06:28.170 --> 00:06:33.180 Then what we want to do is make sure that we have a border color. 00:06:33.210 --> 00:06:34.600 Here it's a gradient, 00:06:34.630 --> 00:06:45.380 but we're just going to use a solid color and it's going to be 0, 1, 5, 0, E, and C. 00:06:45.400 --> 00:06:48.580 Great. We can apply this color right around it. 00:06:48.600 --> 00:06:51.620 Then we're going to need some a padding. 00:06:51.650 --> 00:06:58.140 Let's use, for example, padding of horizontal scale four. 00:06:58.170 --> 00:06:59.980 Again, we're using horizontal scale 00:07:00.010 --> 00:07:05.700 because we chose to stick with this anytime we're affecting all directions. 00:07:05.730 --> 00:07:07.260 Don't forget that. 00:07:07.290 --> 00:07:09.940 Now we're going to need the border radius. 00:07:09.970 --> 00:07:12.720 Border radius is going to be 110. 00:07:12.750 --> 00:07:16.020 We can just copy this, paste it here. 00:07:16.040 --> 00:07:19.660 Now it looks circular and very similar to our design. 00:07:19.680 --> 00:07:22.040 Perfect. Let's just go back to profile page here 00:07:22.070 --> 00:07:24.660 and start setting up some other stuff that we need. 00:07:24.690 --> 00:07:28.500 Now what we want to do is actually create this text given here. 00:07:28.530 --> 00:07:31.120 Let's create a new text component right here. 00:07:31.150 --> 00:07:34.180 Let's make sure that this is imported. 00:07:34.200 --> 00:07:35.520 I can't import it from here. 00:07:35.540 --> 00:07:37.420 I'm just going to write it. 00:07:37.450 --> 00:07:39.520 Then what we want to do is make sure 00:07:39.540 --> 00:07:42.400 that Emmanuel Robertson is written inside here. 00:07:42.420 --> 00:07:45.120 Let's do Emmanuel Robertson. 00:07:45.150 --> 00:07:47.860 You can write your own name if you'd like. 00:07:47.890 --> 00:07:52.400 Let's set up a styling for this and let's call it username. 00:07:52.440 --> 00:07:55.120 Let's copy this and paste it right here 00:07:55.150 --> 00:07:58.820 and say that it should have a margin top of how much? 00:07:58.850 --> 00:08:01.180 It's 20. It's visible right here. 00:08:01.210 --> 00:08:05.540 Let's do margin top, vertical scale 20. 00:08:05.560 --> 00:08:07.414 Now you can see this space right here, 00:08:07.614 --> 00:08:09.220 but we also want this to be centered. 00:08:09.250 --> 00:08:12.318 Let's do text align center. 00:08:12.518 --> 00:08:13.000 Great. 00:08:13.030 --> 00:08:14.540 Now it should be centered. 00:08:14.570 --> 00:08:17.491 Let's make sure that the styling for the 00:08:17.691 --> 00:08:20.120 fonts also match up with the design. 00:08:20.120 --> 00:08:21.980 I'm just going to move this a little bit 00:08:22.010 --> 00:08:23.864 to the right side 00:08:24.064 --> 00:08:26.700 and let's use font family. 00:08:26.730 --> 00:08:28.919 We're going to use our get font family 00:08:29.119 --> 00:08:30.820 function that we set up together. 00:08:30.850 --> 00:08:33.750 We're going to say that we need a font of 00:08:33.950 --> 00:08:36.580 inter and the font weight should be 600. 00:08:36.610 --> 00:08:38.936 Then let's set up the font size, 00:08:39.136 --> 00:08:41.480 which should be scale font size 20. 00:08:41.480 --> 00:08:42.880 Note that these functions are 00:08:42.910 --> 00:08:44.940 automatically imported for me, 00:08:45.140 --> 00:08:47.580 so make sure that you also import them. 00:08:47.600 --> 00:08:48.118 Great. 00:08:48.318 --> 00:08:51.140 Let's save this and see our design. 00:08:51.160 --> 00:08:52.880 Now I would argue that this doesn't look 00:08:52.910 --> 00:08:55.375 as bold, and it is because I missed 00:08:55.575 --> 00:08:57.700 out on using a string right here. 00:08:57.730 --> 00:08:58.935 Let's do that. 00:08:59.135 --> 00:09:01.860 Now it looks as bold as it should. 00:09:01.890 --> 00:09:05.056 Then what we want to do here is set 00:09:05.256 --> 00:09:07.860 up these statistics given here. 00:09:07.890 --> 00:09:08.740 Let's do that. 00:09:08.770 --> 00:09:10.607 For this, we're going to need 00:09:10.807 --> 00:09:12.380 a view container definitely. 00:09:12.410 --> 00:09:15.681 We're containing three items right here 00:09:15.881 --> 00:09:18.700 that should be horizontally aligned. 00:09:18.730 --> 00:09:20.168 We're going to create 00:09:20.368 --> 00:09:21.880 one view container first, 00:09:21.910 --> 00:09:24.195 and let's try to design this, and then 00:09:24.395 --> 00:09:26.180 we can just copy it and paste it. 00:09:26.200 --> 00:09:28.259 First thing that we're going to need 00:09:28.459 --> 00:09:29.860 a text with a 45 right here. 00:09:29.890 --> 00:09:31.960 Second thing that we're going to need is 00:09:31.990 --> 00:09:34.428 also going to be a text with 00:09:34.628 --> 00:09:37.040 something that says following. 00:09:37.200 --> 00:09:38.980 Great, it appears right here. 00:09:39.010 --> 00:09:41.647 Let's just style this 00:09:41.847 --> 00:09:44.680 and call it stat amount. 00:09:45.000 --> 00:09:47.895 Let's just go here and make sure that we 00:09:48.095 --> 00:09:50.500 grab the styling for the fonts here. 00:09:50.530 --> 00:09:52.520 I'm going to press on this 00:09:52.720 --> 00:09:54.740 and see what it has as styles. 00:09:54.770 --> 00:09:57.535 First of all, we're going to need font 00:09:57.735 --> 00:09:59.500 family and it's going to be 00:09:59.530 --> 00:10:02.243 equal to get font family inter 00:10:02.443 --> 00:10:05.860 and the weight is still 600, apparently. 00:10:05.890 --> 00:10:08.695 The font size is going to be 00:10:08.895 --> 00:10:11.100 also scale font size 20. 00:10:11.130 --> 00:10:13.540 Great. This looks great. 00:10:13.560 --> 00:10:15.960 Then we also need the color right here. 00:10:15.990 --> 00:10:18.140 Let's make sure that we grab that. 00:10:18.170 --> 00:10:20.020 Let's do color. 00:10:20.050 --> 00:10:23.755 Then what we want to do is compare this 00:10:23.955 --> 00:10:27.460 and it looks pretty good if you ask me. 00:10:27.490 --> 00:10:29.081 Now we also want to design 00:10:29.281 --> 00:10:31.040 the following text the same way. 00:10:31.060 --> 00:10:33.100 Let's go back here 00:10:33.300 --> 00:10:35.820 and then let's call this 00:10:35.850 --> 00:10:40.152 stat type and let's go to our styles 00:10:40.352 --> 00:10:43.140 and make sure that we get 00:10:43.170 --> 00:10:46.940 the font family again and it's going to be 00:10:47.140 --> 00:10:50.620 inter, and its weight is going to be 400. 00:10:50.650 --> 00:10:53.520 Then what we want to do is say 00:10:53.720 --> 00:10:57.060 that font size is scale font size 16. 00:10:57.080 --> 00:10:58.745 Then we are also going 00:10:58.945 --> 00:11:00.940 to need the color right here. 00:11:00.970 --> 00:11:04.760 Let's grab this and give it a color, 00:11:05.440 --> 00:11:08.115 save it, and let's compare them, 00:11:08.315 --> 00:11:10.540 and they look pretty similar. 00:11:10.570 --> 00:11:13.135 Now, they also need to be centered, 00:11:13.335 --> 00:11:15.480 so let's do a text-align center. 00:11:15.510 --> 00:11:17.895 The first time we are going to do this is 00:11:18.095 --> 00:11:20.280 going to appear right in the middle here. 00:11:20.310 --> 00:11:23.251 This is something that we should prevent, 00:11:23.451 --> 00:11:26.120 but it will automatically get sorted out 00:11:26.150 --> 00:11:27.460 very soon, so we can 00:11:27.660 --> 00:11:28.900 just keep it this way. 00:11:28.930 --> 00:11:31.560 Now we can just copy this view container 00:11:31.580 --> 00:11:34.620 and paste it two times here and use 00:11:34.650 --> 00:11:41.767 30 M followers and 100 posts. 00:11:41.967 --> 00:11:43.240 Great. 00:11:43.240 --> 00:11:44.160 This is how it looks. 00:11:44.190 --> 00:11:45.829 Now we got to make sure 00:11:46.029 --> 00:11:47.540 that these are in a row. 00:11:47.570 --> 00:11:53.100 Let's call this style.statContainer. 00:11:53.130 --> 00:11:56.320 Let's copy this, go here and create another style. 00:11:56.350 --> 00:11:59.320 Let's say that flex direction should be row. 00:11:59.350 --> 00:12:02.099 Now this is how it looks and we also want 00:12:02.299 --> 00:12:04.580 to make sure that these are centered. 00:12:04.610 --> 00:12:08.335 Let's do justify content center 00:12:08.535 --> 00:12:11.700 and they will look this way. 00:12:11.730 --> 00:12:15.460 We might actually be better off 00:12:15.490 --> 00:12:17.213 using space between and 00:12:17.413 --> 00:12:19.160 this is how it would look. 00:12:19.190 --> 00:12:21.952 But what we could do is make sure that we 00:12:22.152 --> 00:12:24.580 have some a padding on the sides and it 00:12:24.610 --> 00:12:26.107 seems like it's 00:12:26.307 --> 00:12:29.100 around maybe 40 or maybe less. 00:12:29.130 --> 00:12:30.561 Let's do padding 00:12:30.761 --> 00:12:33.960 horizontal here and experiment with it 00:12:33.990 --> 00:12:35.735 with horizontal scaling 00:12:35.935 --> 00:12:37.480 and let's say it is 20. 00:12:37.510 --> 00:12:39.140 This is how it would look. 00:12:39.170 --> 00:12:40.529 Maybe 40 is actually 00:12:40.729 --> 00:12:42.500 the number that we need here. 00:12:42.530 --> 00:12:44.420 Okay, this is way better. 00:12:44.450 --> 00:12:47.081 Now we're also going to need margin top, 00:12:47.281 --> 00:12:48.660 which is going to be 30. 00:12:48.690 --> 00:12:53.460 Let's do margin top, vertical scale 30. 00:12:53.490 --> 00:12:54.540 Perfect. 00:12:54.570 --> 00:12:56.980 This is looking so much better. 00:12:57.010 --> 00:12:59.278 Now, what we also want to do is 00:12:59.478 --> 00:13:01.620 have these borders applied here. 00:13:01.650 --> 00:13:04.364 We can just create a view 00:13:04.564 --> 00:13:06.860 here and call it style.statBorder 00:13:06.890 --> 00:13:09.500 let's save this. 00:13:09.530 --> 00:13:12.740 We can go inside the styles and use this 00:13:12.770 --> 00:13:17.538 stat border and say that border right 00:13:17.738 --> 00:13:20.760 width is going to be one. 00:13:21.200 --> 00:13:22.358 We're going to have 00:13:22.558 --> 00:13:23.760 to grab a color for it. 00:13:23.790 --> 00:13:26.445 Let's use this color right here 00:13:26.645 --> 00:13:29.100 and say color is going to be... 00:13:29.130 --> 00:13:31.262 Oops, the border color is 00:13:31.462 --> 00:13:33.480 going to be equal to this. 00:13:34.600 --> 00:13:37.890 Let's save it and make sure that we use 00:13:38.090 --> 00:13:41.180 this view container right here as well. 00:13:41.210 --> 00:13:44.393 Look at this, it is looking so good. 00:13:44.593 --> 00:13:45.100 Perfect. 00:13:45.130 --> 00:13:46.630 Now that we have this, 00:13:46.830 --> 00:13:49.220 let's create this border here as well. 00:13:49.250 --> 00:13:51.681 This stat container will need 00:13:51.881 --> 00:13:53.860 the margin bottom as well. 00:13:53.890 --> 00:13:57.540 Let's just make this margin vertical instead. 00:13:57.570 --> 00:14:01.075 Then let's make sure that it 00:14:01.275 --> 00:14:02.740 has a border bottom 00:14:02.770 --> 00:14:05.095 width and it will be one and this 00:14:05.295 --> 00:14:07.280 is how it's going to look like. 00:14:07.360 --> 00:14:09.771 See that it extends to the full width and 00:14:09.971 --> 00:14:12.240 this is because of the padding horizontal. 00:14:12.270 --> 00:14:15.135 If we were to make this margin horizontal 00:14:15.335 --> 00:14:17.580 instead, this won't happen anymore. 00:14:17.610 --> 00:14:18.760 That's totally fine. 00:14:18.790 --> 00:14:22.965 Let's just copy the border color right 00:14:23.165 --> 00:14:27.140 here and then let's make sure that our 00:14:27.170 --> 00:14:30.647 margin vertical turns into padding 00:14:30.847 --> 00:14:33.920 vertical so that this has space. 00:14:34.040 --> 00:14:34.800 Great. 00:14:34.830 --> 00:14:37.076 Now our first half of the application 00:14:37.276 --> 00:14:39.080 looks pretty good, if you ask me. 00:14:39.110 --> 00:14:41.080 We're done with this lesson. 00:14:41.110 --> 00:14:43.411 In this next lesson, we're going 00:14:43.611 --> 00:14:45.640 to explore this tab navigation. 00:14:45.670 --> 00:14:47.738 We're going to install it and place 00:14:47.938 --> 00:14:50.160 different content inside each tab and see 00:14:50.190 --> 00:14:51.798 how the tab navigation actually 00:14:51.998 --> 00:14:52.940 works in React Native. 00:14:52.960 --> 00:14:54.260 Thank you so much for watching. 00:14:54.290 --> 00:14:55.614 Stay tuned and I'll see 00:14:55.814 --> 00:14:56.880 you in the next video.