WEBVTT 00:02.840 --> 00:09.620 Okay, we have our list of movies displayed there, but it's not really that amazing here. 00:09.620 --> 00:13.940 It's just a of the screen and it's hard to read. 00:13.940 --> 00:15.560 And also we have that message here. 00:15.560 --> 00:22.880 So what we need to do, basically I will clean up a little bit here and we'll add some styles, so to 00:22.880 --> 00:24.260 make it a little bit better. 00:24.260 --> 00:26.900 So we have a message here, virtualized list. 00:26.900 --> 00:32.630 I haven't mentioned that before, but basically what we what is happening here is a missing keys for 00:32.630 --> 00:33.080 items. 00:33.080 --> 00:39.830 So make sure to specify a key property on each item to provide a custom assumption. 00:39.830 --> 00:47.810 So what is happening here is that whenever we do a list in React, we need to provide a key and key 00:47.840 --> 00:48.920 needs to be unique. 00:48.920 --> 00:56.240 Normally from coming from our database like movies, we will have an ID so we can say key ID and that 00:56.240 --> 00:57.800 will be unique so we can say it. 00:57.800 --> 01:04.110 But in the React Native, this key is not really working like like it is working in the web. 01:04.110 --> 01:09.180 So what we need to do is we need to provide another property for a flat list. 01:09.180 --> 01:16.800 It is key extractor and then we will have two things. 01:16.800 --> 01:20.970 So first thing will be item and another one will be index. 01:21.870 --> 01:24.660 And that's going to be our function here. 01:24.660 --> 01:30.660 And we can specify what would we, we would like to use as a key for our list. 01:30.660 --> 01:32.220 So I could use index. 01:32.220 --> 01:36.090 I know index will be integer is growing, so it will be unique. 01:36.090 --> 01:41.550 So I can do index here and then I can do to string. 01:41.580 --> 01:43.050 It doesn't really matter that much. 01:43.080 --> 01:44.070 It needs to be unique. 01:44.100 --> 01:50.010 You can also use the item ID or whatever you like so you can go here, save it. 01:51.290 --> 01:53.300 And you can see the message is gone. 01:53.300 --> 01:55.970 So there is no errors anymore or warnings. 01:55.970 --> 01:57.740 And we still have that list. 01:57.890 --> 02:05.810 So what I could do is basically I could remove that key and it's still all the same. 02:05.810 --> 02:07.040 So it's clean. 02:07.040 --> 02:12.950 Then it's a little bit different way how you provide a keys in React Native. 02:12.950 --> 02:14.150 So this is done. 02:14.150 --> 02:19.610 What I would like to do is to style it a little bit because it's small, it's off the screen so it's 02:19.610 --> 02:20.180 hard to read. 02:20.180 --> 02:26.030 So what we will do in this video, we'll actually add some styling to it and some more structure. 02:26.030 --> 02:32.990 So instead of rendering just a text, what I can do is I can render a view. 02:36.110 --> 02:39.560 So inside that view, I will also need to import it. 02:40.490 --> 02:43.730 So I have a view already there, so that's good. 02:43.820 --> 02:49.220 And then inside I can have my text there. 02:50.450 --> 02:58.100 So that will give me an opportunity to work with our styles so I can do styles here and then I will 02:58.100 --> 03:06.320 do style and then I can do item and I will have another style here and I will prepare the styles in 03:06.320 --> 03:07.100 a second. 03:07.820 --> 03:12.140 So style I will do item text. 03:13.670 --> 03:17.630 So, so we have the container here that we don't really use. 03:17.630 --> 03:19.190 So I will have item. 03:21.110 --> 03:26.210 And then another one will be item text like this. 03:26.750 --> 03:32.330 So you can see here I have a placeholder I assign them into here. 03:32.330 --> 03:38.720 So what I can do is I can, uh, write some styles there so I can say flex. 03:39.290 --> 03:40.280 It's going to be one. 03:40.290 --> 03:42.830 Actually, I will go, I will go here. 03:42.830 --> 03:50.060 So flex one, then I can do padding and I will push it a little bit. 03:50.060 --> 03:50.690 Ten. 03:50.990 --> 03:53.840 I can do height, so. 03:56.160 --> 03:58.560 I will make it 50 each. 04:03.390 --> 04:04.230 Uh, we. 04:04.230 --> 04:06.090 I miss a column here. 04:06.090 --> 04:16.050 And then we have also, we can do background color like this, and then I can do hash and I will have 04:16.050 --> 04:20.550 that dark gray color here and can text. 04:20.550 --> 04:22.140 I can do color. 04:22.380 --> 04:25.200 So that will be my background color for an item. 04:25.200 --> 04:27.690 And this one will be color of a font. 04:27.690 --> 04:37.860 So I will do white, so f, f, f, and then I can also do font size and I will go for 24. 04:37.860 --> 04:44.400 So I have a basic styling here and we have some problems here. 04:44.400 --> 04:48.720 I think styles and that's supposed to be styles. 04:53.950 --> 04:57.940 Because this is the name of a variable here, and I have that here. 04:57.940 --> 05:00.220 So you can see Titanic is much bigger. 05:00.220 --> 05:06.100 And then we have Avatar here and we can actually remove the container. 05:06.100 --> 05:09.640 I don't know if we we have on on The view here. 05:09.640 --> 05:11.110 We have the size container. 05:11.110 --> 05:12.670 So I can remove it for now. 05:13.030 --> 05:15.010 And you can see it's not going to be squeezed. 05:15.010 --> 05:20.890 So we have this one semi-transparent, a kind of so we have that nice and big. 05:20.890 --> 05:25.150 So it will be clickable then it's white and we have that background there. 05:25.150 --> 05:27.040 So at the moment we have that list. 05:27.040 --> 05:29.080 So what else can we do? 05:29.080 --> 05:30.940 So we have a flat list here. 05:30.940 --> 05:34.750 What I would like to do is I would like to have some kind of logo there. 05:34.750 --> 05:38.020 And a similar way as we had it on our web view. 05:38.020 --> 05:41.290 But this time I'm not going to style it from scratch with the fonts. 05:41.290 --> 05:44.080 You can still do it in the same way as we've done it with the web. 05:44.080 --> 05:50.830 But what I will do is I simply kind of hack it and I have a logo here, which is, as you can see, 05:50.830 --> 05:52.450 the same logo as we had it there. 05:52.450 --> 05:57.080 But what I did is I went in web application and I just screenshot it. 05:57.080 --> 06:01.010 So I will have the same logo here, but this one it will be PNG. 06:01.160 --> 06:04.640 So what I can do is that I can actually display a PNG here. 06:04.640 --> 06:08.630 So image and then we'll go source. 06:10.400 --> 06:12.890 And then inside will do require. 06:16.220 --> 06:18.260 And then we can have a part here. 06:18.350 --> 06:29.960 So we need to go up one folder and then I will go to assets and inside I will go for Amor underscore 06:30.650 --> 06:34.490 like movie rater and then logo PNG. 06:34.940 --> 06:36.590 So I have that. 06:38.430 --> 06:46.260 Then I can actually I can close it here and then I can add extra style. 06:46.890 --> 06:52.350 And here we can have another object with some styles. 06:52.410 --> 06:54.090 I can do with. 06:57.210 --> 07:00.840 That's gonna be 100%. 07:02.730 --> 07:08.070 I will do height and that's going to be 135. 07:08.670 --> 07:10.920 And I can do padding. 07:13.350 --> 07:18.050 Top of 30, so we'll push it from the top bar. 07:18.060 --> 07:27.990 What I can also do here is specify resize mode and resize mode will do contain 07:30.540 --> 07:31.020 like this. 07:31.020 --> 07:32.550 So if I will save it now. 07:36.320 --> 07:38.120 So kind of find image. 07:38.120 --> 07:42.980 What I need to do is I will need to import image here from React Native. 07:44.920 --> 07:52.330 And you can see here I have my logo displayed there and then I have a little bit here, a back and then 07:52.330 --> 07:53.110 I have a list. 07:53.110 --> 07:54.220 It's not perfect. 07:54.250 --> 08:00.980 We'll work on this later on, but at the moment it is readable, so we have something to work with. 08:01.000 --> 08:06.790 So we have our list of the movies and that's actually coming dynamically from our database. 08:06.790 --> 08:10.330 So our application is starting to get a shape.