1
00:00:00,840 --> 00:00:04,560
All right my friends in this video we're gonna have a lot of fun trying to put together this kind of

2
00:00:04,560 --> 00:00:07,490
structure right here that's going to join together all of our screens.

3
00:00:08,000 --> 00:00:11,560
So I'm gonna flip back over to my editor I'm inside my apt.

4
00:00:11,610 --> 00:00:14,020
J.S. file to get started at the very top.

5
00:00:14,030 --> 00:00:18,980
I'm going to import react from react because we're going to eventually write out some jazz sex inside

6
00:00:18,980 --> 00:00:26,060
of here and then I'm going to import a couple of different things from the react navigation navigation

7
00:00:26,180 --> 00:00:28,330
no navigation There we go.

8
00:00:28,370 --> 00:00:33,370
LIBRARY SO WE'RE GOING TO GET THE create app container function.

9
00:00:33,370 --> 00:00:38,060
Remember that's going to take some navigator object and essentially just create a component out of it.

10
00:00:38,110 --> 00:00:42,040
Then after that we're going to import that create functions for the three different navigators that

11
00:00:42,040 --> 00:00:45,610
we're trying to use in total we're trying to use Switch.

12
00:00:45,730 --> 00:00:51,130
Bottom tab and stack it's going to import three functions to create each of those.

13
00:00:51,130 --> 00:00:57,820
So create stack navigator create bottom tab navigator

14
00:01:00,740 --> 00:01:04,520
and create switch navigator.

15
00:01:04,530 --> 00:01:08,610
Now I know all the text inside this file is kind of faded out right now which is probably quite annoying.

16
00:01:08,710 --> 00:01:12,220
But as I start to use all these different variables they're all going to pop in and you'll be able to

17
00:01:12,220 --> 00:01:14,420
see them very easily.

18
00:01:14,470 --> 00:01:19,560
OK so now we're gonna start to write out our different navigators so the very first navigator we're

19
00:01:19,560 --> 00:01:21,900
going to put together is the top level.

20
00:01:21,900 --> 00:01:25,620
We're then going to kind of drill down and assemble each additional Navigator.

21
00:01:25,680 --> 00:01:30,320
So the first navigator we need is the switch navigator so let's write that out right now.

22
00:01:30,360 --> 00:01:35,760
So back inside of app dot J.S. after all of our different imports I'm going to write out const switch

23
00:01:36,000 --> 00:01:43,760
navigator is create switch navigator and we'll pass in our route configuration object.

24
00:01:43,920 --> 00:01:49,970
So inside of this object eventually going to have a bunch of different nested create navigator statements.

25
00:01:50,040 --> 00:01:54,180
So we're going to essentially assemble everything inside this object right here except for one very

26
00:01:54,180 --> 00:01:55,840
small exception.

27
00:01:55,980 --> 00:02:00,540
So inside of here we're going to get started by listing out the different things that this switch navigator

28
00:02:00,540 --> 00:02:01,500
is going to display.

29
00:02:02,250 --> 00:02:07,350
So the first thing that that switch navigator is going to display is essentially the authentication

30
00:02:07,350 --> 00:02:14,340
flow and the not authentication flow which we might refer to as like our main flow of screens.

31
00:02:14,430 --> 00:02:18,360
It's going to list those both out as different keys inside this object.

32
00:02:18,420 --> 00:02:22,770
Remember inside of all the navigators we've used so far inside this course we always did something like

33
00:02:23,070 --> 00:02:31,020
I don't know maybe track screen is hard like tracks is tracks screen but we don't have to list just

34
00:02:31,020 --> 00:02:35,220
screens on here we can actually have links to other navigators so we want to show.

35
00:02:35,340 --> 00:02:42,050
So I'm gonna put inside of here a link to our log and flow because I'm referencing another flow I'm

36
00:02:42,050 --> 00:02:46,460
going to use a convention of putting a lowercase character as opposed to the uppercase we've used for

37
00:02:46,460 --> 00:02:47,740
everything else.

38
00:02:47,780 --> 00:02:52,840
Now once again putting a lowercase character here has no effect on our application whatsoever.

39
00:02:52,910 --> 00:02:57,140
I just like to do this is kind of an indication to myself that hey I'm about to refer to kind of like

40
00:02:57,170 --> 00:03:03,710
another navigator or another grouping of different screens so whenever we enter into this log and flow

41
00:03:04,460 --> 00:03:11,120
we want to show a stack navigator that's gonna show either the sign up screen or sign and screen it's

42
00:03:11,120 --> 00:03:13,410
going to list those both out for our log and flow.

43
00:03:13,430 --> 00:03:20,940
So for log and flow if we ever go to our log and flow we're going to create a stack navigator that's

44
00:03:20,940 --> 00:03:33,260
going to toggle between our sign up screen or our sign in screen so now we're starting to see this nesting

45
00:03:33,260 --> 00:03:34,400
come together.

46
00:03:34,400 --> 00:03:39,560
So we're saying Okay we've got one flow when we enter this flow we're going to show the stack navigator

47
00:03:40,040 --> 00:03:46,390
and inside of this stack navigator we want to toggle between our sign up screen in our sign and screen.

48
00:03:46,470 --> 00:03:51,000
So now as a sibling to the log and flow the other thing that these steps switch navigator is going to

49
00:03:51,000 --> 00:03:53,960
control is our main flow.

50
00:03:54,160 --> 00:03:56,900
So that's gonna be all of these things down here.

51
00:03:56,940 --> 00:04:05,030
So for our main flow we always want to be showing a bottom tab navigator so to our main flow right here

52
00:04:05,040 --> 00:04:11,100
we're going to assign create bottom tab navigator.

53
00:04:11,310 --> 00:04:17,280
We're going to pass this thing its own set of routes it's now inside of here we want to have a choice

54
00:04:17,280 --> 00:04:23,130
between either a stack navigator that shows the track list or track detail our track creates or the

55
00:04:23,130 --> 00:04:28,140
account screen will first just put in the track create an account screen and then come back and handle

56
00:04:28,140 --> 00:04:30,970
those two in just a moment.

57
00:04:31,040 --> 00:04:37,490
So inside of our main flow we want to be able to show either our create track which will be create track

58
00:04:37,550 --> 00:04:41,540
screen or our account screen.

59
00:04:41,870 --> 00:04:48,900
So account is account screen it's gonna make sure yep that's we call it account screen and I realized

60
00:04:48,900 --> 00:04:52,670
I just made a very small typo right there I put create track it's actually track create so I'm going

61
00:04:52,670 --> 00:04:59,190
to fix that up very quickly so it's track create track create screen just you know in my original notes

62
00:04:59,190 --> 00:05:04,230
for this application I actually use the Noman creature of create track and like list track and so on

63
00:05:04,560 --> 00:05:08,610
and I eventually swapped it out to track create track detail and so on which I think makes a lot more

64
00:05:08,610 --> 00:05:10,560
sense OK.

65
00:05:10,590 --> 00:05:15,090
So we've now got this kind of first level of navigation put together we're saying that we've got a switch

66
00:05:15,090 --> 00:05:20,190
navigator that's gonna go between either our log and flow or the main flow and then in each of these

67
00:05:20,190 --> 00:05:23,250
flows we've got some different sub navigator.

68
00:05:23,370 --> 00:05:28,890
Now last we have to do is indicate that inside of our main flow in addition to having some bottom tabs

69
00:05:29,130 --> 00:05:35,660
for either our track creates or our account screen we also want to have a another navigator that can

70
00:05:35,660 --> 00:05:42,920
be a stock navigator and that's going to toggle between track list interact detail so back over here

71
00:05:44,020 --> 00:05:51,050
the first entry inside of our main flow I'm going to put a which we call this I don't like track list

72
00:05:51,170 --> 00:06:00,720
flow and we'll assign it a create stack navigator and then inside this object reading the list the different

73
00:06:00,720 --> 00:06:03,600
screens that are going to be controlled by the stack Navigator.

74
00:06:03,600 --> 00:06:09,810
So once again it's going to be first our track list and then the track detail so I'll put in track list

75
00:06:10,560 --> 00:06:22,510
is track loops casualty track list screen and then track detail is track detail screen and that's pretty

76
00:06:22,510 --> 00:06:28,680
much it so once again I know this is kind of a crazy process we're going through and it really is something

77
00:06:28,680 --> 00:06:33,020
that you just got to kind of tackle on your own at least one time to understand how to stitch together

78
00:06:33,090 --> 00:06:38,430
together these different navigators Well we've essentially gone from our diagram over here where we

79
00:06:38,430 --> 00:06:42,720
expressed how we want to have some form of navigation between all of our different screens and then

80
00:06:42,720 --> 00:06:47,260
reflected that inside of a nested router setup or nested navigator setup.

81
00:06:47,300 --> 00:06:52,410
So now our topmost navigator is the switch navigator so you actually get something to show up on the

82
00:06:52,410 --> 00:06:58,470
screen of our device just for right now at the very bottom of the file we'll do our classic export default

83
00:06:58,980 --> 00:07:05,520
with create app container and we'll pass in that top level switch Navigator.

84
00:07:05,730 --> 00:07:10,410
So now inside of our application we're going to first show the log and flow that will toggle between

85
00:07:10,470 --> 00:07:15,600
those two screens and then right now we don't have any way to toggle over to the main flow but we'll

86
00:07:15,600 --> 00:07:17,340
add that in just a moment.

87
00:07:17,340 --> 00:07:20,350
So right now let's just see this and see what we get.

88
00:07:20,350 --> 00:07:25,860
It's going to save this file and pull up my application.

89
00:07:25,890 --> 00:07:27,170
So here's our sign up screen.

90
00:07:27,180 --> 00:07:28,530
Very good.

91
00:07:28,530 --> 00:07:32,510
We don't really have like I said any way to get anywhere else inside of here right now.

92
00:07:32,550 --> 00:07:33,770
So let's take a quick pause.

93
00:07:33,780 --> 00:07:37,380
When we come back the next video we're gonna start to add in a couple of different elements to all these

94
00:07:37,380 --> 00:07:42,420
different screens to kind of navigate around and visit some of the other screens inside of our flow.

95
00:07:42,540 --> 00:07:44,660
So quick pause and I'll see you in just a minute.