WEBVTT 00:00:00.160 --> 00:00:02.220 Hi, everyone, and welcome back. 00:00:02.240 --> 00:00:04.240 Today, we're going to start thinking about 00:00:04.270 --> 00:00:09.740 how to construct our flat list for the user stories given here. 00:00:09.770 --> 00:00:13.620 We're going to start from basics, and at the end, we're going to change up 00:00:13.640 --> 00:00:15.780 some of the things that we're going to develop. 00:00:15.810 --> 00:00:19.760 But for now, what we're going to do is create a flat 00:00:19.790 --> 00:00:25.360 list here and place it inside the view container. 00:00:25.390 --> 00:00:30.300 Let's say we have a flat list and it's grabbing the user post. 00:00:30.330 --> 00:00:32.340 For now, let's not think about 00:00:32.370 --> 00:00:35.780 the pagination and the infinite scrolling yet. 00:00:35.810 --> 00:00:38.220 We're going to have a render item 00:00:38.250 --> 00:00:43.180 function here and it's going to take in a callback function. 00:00:43.210 --> 00:00:44.880 Let's close this flat list. 00:00:44.910 --> 00:00:46.960 What it's going to do is grab each item 00:00:46.960 --> 00:00:49.700 in the flat list and it's going to do something with it. 00:00:49.730 --> 00:00:51.300 Let's save this. 00:00:51.330 --> 00:00:55.960 Now, what we want to do is create a user post component. 00:00:55.990 --> 00:00:57.620 Let's do that. 00:00:57.650 --> 00:01:00.900 Create a new directory, call it user post. 00:01:00.930 --> 00:01:07.180 Inside here, we're going to create a new file which will be userpost.js. 00:01:07.210 --> 00:01:09.980 We'll also need the styling function. 00:01:10.010 --> 00:01:13.380 Let's say it is style.js. 00:01:13.400 --> 00:01:14.560 Since we have this file open, 00:01:14.590 --> 00:01:18.490 I'm just going to click right here that we're going to import stylesheet. 00:01:18.520 --> 00:01:21.850 Then we also are going to need a style constant, 00:01:21.880 --> 00:01:25.980 and it's going to use this stylesheet that we imported to create a stylesheet. 00:01:26.010 --> 00:01:29.340 Then we're going to import this style. 00:01:29.370 --> 00:01:33.440 Now let's go back to the userPost.s file and start creating our component. 00:01:33.470 --> 00:01:35.980 Let's import react from react. 00:01:36.010 --> 00:01:38.080 Then we're also going to need the user 00:01:38.110 --> 00:01:42.340 post here and we're going to return null so far. 00:01:42.370 --> 00:01:46.780 What we're going to do is export this user post. 00:01:46.810 --> 00:01:51.800 Now what we need to do is make sure 00:01:51.830 --> 00:01:57.080 that we construct it in a way that we're able to grab some properties for the user 00:01:57.110 --> 00:02:01.780 post so that we can get the first name, the location, bookmarks, and all of that. 00:02:01.810 --> 00:02:04.060 We're going to need props here. 00:02:04.090 --> 00:02:08.380 And if we need props, we need import prop types here. 00:02:08.410 --> 00:02:10.800 Let's set that up and say that user post 00:02:10.830 --> 00:02:15.120 needs prop types and it's going to need a first name 00:02:15.150 --> 00:02:20.020 and it's going to be Prop types string is required. 00:02:20.040 --> 00:02:21.760 We're definitely going to need the last 00:02:21.790 --> 00:02:26.260 name and it's also going to be a string and it's going to be required. 00:02:26.290 --> 00:02:32.580 We can make the location string that is not necessarily required. 00:02:32.610 --> 00:02:37.610 What we're also going to need is the image 00:02:37.640 --> 00:02:41.960 and it is going to be required and we can make this any. 00:02:41.990 --> 00:02:45.140 We already have an experience for this. 00:02:45.170 --> 00:02:48.060 Let's say that we need the bookmarks 00:02:48.090 --> 00:02:52.340 and it's going to be a number and it's going to be required. 00:02:52.370 --> 00:02:54.080 Let me write something here. 00:02:54.110 --> 00:02:58.300 Actually, first we should have started with likes. 00:02:58.330 --> 00:03:01.160 Let's create a number and it's also going 00:03:01.190 --> 00:03:04.540 to be required and we're going to need the same for comments. 00:03:04.570 --> 00:03:08.600 We're going to need comments and it is going to be required. 00:03:08.630 --> 00:03:10.520 Let's save this. 00:03:10.760 --> 00:03:13.220 Oops, I missed a comma here. Great. 00:03:13.250 --> 00:03:18.420 Now we have all of those properties set as required and we're going to be grabbing it 00:03:18.450 --> 00:03:22.760 through these props, but we also need to pass these items here. 00:03:22.790 --> 00:03:24.760 First of all, we're definitely going 00:03:24.790 --> 00:03:27.580 to need an image and we don't have the image. 00:03:27.610 --> 00:03:31.720 You do have the image inside the resources folder so just download it. 00:03:31.750 --> 00:03:34.260 Once you have it downloaded, just 00:03:34.290 --> 00:03:38.980 place it inside the images and we're going to be all set. 00:03:39.010 --> 00:03:41.200 Now we can also go back to the user post 00:03:41.230 --> 00:03:44.320 and actually make sure that we have that set up. 00:03:44.350 --> 00:03:46.020 I'm just going to grab this code 00:03:46.050 --> 00:03:52.260 from the profile image and copy it because I am a lazy developer. 00:03:52.290 --> 00:03:56.900 Let's just paste it here and call it image. 00:03:56.930 --> 00:03:58.880 It will require assets, images, 00:03:58.910 --> 00:04:02.610 but instead of default profile, it will be default post. 00:04:02.640 --> 00:04:11.320 Now I'm going to copy this line and paste it in each one of these posts. 00:04:12.240 --> 00:04:13.420 Great. 00:04:13.450 --> 00:04:16.640 We can save this and close this array. 00:04:16.660 --> 00:04:19.900 Now we need to make sure that we use 00:04:19.920 --> 00:04:25.580 user post component here and it automatically 00:04:25.600 --> 00:04:28.740 prefilled all of the props that I need to give it. 00:04:28.770 --> 00:04:30.000 It will be item. 00:04:30.030 --> 00:04:33.200 Our first name and then it will be item. 00:04:33.220 --> 00:04:34.960 Last name. 00:04:35.640 --> 00:04:37.820 Let me make this more visible for you. 00:04:37.840 --> 00:04:41.460 I have so many things open at the same time. 00:04:41.480 --> 00:04:43.700 It will be item. 00:04:43.720 --> 00:04:47.760 Image here and the likes will be item. 00:04:47.780 --> 00:04:51.380 Likes, comments will be item. 00:04:51.410 --> 00:04:56.260 Comments, and the bookmarks will be item. 00:04:56.280 --> 00:04:58.160 Marks. Great. 00:04:58.190 --> 00:05:01.225 Now let's make sure that we 00:05:01.425 --> 00:05:04.260 don't have any errors here. 00:05:04.280 --> 00:05:07.760 This needs to close before this. 00:05:09.440 --> 00:05:12.080 I'm going to try to save this. 00:05:12.760 --> 00:05:14.490 Let's make sure that the brace 00:05:14.690 --> 00:05:15.660 is closed here as well. 00:05:15.680 --> 00:05:16.080 Great. 00:05:16.100 --> 00:05:19.600 Now my code is formatted because of my auto formator. 00:05:19.630 --> 00:05:25.140 Now let's go into the user post here and let's start setting up this component. 00:05:25.160 --> 00:05:27.300 Let's start thinking what we need. 00:05:27.330 --> 00:05:29.620 First of all, we need a view container. 00:05:29.650 --> 00:05:32.420 Let's make sure that this is imported. 00:05:32.450 --> 00:05:35.700 Inside here, we are going to need an image. 00:05:35.730 --> 00:05:38.040 We're going to need a profile image. 00:05:38.070 --> 00:05:42.140 We're going to need the first name and the last name and location and these 00:05:42.170 --> 00:05:47.980 three dots icons given here, and they all have to be in the same line. 00:05:48.010 --> 00:05:50.720 What are we going to need for this? 00:05:50.750 --> 00:05:53.420 We're going to need a separate container for it, 00:05:53.450 --> 00:05:59.820 and we're going to have to make sure that we use the User Profile Image component. 00:05:59.850 --> 00:06:01.920 For the user profile image, 00:06:01.950 --> 00:06:05.300 I just remembered that we haven't set that up either. 00:06:05.330 --> 00:06:08.540 Let's make sure that we pass that here as well. 00:06:08.570 --> 00:06:11.700 It's going to be called profile image, 00:06:11.730 --> 00:06:15.820 crop types, any, and it's going to be required. 00:06:15.850 --> 00:06:18.640 The dimensions, we can grab from here already. 00:06:18.670 --> 00:06:20.620 It will be 48. 00:06:20.640 --> 00:06:21.920 We can just give this here, 00:06:21.950 --> 00:06:25.900 but we are going to have to make sure that we fill in the profile image as well. 00:06:25.920 --> 00:06:26.700 Let's do that. 00:06:26.730 --> 00:06:29.900 Let's just grab this and paste it everywhere here. 00:06:29.920 --> 00:06:31.040 Okay. 00:06:35.000 --> 00:06:38.620 Then what we want to do is make sure that we pass it here. 00:06:38.650 --> 00:06:41.060 Profile image will be item. 00:06:41.080 --> 00:06:42.220 Profile_image. 00:06:42.250 --> 00:06:47.740 We're going to go to User Post and say that, Hey, do have the profile limit now. 00:06:47.770 --> 00:06:49.320 Let's save this. Great. 00:06:49.350 --> 00:06:53.380 Now we see this weird thing here that's not really a problem. 00:06:53.410 --> 00:06:55.840 What we can do with that is just style it 00:06:55.860 --> 00:06:59.820 and make sure that we have a flex container for that. 00:06:59.850 --> 00:07:02.980 Let's just say that this will have flex 00:07:03.010 --> 00:07:06.300 direction of row because that is what we're going to need. 00:07:06.330 --> 00:07:09.240 Actually, I just noticed that we also need 00:07:09.270 --> 00:07:12.860 the margins to the left and the right side. 00:07:12.890 --> 00:07:18.620 Here we're going to need this style and let's call it global style. 00:07:18.650 --> 00:07:21.860 This is user post container. 00:07:21.890 --> 00:07:24.020 Let's just copy this, go here. 00:07:24.040 --> 00:07:27.540 Here we're going to say that margin 00:07:27.740 --> 00:07:29.940 horizontal has to be 24. 00:07:29.970 --> 00:07:31.679 Let's save this and now we see 00:07:31.879 --> 00:07:33.160 this at the correct place. 00:07:33.190 --> 00:07:34.900 Let's go back here. 00:07:34.920 --> 00:07:38.580 Our profile image is more or less visible okay. 00:07:38.600 --> 00:07:42.500 Now we want to make sure that we show the 00:07:42.530 --> 00:07:46.920 text here as well, which is presented in a column in this case. 00:07:46.950 --> 00:07:51.780 We're also going to need a view container so that those are in a column. 00:07:51.800 --> 00:07:56.560 Let's say that we have one text here and it is going to show props. 00:07:56.590 --> 00:08:00.760 Firstname, and then it will show props. Lastname. 00:08:00.790 --> 00:08:03.040 We're going to need a space in between 00:08:03.070 --> 00:08:06.060 and we are going to need a text component here as well. 00:08:06.090 --> 00:08:08.460 Here is our text. 00:08:08.480 --> 00:08:12.420 Now what we want to do is make sure that this is centered. 00:08:12.450 --> 00:08:20.260 Let's create a new style here and let's say that this is going to be centered 00:08:20.290 --> 00:08:29.220 vertically and in columns vertical, things are handled by justified content center. 00:08:29.250 --> 00:08:31.900 This is going to be centered right now. 00:08:31.920 --> 00:08:35.100 We are also going to need a second text 00:08:35.130 --> 00:08:38.600 and we're going to show this if location is present. 00:08:38.630 --> 00:08:41.580 Because this is not something that is required. 00:08:41.610 --> 00:08:43.840 We're going to say if props. 00:08:43.870 --> 00:08:47.500 Location then show this. 00:08:47.530 --> 00:08:49.060 We're going to need props. 00:08:49.080 --> 00:08:51.420 Location here. 00:08:51.440 --> 00:08:53.280 Let's save this. 00:08:54.080 --> 00:08:56.640 It's not really shown here. 00:08:56.670 --> 00:09:00.600 It already should be displayed. That's weird. 00:09:00.630 --> 00:09:04.400 Let's go back to our data and see. 00:09:04.560 --> 00:09:09.460 Okay, we haven't passed in the location, so it was really optional, wasn't it? 00:09:09.490 --> 00:09:13.260 Let's save this, and now we're going to see the location. 00:09:13.280 --> 00:09:15.920 Great. Now, what we want to do is make sure 00:09:15.940 --> 00:09:19.400 that this has some distance from the profile picture. 00:09:19.430 --> 00:09:28.460 Let's zoom in to our design and see that we have margin to the left, which is 10. 00:09:28.490 --> 00:09:31.580 Let's draw that here as well. 00:09:31.610 --> 00:09:34.340 Now there is some space here. 00:09:34.370 --> 00:09:35.960 Perfect. 00:09:36.320 --> 00:09:42.380 What we also want to do is place these three icons here, horizontal ellipses. 00:09:42.410 --> 00:09:44.580 That's how they are called. 00:09:44.610 --> 00:09:46.300 Let's make sure that we do that. 00:09:46.320 --> 00:09:48.980 It has to be in the row. 00:09:49.010 --> 00:09:53.740 We're going to do it right outside of this view container where the texts were. 00:09:53.770 --> 00:10:01.300 Let's just use the Font Awesome icon and let's search for horizontal ellipsis. 00:10:01.320 --> 00:10:04.040 See, ellipsis horizontal. Great. 00:10:04.060 --> 00:10:07.460 I'm going to include the solid one. 00:10:07.490 --> 00:10:08.860 I'm going to save this. 00:10:08.890 --> 00:10:09.960 Here's our icon. 00:10:09.990 --> 00:10:13.240 But we also need to center this right and we're in the row. 00:10:13.270 --> 00:10:18.040 We're in the row, so we're going to needline items center here. 00:10:18.960 --> 00:10:21.740 We're also going to need some distance 00:10:21.770 --> 00:10:27.300 in between these items, these two items and this icon, 00:10:27.320 --> 00:10:30.940 which means that we're going to have to use space in between. 00:10:30.970 --> 00:10:35.140 But to have space in between these items 00:10:35.160 --> 00:10:38.160 and these items properly, we're going to have to wrap this in a view 00:10:38.190 --> 00:10:41.900 container as well, because otherwise what would happen is... 00:10:41.930 --> 00:10:43.900 Let's see what would happen actually. 00:10:43.930 --> 00:10:47.500 Just if Icontent, paste between. 00:10:47.530 --> 00:10:49.160 Let's see what would happen. 00:10:49.190 --> 00:10:51.520 This will put space in between each 00:10:51.550 --> 00:10:54.325 element and we don't want that and this 00:10:54.525 --> 00:10:57.100 will be fixed by a view container here. 00:10:57.130 --> 00:10:58.920 Let's save this and great. 00:10:58.950 --> 00:11:01.240 Now we're viewing everything very nicely 00:11:01.270 --> 00:11:05.100 and we see this profile image in a very weird way. 00:11:05.130 --> 00:11:09.140 We're also going to need a row applied here. 00:11:09.170 --> 00:11:14.100 Let's say, X direction is row. 00:11:14.130 --> 00:11:17.740 Great, now we're getting closer to our design. 00:11:17.770 --> 00:11:19.680 Now, what I want to do is make sure 00:11:19.680 --> 00:11:22.180 that we don't keep on writing the styles right here. 00:11:22.210 --> 00:11:24.541 Let's come up with these names 00:11:24.741 --> 00:11:27.260 and save them in our style.js file. 00:11:27.290 --> 00:11:30.743 Let's say that this one will 00:11:30.943 --> 00:11:34.320 be specifically for the user. 00:11:34.880 --> 00:11:41.260 Let's call it style.userContainer. 00:11:41.290 --> 00:11:43.300 Then let's go here. 00:11:43.330 --> 00:11:44.860 Let's import the style. 00:11:44.890 --> 00:11:48.260 import style from style. 00:11:48.290 --> 00:11:55.740 Let's go here and make a new user container and it will be equal to this. 00:11:55.770 --> 00:12:00.288 Now we want to create another style for 00:12:00.488 --> 00:12:03.300 this and it will be style.userTextContainer 00:12:07.080 --> 00:12:09.980 let's go here, create userTextContainer 00:12:10.000 --> 00:12:13.640 and it will be this. 00:12:13.760 --> 00:12:16.994 Now what we want to do is make sure that 00:12:17.194 --> 00:12:19.500 we don't have any styles there. 00:12:19.530 --> 00:12:26.760 We can create one here and let's call this style, user. 00:12:26.800 --> 00:12:30.660 Let's go here and paste this here. Perfect. 00:12:30.690 --> 00:12:32.560 Now everything's looking the same, 00:12:32.580 --> 00:12:36.620 but our code doesn't contain a bunch of styles here that we don't need. 00:12:36.650 --> 00:12:40.740 Now let's start styling this Allison Becker's name. 00:12:40.770 --> 00:12:47.540 Let's go to this style and create style.username 00:12:50.200 --> 00:12:52.540 let's go here. 00:12:52.570 --> 00:12:55.980 Say that we're creating a new style called username. 00:12:56.010 --> 00:12:57.660 Now let's see what it needs. 00:12:57.690 --> 00:13:02.260 It needs a color of black. 00:13:02.290 --> 00:13:05.180 It also needs a font family. 00:13:05.210 --> 00:13:06.940 For this, we're going to use our 00:13:06.970 --> 00:13:11.260 getFontFamily function, which is going to be Inter. 00:13:11.290 --> 00:13:14.000 Then we're going to need the weight for it. 00:13:14.030 --> 00:13:17.520 It's going to be 500. 00:13:17.680 --> 00:13:20.780 We're going to need font size, going to be 16. 00:13:20.810 --> 00:13:23.020 Let's save this, go here. 00:13:23.050 --> 00:13:27.540 Now what we need is also the... 00:13:27.560 --> 00:13:28.760 Just doesn't seem bold enough. 00:13:28.790 --> 00:13:30.940 I'm just going to go in here. 00:13:30.970 --> 00:13:35.780 Maybe we should apply 600 and it will look more like the design. 00:13:35.810 --> 00:13:38.900 Now what we want to do is go here 00:13:38.930 --> 00:13:40.380 and make sure that we have 00:13:40.580 --> 00:13:42.220 a style for the location as well. 00:13:42.250 --> 00:13:44.740 Let's call it location style. 00:13:44.770 --> 00:13:47.965 Let's go to the styles and create location 00:13:48.165 --> 00:13:50.780 and let's see what styles this needs. 00:13:50.810 --> 00:13:52.551 Let's click here 00:13:52.751 --> 00:13:55.380 and let's copy this color. 00:13:55.410 --> 00:13:57.684 Color is going to be this 00:13:57.884 --> 00:14:01.140 and the font family is going to be get 00:14:01.170 --> 00:14:05.618 font family enter 400 weight 00:14:05.818 --> 00:14:11.020 and then the font size will be 12. 00:14:11.050 --> 00:14:13.420 Now let's take a look at this and it looks 00:14:13.450 --> 00:14:16.335 pretty similar to this design, 00:14:16.535 --> 00:14:19.220 but it does have a margin top. 00:14:19.250 --> 00:14:20.780 Let's see this. 00:14:20.810 --> 00:14:22.940 Margin top will be five. 00:14:22.970 --> 00:14:27.720 Let's say margin five. 00:14:27.800 --> 00:14:30.097 It seems to me like this is 00:14:30.297 --> 00:14:32.480 not really to the left side. 00:14:32.510 --> 00:14:35.900 Let's go and see if background color red 00:14:35.930 --> 00:14:38.344 would show us that it is really not 00:14:38.544 --> 00:14:40.620 aligned where we wanted it to be. 00:14:40.650 --> 00:14:44.620 What if we do text align left? 00:14:44.650 --> 00:14:47.440 It's technically should be already left-aligned. 00:14:47.470 --> 00:14:50.205 What we could also do is just do margin 00:14:50.405 --> 00:14:53.080 left and we can give it minus five or so, 00:14:53.110 --> 00:14:57.060 minus four, and it will be aligned correctly now. 00:14:57.080 --> 00:14:59.180 Let's just delete this. 00:14:59.210 --> 00:15:03.340 Now we have the correct setup. 00:15:03.370 --> 00:15:07.240 What we might want to do is 00:15:07.280 --> 00:15:08.971 make sure that this icon is 00:15:09.171 --> 00:15:11.100 of the color that we're expecting. 00:15:11.130 --> 00:15:14.121 Let's go here, copy this color, go 00:15:14.321 --> 00:15:17.640 to User Post and say that color is this. 00:15:18.400 --> 00:15:19.770 Then we also might need 00:15:19.970 --> 00:15:21.080 its size, which is 32. 00:15:21.110 --> 00:15:25.180 Let's say that size is 32 here. 00:15:25.210 --> 00:15:26.677 That's too much. 00:15:26.877 --> 00:15:27.960 What about 16? 00:15:27.990 --> 00:15:29.860 That might be too little. 00:15:29.890 --> 00:15:32.440 Let's do 24. 00:15:32.480 --> 00:15:33.540 Great. 00:15:33.570 --> 00:15:35.020 This looks better. 00:15:35.050 --> 00:15:37.752 Now, what we also want to do is make 00:15:37.952 --> 00:15:40.680 sure that we use this image given here. 00:15:40.760 --> 00:15:43.600 We're done with the header of this item, 00:15:43.630 --> 00:15:46.821 and we're going to need another view 00:15:47.021 --> 00:15:50.100 container here and we're going to use 00:15:50.130 --> 00:15:54.538 an image here and it's going to be 00:15:54.738 --> 00:15:59.240 with the source of props.image. 00:15:59.400 --> 00:16:01.980 Close this and we see the image right here. 00:16:02.010 --> 00:16:05.980 Let's make sure that this image is aligned in the center. 00:16:06.010 --> 00:16:10.760 Let's just call it image or postImage. 00:16:10.880 --> 00:16:14.705 Let's just go here and say that this 00:16:14.905 --> 00:16:17.680 should be aligned in center. 00:16:20.400 --> 00:16:24.060 Aligned item center. Great. 00:16:24.080 --> 00:16:28.720 It also has some margin top, which is 20. 00:16:29.400 --> 00:16:30.920 Perfect. 00:16:31.120 --> 00:16:37.440 Then we are also going to need to set up these items given here. 00:16:37.470 --> 00:16:40.600 We just see that actually we are going 00:16:40.630 --> 00:16:42.599 to need a margin top 00:16:42.799 --> 00:16:45.060 for every user container. 00:16:45.080 --> 00:16:47.441 We need to make sure that we 00:16:47.641 --> 00:16:49.380 have this defined here. 00:16:49.410 --> 00:16:52.660 Let's call it user post container. 00:16:52.690 --> 00:16:54.380 Let's go to our styles. 00:16:54.410 --> 00:16:56.800 Let's create user post container and say 00:16:56.830 --> 00:17:03.920 that the margin top should be 25 or 35, actually. 00:17:04.560 --> 00:17:06.250 Okay, so great. 00:17:06.280 --> 00:17:08.530 Now this looks way better and 00:17:08.560 --> 00:17:11.201 it is scrollable and we see that 00:17:11.401 --> 00:17:14.090 the stories stay up here like this. 00:17:14.120 --> 00:17:17.080 We might want to edit that actually 00:17:17.080 --> 00:17:18.821 and we're going to do it at the end 00:17:19.021 --> 00:17:20.760 of this lesson, so stay tuned for that. 00:17:20.790 --> 00:17:22.758 But for now, let's just finish 00:17:22.958 --> 00:17:24.530 up creating the user posts. 00:17:24.560 --> 00:17:26.560 Here we're going to need another view 00:17:26.590 --> 00:17:29.018 container and we're going to need 00:17:29.218 --> 00:17:31.740 view container for each of the items. 00:17:31.770 --> 00:17:33.920 First, it's going to be likes. 00:17:33.950 --> 00:17:37.058 We're going to need a fontawesome icon 00:17:37.258 --> 00:17:38.180 with a heart. 00:17:38.210 --> 00:17:39.690 Let's say that it should 00:17:39.890 --> 00:17:40.800 be a regular icon. 00:17:40.830 --> 00:17:42.569 This way it might not be 00:17:42.769 --> 00:17:44.090 completely filled in. 00:17:44.120 --> 00:17:45.657 Then we're also going 00:17:45.857 --> 00:17:47.560 to need a number of likes. 00:17:47.590 --> 00:17:51.247 Let's just create a text component here 00:17:51.447 --> 00:17:56.250 and say that we're going to use props.likes 00:17:56.280 --> 00:17:58.720 now we see this and we want this to be 00:17:58.750 --> 00:18:00.039 in a row, so we're going 00:18:00.239 --> 00:18:01.220 to have to style this. 00:18:01.250 --> 00:18:02.989 Let's say this is going 00:18:03.189 --> 00:18:04.880 to be flex direction row. 00:18:05.800 --> 00:18:07.603 We're also going to need 00:18:07.803 --> 00:18:09.180 some space from this. 00:18:09.210 --> 00:18:12.840 We are going to say 00:18:13.640 --> 00:18:18.669 that style here should be margin left 00:18:18.869 --> 00:18:22.720 something like, what is that? 00:18:23.720 --> 00:18:26.566 Given here, says it's around three, 00:18:26.766 --> 00:18:29.250 but I'm doubting it will be more. 00:18:29.280 --> 00:18:31.090 Okay, three suits it. 00:18:31.120 --> 00:18:32.541 Then we're going to need 00:18:32.741 --> 00:18:34.080 a color for both of these. 00:18:34.110 --> 00:18:36.544 Let's just copy this color, 00:18:36.744 --> 00:18:39.880 go here and make sure that we set it. 00:18:40.320 --> 00:18:43.320 We can do so here as well. 00:18:44.800 --> 00:18:47.040 Perfect. This looks way nicer and we're going 00:18:47.070 --> 00:18:51.400 to need some margin bottom from the image post. 00:18:51.430 --> 00:18:53.648 Let's just go here and make sure 00:18:53.848 --> 00:18:55.520 that we have margin bottom. 00:18:55.550 --> 00:18:56.762 It's going to be 20, 00:18:56.962 --> 00:18:58.700 so it should be margin vertical. 00:18:58.730 --> 00:19:00.960 Perfect. 00:19:01.920 --> 00:19:04.980 Then we're also going to need some 00:19:05.010 --> 00:19:07.632 margin to the left, so this is 00:19:07.832 --> 00:19:10.080 aligned well with the image. 00:19:10.280 --> 00:19:15.200 Let's say that our container will have 00:19:15.600 --> 00:19:18.611 a style and it will have a margin 00:19:18.811 --> 00:19:21.530 left and it will be equal to 10. 00:19:21.560 --> 00:19:23.810 This is perfect. 00:19:23.840 --> 00:19:26.307 Now what we want to do is do 00:19:26.507 --> 00:19:29.480 the same thing for these items here. 00:19:29.510 --> 00:19:30.960 Let's do that. 00:19:30.990 --> 00:19:34.420 Let's just copy this and paste it here. 00:19:34.450 --> 00:19:37.380 This is 27 points away. 00:19:37.410 --> 00:19:44.380 What we're going to say is that this will be margin left 27. 00:19:44.410 --> 00:19:45.567 We have to make sure 00:19:45.767 --> 00:19:46.840 that this is in a row. 00:19:46.870 --> 00:19:50.380 Let's say that flex direction is row here. 00:19:50.410 --> 00:19:52.010 This is looking better. 00:19:52.040 --> 00:19:56.090 Now we need FA message. 00:19:56.120 --> 00:19:58.900 Let's try a regular one again. 00:19:58.930 --> 00:20:00.940 Yep, it looks similar to this. 00:20:00.970 --> 00:20:03.005 Now we need the third item here, 00:20:03.205 --> 00:20:05.040 which is going to be a bookmark. 00:20:05.070 --> 00:20:09.050 Let's use FA bookmark here. 00:20:09.080 --> 00:20:12.140 Let's use the regular one as well 00:20:12.170 --> 00:20:15.187 and make sure that this will be using 00:20:15.387 --> 00:20:18.530 bookmarks and this will be using comment. 00:20:18.560 --> 00:20:20.010 Let's save this. 00:20:20.040 --> 00:20:23.557 This looks very much similar 00:20:23.757 --> 00:20:26.320 to this, I got to say. 00:20:27.840 --> 00:20:31.180 Now what we also need is this divider. 00:20:31.210 --> 00:20:35.593 What we can do is apply user post 00:20:35.793 --> 00:20:40.640 container border, bottom width of one. 00:20:40.720 --> 00:20:43.320 Then we can say that it has some padding. 00:20:43.350 --> 00:20:47.682 Let's say how much it needs and it 00:20:47.882 --> 00:20:51.250 will need padding bottom 20. 00:20:51.280 --> 00:20:52.420 Great. 00:20:52.450 --> 00:20:55.621 Let's see the color of this 00:20:55.821 --> 00:20:58.440 divider exactly is here. 00:20:58.520 --> 00:21:00.700 Let's just make 00:21:00.730 --> 00:21:04.764 sure that we mentioned that here, border, 00:21:04.964 --> 00:21:08.010 bottom color is going to be this. 00:21:08.040 --> 00:21:12.523 Now this looks so good, but we see that we 00:21:12.723 --> 00:21:16.900 cannot see all of the items present here. 00:21:16.930 --> 00:21:18.880 Let's take care of that right now. 00:21:18.910 --> 00:21:23.940 First of all, I don't want to see the vertical scroll bar that's here. 00:21:23.970 --> 00:21:26.240 We're going to have to go to app.js 00:21:26.270 --> 00:21:30.872 and make sure that vertical scroll 00:21:31.072 --> 00:21:34.290 indicator is set to false. 00:21:34.320 --> 00:21:35.518 Now when I scroll, it's not 00:21:35.718 --> 00:21:36.760 going to be visible anymore. 00:21:36.760 --> 00:21:38.640 What we want to do is also when we scroll, 00:21:38.670 --> 00:21:41.360 we don't want these user stories to just stay there. 00:21:41.390 --> 00:21:43.940 We want it to scroll with the page. 00:21:43.970 --> 00:21:46.313 We also want this scroll to have 00:21:46.513 --> 00:21:48.290 as much height as it needs. 00:21:48.320 --> 00:21:53.140 Right now we came to a very cool place, 00:21:53.170 --> 00:21:55.831 and this cool place is where I 00:21:56.031 --> 00:21:59.290 introduce you to list header component. 00:21:59.320 --> 00:22:01.200 Okay, so it's this component 00:22:01.230 --> 00:22:04.700 that determines what should be at the head of this list. 00:22:04.730 --> 00:22:08.700 We're going to grab these items that we have here. 00:22:08.730 --> 00:22:11.810 We're going to put it in a React fragment, 00:22:11.840 --> 00:22:15.320 an empty container, and we're going to paste this here. 00:22:15.350 --> 00:22:18.020 We're going to save that. 00:22:18.050 --> 00:22:20.220 Right now you will see that this is 00:22:20.250 --> 00:22:26.980 totally scrollable and this is presented as the header of this list. 00:22:27.010 --> 00:22:30.000 Basically, we just used one flat list 00:22:30.030 --> 00:22:32.548 to show all of the items here and it's 00:22:32.748 --> 00:22:35.000 totally scrollable and it doesn't use 00:22:35.030 --> 00:22:37.247 a scroll view because the flat list 00:22:37.447 --> 00:22:39.780 comes with its own scrolling capability. 00:22:39.810 --> 00:22:41.940 It's a virtualized list. 00:22:41.970 --> 00:22:44.740 If I actually try to place this in a 00:22:44.770 --> 00:22:48.810 scroll view, technically I should get an error which 00:22:48.840 --> 00:22:54.020 says the virtualized list should never be nested in the scroll views. 00:22:54.050 --> 00:22:56.538 Just don't do this because the flat list 00:22:56.738 --> 00:22:58.840 itself will allow you to set the list 00:22:58.870 --> 00:23:00.097 header component, 00:23:00.297 --> 00:23:02.480 which I just made our list header 00:23:02.510 --> 00:23:04.918 components is these two items here, 00:23:05.118 --> 00:23:07.120 and then set the main list here. 00:23:07.150 --> 00:23:09.280 You can also have a list 00:23:09.320 --> 00:23:11.910 footer component if you want this to, 00:23:12.110 --> 00:23:13.940 but we don't need to do that. 00:23:13.960 --> 00:23:17.700 Great. Now we have our flat list set up, 00:23:17.730 --> 00:23:23.980 but what we're not doing is the infinite scrolling behavior. 00:23:24.010 --> 00:23:27.570 In the next video, we're going to discuss how to handle that. 00:23:27.600 --> 00:23:31.120 Stay tuned and come back to the video. You're doing so great. 00:23:31.120 --> 00:23:33.360 Thank you so much and I'll see you in the next one.