1
00:00:01,080 --> 00:00:06,230
In this video we're going to create a new reusable component that we're going to call image detail.

2
00:00:06,300 --> 00:00:11,010
This image detail is going to be responsible for just showing one of these individual the old cards

3
00:00:11,010 --> 00:00:12,220
right here.

4
00:00:12,390 --> 00:00:13,110
Let's try this out.

5
00:00:13,130 --> 00:00:16,150
I going to flip back over my code Ed now instead of our code.

6
00:00:16,170 --> 00:00:21,840
Ed specifically inside the S.R. see directory we currently have a folder called screens inside there

7
00:00:21,840 --> 00:00:27,660
we have a bunch of different rack components that are meant to display a full screens worth of content.

8
00:00:27,690 --> 00:00:30,100
So in other words it's like one distinct component.

9
00:00:30,180 --> 00:00:35,420
We want this component and this component alone to be visible on a device.

10
00:00:35,460 --> 00:00:40,050
Any time that we want to make some kind of reusable component that we expect to reuse several times

11
00:00:40,050 --> 00:00:44,880
over we'll create it inside of a separate directory called simply components.

12
00:00:44,880 --> 00:00:49,800
So the idea here is that we're gonna have one set of real components called screens that show an entire

13
00:00:49,800 --> 00:00:53,170
screens worth of content like everything on the device.

14
00:00:53,350 --> 00:00:57,240
And we'll also have a collection of different components called simply components.

15
00:00:57,370 --> 00:01:01,410
And it's going to show just one little portion of what goes on on the screen.

16
00:01:01,410 --> 00:01:05,370
That might sound kind of confusing for right now but over time you're going to really come to learn

17
00:01:05,370 --> 00:01:09,480
the difference between a screen and a reusable component.

18
00:01:09,480 --> 00:01:09,750
OK.

19
00:01:09,780 --> 00:01:14,010
So inside my S.R. directory I'll make a new folder called components.

20
00:01:14,090 --> 00:01:18,390
So inside of here we're going to put all of our different reusable components that we want to show several

21
00:01:18,390 --> 00:01:20,730
times then inside there.

22
00:01:20,760 --> 00:01:27,440
I'll make a new file called Image detail dot J.S. so inside of here we're going to write out the same

23
00:01:27,440 --> 00:01:32,750
boilerplate that we've been using for all of our different screens rather than rewrite it all out from

24
00:01:32,990 --> 00:01:34,460
great detail from scratch.

25
00:01:34,460 --> 00:01:38,090
Right now we can just flip back over to our image screen.

26
00:01:38,390 --> 00:01:44,800
Do a quick select all and copy and then paste that inside of image detail like so.

27
00:01:44,860 --> 00:01:51,990
So I'm inside of image detail and I've got all that boilerplate inside of here we can then fix up the

28
00:01:52,110 --> 00:01:53,010
variable name here.

29
00:01:53,010 --> 00:01:58,740
So rather than creating a function called Image screen I'll call it image detail instead and I'll update

30
00:01:58,740 --> 00:02:00,930
the export default at the bottom as well.

31
00:02:02,550 --> 00:02:10,210
Then finally inside this text element I'm going to change it from Image screen to image detail all right.

32
00:02:10,240 --> 00:02:15,130
So we've now got a screen called Image screen and a component called Image detail.

33
00:02:15,280 --> 00:02:21,580
So now we want to try to show that image detail component several times or we want to show several copies

34
00:02:21,580 --> 00:02:23,780
of it inside of our image screen.

35
00:02:23,950 --> 00:02:28,520
So let's figure out how to do that to show one component inside of another.

36
00:02:28,570 --> 00:02:31,590
We're first going to go into the parent component file.

37
00:02:31,610 --> 00:02:35,510
In this case it's going to be the image screen.

38
00:02:35,550 --> 00:02:41,000
So here's my image screen inside up here we're going to import that component that we want to show several

39
00:02:41,000 --> 00:02:42,080
times.

40
00:02:42,080 --> 00:02:49,430
So at the top underneath my import from React Native I will import Image detail from and we have to

41
00:02:49,430 --> 00:02:52,800
write out a relative path to that component file.

42
00:02:52,880 --> 00:02:56,210
Right now our image screen file is inside the screens directory.

43
00:02:56,210 --> 00:03:01,790
So we have to go up one directory to s RC and into the components directory and then get the image detail

44
00:03:01,790 --> 00:03:03,140
file.

45
00:03:03,140 --> 00:03:08,690
So to do so we will write out dot dot slash to indicate that we want to go up one directory will then

46
00:03:08,690 --> 00:03:15,770
go into the components folder and get the image detail file.

47
00:03:15,860 --> 00:03:16,110
OK.

48
00:03:16,140 --> 00:03:19,710
So we've now imported the child into the parent.

49
00:03:19,710 --> 00:03:25,260
So now to show this child inside of the parent we're going to pretend that this image detail is just

50
00:03:25,260 --> 00:03:29,900
like those primitive elements that we've been making use of from the React Native library.

51
00:03:30,120 --> 00:03:36,820
So we can write out image detail inside of a set of JSA ex tags right now we're showing a single text

52
00:03:36,820 --> 00:03:42,100
element right here inside of image screen because we want to show multiple different image details remember

53
00:03:42,100 --> 00:03:45,260
we always have to return one single root element.

54
00:03:45,280 --> 00:03:51,240
So inside of you are going to place a view and then inside there I'm going to place several copies of

55
00:03:51,240 --> 00:03:51,750
my image.

56
00:03:51,750 --> 00:03:56,130
Detail that's a component that we just created and we want to reuse several times.

57
00:03:56,130 --> 00:03:58,140
So I'll do image detail.

58
00:03:58,170 --> 00:04:03,020
Notice I'm using a self closing tag here because I don't expect to have to pass anything into it.

59
00:04:03,170 --> 00:04:04,900
Then copy that down a couple of times.

60
00:04:04,970 --> 00:04:11,890
Like so now hopefully if we save this and test out our application we should see image detail appear

61
00:04:11,980 --> 00:04:15,990
four times so let's try that.

62
00:04:15,990 --> 00:04:23,460
I'll save it I'll flip back over I'll navigate to the image demo and I'll see image detail repeated

63
00:04:23,520 --> 00:04:25,140
four separate times.

64
00:04:25,140 --> 00:04:30,020
Perfect not to just do a little bit of a further test year and make sure that everything is really working

65
00:04:30,020 --> 00:04:31,100
correctly.

66
00:04:31,100 --> 00:04:34,450
Let's try putting some text inside of here besides image detail.

67
00:04:34,700 --> 00:04:42,210
It's all put in something like show image of forest then save that go back to the image demo screen

68
00:04:42,690 --> 00:04:44,670
and we'll see that new text repeated four times.

69
00:04:44,670 --> 00:04:46,450
Once again OK.

70
00:04:46,470 --> 00:04:47,730
So this looks pretty good.

71
00:04:47,760 --> 00:04:53,600
So we are now showing our image detail multiple times inside of one single parent element.

72
00:04:53,640 --> 00:04:59,310
So now we need to figure out how we can pass some props from the parent down to the child to customize

73
00:04:59,400 --> 00:05:04,010
how this child component displays itself and shows it to a user OK.

74
00:05:04,110 --> 00:05:06,570
So let's take care of that prop stuff in the next video.