1 00:00:00,930 --> 00:00:05,680 We're now able to configure our image detail component based upon some prop that is passed in. 2 00:00:05,700 --> 00:00:09,570 So now we need to figure out how we can also show an image inside of here as well. 3 00:00:09,570 --> 00:00:12,430 Also depending upon some configuration option or prop. 4 00:00:12,870 --> 00:00:19,160 Now hopefully right before this video you saw another lecture where there is a images dot zip file. 5 00:00:19,320 --> 00:00:21,240 So here is that file I have right here. 6 00:00:21,330 --> 00:00:24,060 If you didn't download this file please pause this video. 7 00:00:24,060 --> 00:00:27,140 Go back to the previous lecture and download that zip. 8 00:00:27,150 --> 00:00:32,130 This has three different images that we're going to want to show inside of our component. 9 00:00:32,130 --> 00:00:32,420 All right. 10 00:00:32,450 --> 00:00:36,150 So I'm going to extract this file I just double clicking on it. 11 00:00:36,180 --> 00:00:41,940 If you're on Mac OS if you're on Windows you can double click on it and then hit extract here once we 12 00:00:41,940 --> 00:00:42,970 have that folder. 13 00:00:43,080 --> 00:00:48,660 We're then going to open it up in drag and drop all three of those images into the assets directory 14 00:00:48,660 --> 00:00:49,890 of our project. 15 00:00:50,100 --> 00:00:53,640 This assets directory right here is where we put any static content. 16 00:00:53,640 --> 00:00:58,430 So like images that don't change we want to use inside of our application. 17 00:00:58,500 --> 00:00:59,700 So I'm going to open up that folder 18 00:01:03,040 --> 00:01:11,970 years my assets folder and I'll drag and drop beach or E and mountain inside there all right now all 19 00:01:11,980 --> 00:01:13,420 closed assets. 20 00:01:13,530 --> 00:01:14,800 And that other folder. 21 00:01:14,930 --> 00:01:19,230 So now inside of your code editor you should be able to open up that assets directory and see beech 22 00:01:19,350 --> 00:01:21,680 forest mountain OK. 23 00:01:21,800 --> 00:01:26,660 So like I said we now want to make sure that we can show an image inside of our image detail. 24 00:01:26,810 --> 00:01:30,290 We're going to eventually want to customize exactly which image we show. 25 00:01:30,290 --> 00:01:35,390 But for right now let's just hard code exactly one image that will be shown inside of all copies of 26 00:01:35,420 --> 00:01:41,030 image detail just we can first figure out how to show an image and then later on we will fix it up to 27 00:01:41,030 --> 00:01:42,040 accept this. 28 00:01:42,170 --> 00:01:45,290 Which image to show as a prop instead OK. 29 00:01:45,300 --> 00:01:51,180 So to get started inside of my image detail file I can go to my import statement up here and I'm going 30 00:01:51,180 --> 00:01:57,240 to import a new primitive component called image then inside of my component itself. 31 00:01:57,240 --> 00:02:03,210 I'm going to wrap the existing text with a view element as well as usual don't forget to clean up that 32 00:02:03,210 --> 00:02:06,750 semicolon at the end of text then right above it. 33 00:02:06,750 --> 00:02:10,130 I'm going to place a copy of the image element. 34 00:02:10,230 --> 00:02:12,060 This is another self closing element. 35 00:02:12,120 --> 00:02:17,470 So we're gonna use a self closing tag then to specify what image we want to show we're going to pass 36 00:02:17,470 --> 00:02:24,990 in an S Sumi source property in the browser you might be used to using image elements with a S R C property 37 00:02:25,200 --> 00:02:26,000 with React Native. 38 00:02:26,010 --> 00:02:30,060 It's the full word source instead than inside of here. 39 00:02:30,080 --> 00:02:36,470 We're going to pass a required statement this requires statement is going to provide a path to the image 40 00:02:36,500 --> 00:02:37,980 that we want to show. 41 00:02:38,370 --> 00:02:42,860 It's very much like our import statements we've written is going to be a relative path. 42 00:02:42,950 --> 00:02:45,890 So we need to make sure we provide a relative path from our image. 43 00:02:45,890 --> 00:02:46,460 Detail. 44 00:02:46,460 --> 00:02:51,440 That's a file that we're in right now up into the assets directory and then select one of these three 45 00:02:51,440 --> 00:02:58,130 different pictures so to get over there we're gonna do a dot dot slash remember that goes up one directory 46 00:02:59,360 --> 00:03:06,980 then dot dot slash again that takes me up to my root project directory will then go into assets and 47 00:03:06,980 --> 00:03:14,070 then we'll select the beach dot JP image to beach dot JP G OK. 48 00:03:14,080 --> 00:03:19,720 So now we can save this and if we flip back over and navigate to the image screen once again we'll see 49 00:03:19,720 --> 00:03:24,050 three copies of the beach image appear perfect OK. 50 00:03:24,110 --> 00:03:29,990 So this is how we show an image that's been saved into our local project eventually we're going to want 51 00:03:29,990 --> 00:03:33,870 to show an image that we've pulled from some source online as well. 52 00:03:33,920 --> 00:03:37,410 Doing that requires just a slightly different setup than what we have right here. 53 00:03:37,430 --> 00:03:38,810 Very slightly different. 54 00:03:38,810 --> 00:03:40,360 We'll figure out how to do that later on. 55 00:03:40,400 --> 00:03:45,920 But right now this is how we show a image that's been saved into our assets Directory OK. 56 00:03:45,930 --> 00:03:49,140 So now that we understand how to show an image let's take another pause right here. 57 00:03:49,200 --> 00:03:53,310 When we come back on the next video we're gonna make sure that when our image screen shows the image 58 00:03:53,310 --> 00:03:59,610 detail it passes down another prop called image or maybe image source or something like that which will 59 00:03:59,610 --> 00:04:05,160 be a path to the image that each of these image details should show on the screen so quick pause we'll 60 00:04:05,160 --> 00:04:06,540 take care of that in the next video.