1 00:00:00,930 --> 00:00:05,970 At present our image screen component is only passing a property called title down to each individual 2 00:00:06,000 --> 00:00:07,130 image detail. 3 00:00:07,170 --> 00:00:12,450 This prop is allowing our parent to configure a child component but we also want to make sure that our 4 00:00:12,450 --> 00:00:17,460 parent of image screen also can figures which image each of these should show as well. 5 00:00:17,550 --> 00:00:22,530 So we need to add in a second prop being passed from the parent down to each child. 6 00:00:22,590 --> 00:00:27,180 We're going to make sure that inside that additional prop we specify exactly what image to show. 7 00:00:27,240 --> 00:00:28,590 So let's get to it. 8 00:00:28,680 --> 00:00:32,140 We're gonna first begin inside of our image screen J.S. file. 9 00:00:32,150 --> 00:00:37,350 I'm gonna find each of my image detail elements right here and I'm going to add in a new prop to each 10 00:00:37,350 --> 00:00:38,180 one. 11 00:00:38,220 --> 00:00:42,810 Remember because this is a prop that you and I are adding in to a component we created. 12 00:00:42,930 --> 00:00:45,840 We can use any name of prop that we want. 13 00:00:45,840 --> 00:00:50,580 It's only for components created by other people or by React Native itself that we have to use some 14 00:00:50,580 --> 00:00:54,070 pre established prop name with a very specific spelling. 15 00:00:54,090 --> 00:00:58,500 So in this case I think that a prop name that makes sense would be like image source. 16 00:00:58,560 --> 00:01:02,630 This is like the image to use or the source of the image that should be used. 17 00:01:02,640 --> 00:01:08,670 This could just as easily bend something like image to use or image to show whatever else you want it 18 00:01:08,670 --> 00:01:09,100 to be. 19 00:01:09,120 --> 00:01:13,850 It just has to be a name that makes sense to you and other engineers are going to call it. 20 00:01:13,890 --> 00:01:16,010 Image source OK. 21 00:01:16,050 --> 00:01:20,990 So inside this thing we're going to provide a required statement to the image that we want this image 22 00:01:21,000 --> 00:01:22,530 detail to show. 23 00:01:22,560 --> 00:01:27,840 So once again we're gonna put in require and then a relative path to the image we want to show from 24 00:01:27,840 --> 00:01:29,630 our assets directory. 25 00:01:29,640 --> 00:01:38,530 So once again I'm going to go up one directory up another directory into assets and then I'll get forest 26 00:01:38,590 --> 00:01:39,760 dot JP. 27 00:01:44,020 --> 00:01:50,110 So now we can duplicate this prop down to the next two as well so we'll do a copy of just image source 28 00:01:50,830 --> 00:01:59,060 and paste it once and paste it twice we can then update the second image to instead show beach I'll 29 00:01:59,100 --> 00:02:03,970 do beach and then the last one to do mountain instead. 30 00:02:04,130 --> 00:02:04,370 All right. 31 00:02:04,370 --> 00:02:05,000 That looks good. 32 00:02:05,150 --> 00:02:06,640 I'm going to save this file. 33 00:02:06,860 --> 00:02:08,300 You'll notice that my code jumps. 34 00:02:08,300 --> 00:02:09,520 That's just my code for matter. 35 00:02:09,530 --> 00:02:12,590 Everything you see here is 100 percent equivalent to what you saw before. 36 00:02:12,650 --> 00:02:14,170 It's just formatted slightly differently. 37 00:02:15,210 --> 00:02:20,370 So now we can go into our image detail and we can receive this brand new prop that we've added in. 38 00:02:20,620 --> 00:02:26,830 So instead of image detail that new prop of image source should be inside of this props object rather 39 00:02:26,830 --> 00:02:28,120 than just accepting that on faith. 40 00:02:28,120 --> 00:02:33,650 However let's do a quick console log that props object just to make sure that's the case so do a console 41 00:02:33,650 --> 00:02:36,540 log of props right there and then save the file once again. 42 00:02:36,710 --> 00:02:38,900 Remember to see this console log actually run. 43 00:02:38,900 --> 00:02:42,450 We have to navigate to the image screen component inside our application. 44 00:02:42,450 --> 00:02:47,180 It's over here a go to image demo and I should be able to flip back over to my terminal which is where 45 00:02:47,180 --> 00:02:54,410 all of our all of our console logs appear and now we can see image source image source and image source. 46 00:02:54,410 --> 00:02:58,200 You'll notice that they have kind of strange values here of 3 4 and 5. 47 00:02:58,220 --> 00:02:59,540 That's totally fine. 48 00:02:59,540 --> 00:03:05,000 These values you see right here are essentially an identifier that's been added in things that require 49 00:03:05,000 --> 00:03:08,650 statement the identifier is pointing to some particular image. 50 00:03:08,990 --> 00:03:11,610 So the property name is definitely image source. 51 00:03:11,640 --> 00:03:16,970 We can essentially just believe that we are getting the correct image in here all right. 52 00:03:16,980 --> 00:03:18,730 So now back inside of our image detail. 53 00:03:18,840 --> 00:03:23,790 Now that we know that we've got that new prop inside of our props object we can use that as our source 54 00:03:23,790 --> 00:03:28,470 right here going off to the image rather than the hardcoded require statement. 55 00:03:28,470 --> 00:03:35,400 So I will delete that hard could require statement and replace it with perhaps dot image source again 56 00:03:35,490 --> 00:03:36,630 image source. 57 00:03:36,690 --> 00:03:42,160 We're using that because that's the name of the prop that we passed in from the parent Okay so let's 58 00:03:42,160 --> 00:03:45,490 save this and we can do a final test here. 59 00:03:45,550 --> 00:03:50,260 So back inside of my device I'll go to image demo and there we go. 60 00:03:50,260 --> 00:03:54,860 So we now created a separate reusable component and we used it three separate times. 61 00:03:55,060 --> 00:04:00,550 Each time we passed in a different set of props to customize how the component behaved we're going to 62 00:04:00,550 --> 00:04:06,040 use this prop system a incredible number of times throughout this course to customize child components 63 00:04:06,040 --> 00:04:07,330 that we create. 64 00:04:07,360 --> 00:04:09,810 It's now that we've got a better idea of how this prop system works. 65 00:04:09,850 --> 00:04:13,330 Let's take a quick pause right here and move on to our next subject in the next video.