WEBVTT 00:02.320 --> 00:02.830 Okay. 00:02.830 --> 00:08.020 In this video, I will show you how we can actually use some images inside our application. 00:08.020 --> 00:10.570 So it's very easy to do. 00:10.600 --> 00:18.850 What I did is I import one asset here so I have an image of an apple like this and I have it inside 00:18.850 --> 00:19.570 my assets. 00:19.570 --> 00:27.790 So what we need to do to display this, what I will do is I will inject a new element here inside The 00:27.790 --> 00:30.790 View and it will be an image. 00:30.790 --> 00:36.220 So we also need to import it from the React Native. 00:36.220 --> 00:38.170 We'll collapse it to have more space. 00:38.170 --> 00:42.220 So we have image and it's a self-closing tag so I can have it like this. 00:42.220 --> 00:47.140 So what we need to do here is we need to provide a source. 00:48.970 --> 00:52.480 Here and that will be curly brackets there. 00:52.480 --> 00:59.830 And then we will do something like require and then open parentheses and closing. 00:59.830 --> 01:04.120 And inside here, inside the quotes, we can actually have our path. 01:04.120 --> 01:07.960 So what I will need to do here is I'm inside the home. 01:07.960 --> 01:14.920 JS So what I need to do is I need to step out one folder up so it will be dot dot, and then I will 01:14.920 --> 01:20.020 go to assets and then I will pick my file. 01:20.020 --> 01:21.820 So I will pick it Apple. 01:23.490 --> 01:24.420 Jpeg. 01:27.000 --> 01:27.510 Like this. 01:27.510 --> 01:29.040 So if I will save it now. 01:31.940 --> 01:39.170 You can see something is here, but it's actually so big that I'm not able to see that completely. 01:39.170 --> 01:48.800 So what I can do is I can actually style style it so I can put some inline styles here, so styles style 01:48.800 --> 01:53.090 equal to and then we can have another object inside. 01:53.090 --> 01:54.680 So it will be double curly braces. 01:54.680 --> 02:02.450 And then I can do width, let's say 100 and height, 100 like this. 02:06.710 --> 02:08.690 And I have my apple here. 02:08.870 --> 02:13.160 What I could also do is I could style it different way. 02:13.160 --> 02:19.940 So if I would like to have it being able to stretch and to the entire width, what I could do is I could 02:19.940 --> 02:25.070 wrap this inside the quotes and then put a percentage. 02:25.070 --> 02:30.560 So let's say 100% and I would like to have it 250 pixels. 02:34.210 --> 02:36.220 And you can see it's a full width here. 02:36.220 --> 02:39.160 And then we have 250 pixels there. 02:39.160 --> 02:44.070 And if we have the flat list here, only the list is scrollable. 02:44.080 --> 02:48.370 As you can see here, this is kind of static image displayed there. 02:48.370 --> 02:52.600 So you can handle the styling, whatever you like. 02:52.600 --> 02:55.420 And the important part is the image. 02:56.020 --> 03:03.670 Another option will be a background image, if you like to have it like this so you can do image background. 03:08.390 --> 03:13.520 And then instead of image, we'll need to import this. 03:13.520 --> 03:16.190 But it's not self-closing tag. 03:16.190 --> 03:21.020 So what we'll need to do is we need to wrap something with that background image. 03:21.020 --> 03:23.330 So I will finish that here. 03:23.330 --> 03:27.950 So inside the background image, I will have my flat list here. 03:28.190 --> 03:38.180 So basically this is the same as we had it before, but then I will need to do 100%, for example. 03:44.520 --> 03:46.920 Uh, I misspelled the image background here. 03:46.920 --> 03:51.090 So it's an image back ground like this. 03:51.090 --> 03:52.380 So image background. 03:52.380 --> 03:55.560 I need to also update it here. 04:00.480 --> 04:02.040 And here. 04:07.840 --> 04:12.010 And then what I have is I have an image background here. 04:12.010 --> 04:18.160 And on top of that, whatever is in the inside, this tag and in our case, we have a flat list. 04:18.190 --> 04:22.810 You can see the background image is covering everything there. 04:22.810 --> 04:25.130 And I have on top of that my list. 04:25.150 --> 04:32.440 So you have a different way to display images and you can go to references to documentation to discover 04:32.440 --> 04:32.830 more. 04:32.830 --> 04:35.980 But basically you don't need to have a static images here. 04:35.980 --> 04:39.220 You can actually load them from the Internet as well. 04:39.220 --> 04:42.760 So they might be dynamic, uh, from here. 04:42.760 --> 04:46.540 So that will be the basics of images in React Native.