1
00:00:01,140 --> 00:00:02,940
Looks like our app generation is complete.

2
00:00:03,020 --> 00:00:12,940
So going to change into that tracks directory then do an npm install for react navigation and then after

3
00:00:12,940 --> 00:00:20,510
that's done installing all startup might react native bundler with a quick NPM start all right.

4
00:00:20,600 --> 00:00:26,050
And there we go so once this is open as usual if you're using a physical device don't forget to scan

5
00:00:26,050 --> 00:00:27,010
that QR code.

6
00:00:27,010 --> 00:00:31,750
Otherwise my case I'm gonna open everything up on Android in Iowa simulators just you can see what I'm

7
00:00:31,750 --> 00:00:33,490
doing there easily.

8
00:00:33,500 --> 00:00:37,960
OK so now we understand how we're going to essentially stitch all these different screens together in

9
00:00:37,960 --> 00:00:38,490
this video.

10
00:00:38,500 --> 00:00:42,940
We're going to go through a little bit of busy work and essentially set up our project to have all these

11
00:00:42,940 --> 00:00:47,480
different screens and figure out how to use these different navigators to join them together.

12
00:00:48,070 --> 00:00:53,290
So a first begin by creating some scaffolding for all these different screen elements so to get started

13
00:00:53,380 --> 00:00:56,650
I can open up my code editor inside the track's directory.

14
00:00:56,650 --> 00:01:02,980
I've already started it up ahead of time so here's my newly generated project then inside of my root

15
00:01:02,980 --> 00:01:07,430
project directory I'm going to make a new folder as usual called RC.

16
00:01:07,840 --> 00:01:10,960
Then inside of there I'll make a new folder called screen's

17
00:01:14,310 --> 00:01:19,210
so inside of screens we're gonna create a scaffold or kind of a placeholder for every different one

18
00:01:19,210 --> 00:01:20,010
these screens.

19
00:01:20,080 --> 00:01:21,100
Six in total.

20
00:01:21,250 --> 00:01:23,310
So let's get to it a little bit of typing here.

21
00:01:23,800 --> 00:01:25,710
So inside of screens I'll make a new file.

22
00:01:25,810 --> 00:01:32,030
The first one will be our sign up screen I'll zoom in just you can see these file names very easily

23
00:01:33,200 --> 00:01:37,400
I'll then make a sign in screen.

24
00:01:37,440 --> 00:01:42,750
Notice how in keeping the in and up inside of sign and sign up lowercase just makes life a little bit

25
00:01:42,750 --> 00:01:45,230
easier to keep track of all.

26
00:01:45,230 --> 00:01:46,320
Then do my.

27
00:01:46,430 --> 00:01:52,740
How about account screen then we'll do our three different track screens.

28
00:01:52,770 --> 00:02:06,090
So we've got track create screen we've got our track list screen and then finally we've got our track

29
00:02:06,210 --> 00:02:09,790
detail screen.

30
00:02:09,820 --> 00:02:13,210
So there's are six different files for each of our different screens.

31
00:02:13,210 --> 00:02:17,550
So now we're gonna write out a little bit of boilerplate just inside of one file and then copy paste

32
00:02:17,550 --> 00:02:20,970
it all around and just change a couple of variables here and there.

33
00:02:21,060 --> 00:02:27,450
So I'll begin with account screen just because that's the first file inside of your SO at the top we're

34
00:02:27,450 --> 00:02:31,650
gonna put together a little bit of boilerplate for a component like I said just copy paste it around

35
00:02:32,280 --> 00:02:36,930
so I'll do a quick import on react from react.

36
00:02:37,080 --> 00:02:48,970
I'll do a quick import of view and style sheet and text from React Native I'll then make my account

37
00:02:49,240 --> 00:02:52,920
screen as usual inside there.

38
00:02:52,920 --> 00:03:00,570
Right now I'll just return a piece of text and say account screen.

39
00:03:00,740 --> 00:03:05,240
I'm also gonna put some styling on this text element just to make sure it's very easily visible.

40
00:03:05,300 --> 00:03:09,620
I'll do a direct styled right on here just because I really expect we're not gonna have this text element

41
00:03:09,620 --> 00:03:10,920
for very long.

42
00:03:10,920 --> 00:03:15,030
So I gonna give the thing a font size of like about 48.

43
00:03:15,090 --> 00:03:19,030
Just make it really nice and large I'll then create my style sheet

44
00:03:22,850 --> 00:03:26,790
and I'll do my expert default account screen.

45
00:03:26,850 --> 00:03:31,080
Now one of the change I going to do very quickly I'm going to change the text inside that text element

46
00:03:31,080 --> 00:03:36,110
to be identical to the name of my component and the default expert down here as well.

47
00:03:36,160 --> 00:03:42,810
Now I've got three instances of account screen get so going to save this file now I'm going to select

48
00:03:42,810 --> 00:03:47,190
everything inside of here and then I'm going to go through these five other files inside the screens

49
00:03:47,190 --> 00:03:50,360
directory and I'm gonna paste the exact same code.

50
00:03:50,460 --> 00:03:59,500
So here's sign and screen I'll paste save sign up I'll paste and save I'll check create I'll paste and

51
00:03:59,500 --> 00:04:09,070
save track detail and track list so there's all six.

52
00:04:09,150 --> 00:04:12,900
Now we're gonna go through each of these additional five files and just update a couple of different

53
00:04:12,900 --> 00:04:19,560
variables so I'll start first with sign and screen because the name of the component the text element

54
00:04:19,560 --> 00:04:24,810
right there or the text inside the text element and the export right here are all the exact same text

55
00:04:25,020 --> 00:04:30,940
we can actually change all three these things very quickly and easily if you're making use of U.S. code

56
00:04:31,150 --> 00:04:36,730
you can double click on Account screen right here to select it and then if you're on Mac OS hit command

57
00:04:36,790 --> 00:04:43,750
D or if you're on Windows hit I believe it is control D by default if you hit that twice it will do

58
00:04:43,780 --> 00:04:48,200
a multi select on the account screen piece of text.

59
00:04:48,340 --> 00:04:53,090
So now we can update all three instances at the same time just to save ourselves a little bit of time.

60
00:04:53,160 --> 00:04:59,490
So going to change all three inside of sign on screen to sign in screen I'll save the file.

61
00:04:59,500 --> 00:05:07,080
Notice I've got one two and three I'll close it all then go to my sign up screen so I'll do another

62
00:05:07,080 --> 00:05:13,320
multi select I'll do sign up screen and save it.

63
00:05:13,510 --> 00:05:25,620
I'll do my track create screen and save it I'll do my track detail.

64
00:05:25,710 --> 00:05:27,990
There we go.

65
00:05:28,100 --> 00:05:32,740
And then finally my track list okay.

66
00:05:32,770 --> 00:05:34,390
So that should be all six.

67
00:05:34,390 --> 00:05:38,050
I know there was a little pain but hey we've got them all put together and now we don't have to do a

68
00:05:38,050 --> 00:05:42,700
bunch of copy pasting or rewriting of this boilerplate in this application again except for any additional

69
00:05:42,700 --> 00:05:44,670
components we end up having to make.

70
00:05:44,680 --> 00:05:44,880
OK.

71
00:05:44,890 --> 00:05:49,600
So we've now got all six of our screens but together it's now the last thing I'm going to do is go back

72
00:05:49,600 --> 00:05:55,980
to my app dot J.S. file as usual going to select everything inside of here and delete it and then we're

73
00:05:55,980 --> 00:06:00,990
going to for right now just write out our six different imports for each of those different screens.

74
00:06:01,110 --> 00:06:05,990
We're not going to worry about showing anything actually on the screen of our actual device just yet.

75
00:06:06,030 --> 00:06:09,620
Right now let's just write out our import statements just to be done with them.

76
00:06:09,690 --> 00:06:18,120
So inside of here I'm going to do an import account screen from source screens account screen and I'm

77
00:06:18,120 --> 00:06:23,670
going to duplicate that down five times so I should have it six times total.

78
00:06:23,900 --> 00:06:28,520
And then once again I'm going to use some multi select to get account screen right there and account

79
00:06:28,520 --> 00:06:32,840
screen right there on the right hand side on the same line and I'll update each of these one by one

80
00:06:32,840 --> 00:06:34,120
for the different files.

81
00:06:34,190 --> 00:06:41,890
So sign and screen sign up screen track create screen

82
00:06:44,600 --> 00:06:49,910
track detail screen and track list screen.

83
00:06:49,910 --> 00:06:50,460
OK.

84
00:06:50,540 --> 00:06:51,820
And that's it.

85
00:06:51,860 --> 00:06:56,090
So I know there's a lot of typing a lot of file creation but I think we've got everything put together

86
00:06:56,150 --> 00:06:58,470
like I said definitely saved ourselves some time.

87
00:06:58,490 --> 00:07:03,580
So as usual very quickly just scan down here make sure you don't have any import listed twice.

88
00:07:03,590 --> 00:07:05,240
Same thing over here on the right.

89
00:07:05,600 --> 00:07:10,260
And then make sure that you've got the your six different files inside the screens directory.

90
00:07:10,260 --> 00:07:10,430
OK.

91
00:07:10,460 --> 00:07:12,050
So everything is looking pretty good to me.

92
00:07:12,080 --> 00:07:13,390
So I'll take a quick pause right here.

93
00:07:13,410 --> 00:07:17,930
When come back the next video we're going to start to stitch all these different screens together and

94
00:07:17,930 --> 00:07:21,250
try to navigate between them with all these different navigator objects.

95
00:07:21,350 --> 00:07:23,690
So quick pause and I'll see you in just a minute.