1
00:00:00,750 --> 00:00:02,450
In this video we're going to work on our next screen.

2
00:00:02,460 --> 00:00:03,390
So let's get to it.

3
00:00:03,450 --> 00:00:05,130
Let's take a look at a mockup.

4
00:00:05,220 --> 00:00:05,420
OK.

5
00:00:05,460 --> 00:00:07,130
So here's what we're going to try to build.

6
00:00:07,140 --> 00:00:10,740
I want to build three separate sections inside of one screen.

7
00:00:10,740 --> 00:00:15,300
Each individual section is going to show a little picture on the left hand side and then on the right

8
00:00:15,300 --> 00:00:18,200
hand side will be a single word to describe the picture.

9
00:00:18,210 --> 00:00:21,090
So for example the first one might show a picture of a forest.

10
00:00:21,090 --> 00:00:25,370
We'll show the text forest on the right then a beach and beach and a picture of a mountain.

11
00:00:25,380 --> 00:00:27,520
And the text mountain.

12
00:00:27,560 --> 00:00:32,360
Now this might seem like a very simple application but I want to demonstrate a very critical thing to

13
00:00:32,360 --> 00:00:33,870
understand about react.

14
00:00:33,980 --> 00:00:38,110
You see when we start to build this thing out there's a couple of different ways we could do it.

15
00:00:38,180 --> 00:00:42,290
The first easy way that you might think of would be to create a new screen which we've done several

16
00:00:42,290 --> 00:00:43,070
times now.

17
00:00:43,270 --> 00:00:48,720
And inside there just throw all the JSA X required to repeat those three elements three times.

18
00:00:48,800 --> 00:00:54,770
So we would end up with like three it's very similar looking blocks of J.S. X inside of this new screen

19
00:00:54,770 --> 00:00:55,900
component.

20
00:00:56,000 --> 00:01:01,640
Alternatively to save a little bit of code and save ourselves a little bit of effort we could instead

21
00:01:01,730 --> 00:01:08,660
create a separate component and then show that component three times on the single screen each time

22
00:01:08,660 --> 00:01:14,780
we show that component we could pass in some configuration options or props to customize how that component

23
00:01:14,780 --> 00:01:21,280
gets displayed so in other words we might create one new component called Image screen and then separately

24
00:01:21,310 --> 00:01:24,530
we might create a new component called Image detail.

25
00:01:24,910 --> 00:01:30,610
This image detail thing would be responsible for showing one of these individual cards that has a image

26
00:01:30,700 --> 00:01:32,970
and some text next to it now.

27
00:01:32,980 --> 00:01:37,630
Each of these image detail components would probably need to show a different image in some different

28
00:01:37,630 --> 00:01:38,690
piece of text.

29
00:01:38,950 --> 00:01:44,080
So we could customize how these different components are displayed by passing them some props from the

30
00:01:44,080 --> 00:01:50,040
image screen down to the image detail so let's give this a shot along the way you're going to learn

31
00:01:50,040 --> 00:01:56,340
a lot around making reusable components and passing down props to customize how they work.

32
00:01:56,340 --> 00:01:56,630
All right.

33
00:01:56,640 --> 00:02:01,770
So I'll flip backward my code Ed the first thing I'm going to do is create a new file inside my screens

34
00:02:01,770 --> 00:02:05,390
directory and I'm going to call this image screen.

35
00:02:05,460 --> 00:02:12,410
J.S. and inside of here we'll put together a little bit of boilerplate so let's say import react from

36
00:02:12,430 --> 00:02:20,800
react I'll import view text and style sheets from react native.

37
00:02:20,950 --> 00:02:28,590
I'll do a const image screen and for right now inside that function I would return just a little piece

38
00:02:28,590 --> 00:02:39,250
of text that says like image screen after that and create a style sheet.

39
00:02:39,450 --> 00:02:43,530
And then finally we will export default the image screen.

40
00:02:43,620 --> 00:02:43,890
OK.

41
00:02:43,920 --> 00:02:48,150
So again that's a little bit of boilerplate that we're going to get very used to writing out as we're

42
00:02:48,150 --> 00:02:51,960
going to essentially write that out for every single component we ever create.

43
00:02:51,960 --> 00:02:52,140
All right.

44
00:02:52,140 --> 00:02:57,150
Now remember if we want this to actually show up on our screen or inside of our application we need

45
00:02:57,150 --> 00:02:59,910
to wire that thing up to our app dot J.S. file.

46
00:03:00,030 --> 00:03:05,160
So as a little exercise I would like for you to try to wire up that new screen this image screen thing

47
00:03:05,160 --> 00:03:11,700
right here to our app dot J.S. file after connecting it to the app dot J.S. file tried to display a

48
00:03:11,700 --> 00:03:15,790
button to navigate to that new screen from the home screen.

49
00:03:15,810 --> 00:03:20,340
Zoe essentially duplicate the current button element that we have right here inside of our home screen

50
00:03:20,910 --> 00:03:25,290
and make sure that it navigates over to the new image screen that you have connected to this Navigator

51
00:03:26,070 --> 00:03:26,600
as usual.

52
00:03:26,610 --> 00:03:28,080
This is 100 percent optional.

53
00:03:28,080 --> 00:03:29,300
If you don't want to do this on your own.

54
00:03:29,340 --> 00:03:29,990
No problem.

55
00:03:30,000 --> 00:03:32,120
Just skip over to the next video.

56
00:03:32,130 --> 00:03:32,340
All right.

57
00:03:32,340 --> 00:03:34,790
So go ahead and give it a shot and I'll see you in just a minute.