1
00:00:00,720 --> 00:00:05,530
All right my friends regardless of whether you went through the express API set up with me or you went

2
00:00:05,530 --> 00:00:06,810
through the setup in the last video.

3
00:00:06,810 --> 00:00:11,890
At this point you should have a track server directory and you should be able to run NPM run Dev inside

4
00:00:11,890 --> 00:00:14,430
there and not see any error message appear.

5
00:00:14,470 --> 00:00:15,760
So if you're getting an error.

6
00:00:15,760 --> 00:00:20,460
Well we need to do a little bit of troubleshooting because he won't be able to work on our next application.

7
00:00:20,470 --> 00:00:25,630
Speaking of which let's start to generate our new React Native project for our next application which

8
00:00:25,630 --> 00:00:29,380
remember is still going to be this kind of track thing that we discussed previously.

9
00:00:30,130 --> 00:00:33,700
So to generate a new project I can open up a new terminal window.

10
00:00:33,700 --> 00:00:39,940
I'm going to go back to a workspace directory of sorts and then inside of here we'll do an NPR X Expo

11
00:00:39,970 --> 00:00:42,370
Seelye in it.

12
00:00:42,370 --> 00:00:49,000
And then the name of our project which I going to call simply tracks so as usual I'll be asked to select

13
00:00:49,000 --> 00:00:49,700
a template.

14
00:00:49,730 --> 00:00:54,010
I'm going to go blank and then we'll put in a name for our app as well.

15
00:00:54,510 --> 00:00:56,760
We'll just put in Trax okay.

16
00:00:56,790 --> 00:00:59,790
So that's going to start the installation process while that's going.

17
00:00:59,790 --> 00:01:03,860
I want to start to have a quick discussion about the design of our application.

18
00:01:03,970 --> 00:01:06,030
So we already took a look at all these different mockups.

19
00:01:06,030 --> 00:01:09,750
I'm not going to make you listen to me talk about them again but basically just remember we're going

20
00:01:09,750 --> 00:01:13,020
to a collection of different screens that we're trying to show the user.

21
00:01:13,020 --> 00:01:16,080
I want to think about how we're going to connect all these different screens together.

22
00:01:16,590 --> 00:01:20,430
So in total these are all the different screens I expect that we're going to have.

23
00:01:20,430 --> 00:01:24,900
We've got the authentication screens we've got something to list out all the different tracks that have

24
00:01:24,900 --> 00:01:31,860
been created a screen to focus in on one track that the user has created another one to create a track

25
00:01:31,890 --> 00:01:36,760
and finally an account management screen where a user can basically just log out.

26
00:01:36,780 --> 00:01:42,550
So I want to start to think about how all these different screens are related or connected together.

27
00:01:42,550 --> 00:01:48,880
First off I think we can make a very logical separation between the authentication screens and the not

28
00:01:48,970 --> 00:01:50,220
authentication screens.

29
00:01:50,710 --> 00:01:56,080
So if a user is not signed in we definitely want them to only be able to see the sign up screen or the

30
00:01:56,110 --> 00:02:00,620
sign and screen and to be able to easily navigate between the two of them.

31
00:02:00,680 --> 00:02:05,150
Looking back at the mockup over here remember we want to have some blue techs down at the bottom that

32
00:02:05,150 --> 00:02:10,070
tells the user if you don't have an account then tap that link right there and go to the sign and screen.

33
00:02:10,070 --> 00:02:12,640
And if they go there and then realize that they don't have an account.

34
00:02:12,710 --> 00:02:15,760
Well of course they should build you navigate back to sign up.

35
00:02:16,160 --> 00:02:21,050
So without a doubt we definitely want to have a very close link between those two screens but they are

36
00:02:21,050 --> 00:02:27,020
definitely 100 percent separate from everything else now to start to think about how to wire up all

37
00:02:27,020 --> 00:02:28,130
these different screens.

38
00:02:28,130 --> 00:02:33,200
I want to give you some more detail on the react navigation library which we've used several times throughout

39
00:02:33,200 --> 00:02:35,090
this course.

40
00:02:35,170 --> 00:02:40,750
OK so throughout this course we've been making use of that stack navigator thing that stack navigator

41
00:02:40,750 --> 00:02:46,990
object is something provided by react Navy native or react navigation that makes it really easy to go

42
00:02:46,990 --> 00:02:49,890
like back and forth between different screens.

43
00:02:49,910 --> 00:02:53,330
So that's a very classic interaction of going black back and forth.

44
00:02:53,420 --> 00:02:58,240
Anytime we kind of navigate to another screen remember the header automatically updated and showed a

45
00:02:58,240 --> 00:03:03,360
little button inside the header that it user could press to go back to the previous screen.

46
00:03:03,460 --> 00:03:07,660
It turns out that there are several other navigators that are available to us that we can use for other

47
00:03:07,660 --> 00:03:10,360
forms of common types of navigation.

48
00:03:10,510 --> 00:03:14,520
You can find the full list of these different navigators at the API reference.

49
00:03:14,520 --> 00:03:20,700
There is a link to it right there some of the other navigators that might be useful inside of our application

50
00:03:20,940 --> 00:03:22,870
are the bottom tab navigator.

51
00:03:22,920 --> 00:03:27,510
If we make use of that it's going to show a collection of different screens that are tied together with

52
00:03:27,570 --> 00:03:31,780
a tab bar that is going to be displayed at the bottom of the user's device.

53
00:03:31,800 --> 00:03:36,270
So we've kind of got something very similar to that on these screens over here.

54
00:03:36,270 --> 00:03:40,800
Take note that down here at the bottom we want to show that kind of bottom tab bar where we have links

55
00:03:40,800 --> 00:03:46,720
to all of our different screens and probably show like an icon above each one or something like that.

56
00:03:46,740 --> 00:03:51,980
So I think that the bottom tab navigator might be really useful inside of our application.

57
00:03:51,990 --> 00:03:58,620
We've also got access to something called a switch Navigator a switch navigator is used for very abrupt

58
00:03:58,830 --> 00:04:00,970
switching between different screens.

59
00:04:01,140 --> 00:04:06,540
So whenever we make use of switch navigator it's usually to switch between abruptly or significantly

60
00:04:06,540 --> 00:04:09,350
different flows of screens so to speak.

61
00:04:09,420 --> 00:04:15,060
So a good use or example of where we would use the switch navigator is when the user signs up whenever

62
00:04:15,060 --> 00:04:15,910
user signs up.

63
00:04:15,930 --> 00:04:21,000
We're gonna take them from either these sign up or sign in screen to probably art tracklist screen or

64
00:04:21,000 --> 00:04:22,800
maybe the create one.

65
00:04:22,800 --> 00:04:27,710
So that transition once a user signs into our application should be very abrupt.

66
00:04:27,750 --> 00:04:32,110
We don't really need a animation there and we don't really need the ability to have a user to feel to

67
00:04:32,110 --> 00:04:36,010
go very easily back to the sign up or sign in screens.

68
00:04:36,060 --> 00:04:42,300
So going from the not authenticated pages to the authenticated pages might be a pretty good use of the

69
00:04:42,330 --> 00:04:44,190
switch navigator.

70
00:04:44,210 --> 00:04:47,300
And then finally we've got something called the draw navigator.

71
00:04:47,300 --> 00:04:51,950
We're not gonna use this inside of this application but this will show a very classic kind of fly out

72
00:04:51,950 --> 00:04:57,740
menu from these side of the device either the left hand or right hand side and inside that fly out window

73
00:04:57,950 --> 00:05:04,370
there will be a list of different links that a user can tap to go to some different screens.

74
00:05:04,470 --> 00:05:08,690
Now we understand some the different navigators that exist with react navigation.

75
00:05:08,790 --> 00:05:13,650
I want to understand how we can kind of assemble some of these different things together to really achieve

76
00:05:13,710 --> 00:05:17,100
the flow that we expect a user to have inside of application.

77
00:05:17,100 --> 00:05:23,280
Remember we have some very different methods of navigation or kind of interactions going on between

78
00:05:23,280 --> 00:05:24,230
sign up and sign in.

79
00:05:24,240 --> 00:05:27,340
We want a very smooth back and forth flow.

80
00:05:27,720 --> 00:05:31,060
Once the user signs in we want a very abrupt flow.

81
00:05:31,060 --> 00:05:35,700
And once the user gets over to this grouping of screens we want to have that bottom tab bar but we're

82
00:05:35,700 --> 00:05:40,730
not going to have a link add on that bottom tab bar for all four of these screens.

83
00:05:40,800 --> 00:05:47,220
We only have links for three of them the track list screen create an account remember back over here

84
00:05:47,910 --> 00:05:51,270
the track list screen that's this one right here.

85
00:05:51,510 --> 00:05:56,920
The create button will go to the create screen and the account screen will go to the well account screen.

86
00:05:57,330 --> 00:06:01,030
So the track detail is kind of an oddity inside of here.

87
00:06:01,080 --> 00:06:06,870
We can only navigate to track detail if a user first goes to track list and then taps on one these entries

88
00:06:08,220 --> 00:06:12,570
so even though we might build to make use of that bottom tab bar navigator it's kind of clear that we

89
00:06:12,570 --> 00:06:17,610
might have to have some other kind of like form of navigation to get a user to toggle between these

90
00:06:17,610 --> 00:06:19,870
different two screens in particular.

91
00:06:19,890 --> 00:06:24,270
Notice how we definitely want to show the header with the classic back button inside there.

92
00:06:24,270 --> 00:06:29,460
So once again I think it's kind of clear that we need to use a combination of these different navigators

93
00:06:29,460 --> 00:06:35,090
together to really achieve the flow that you and I are looking for so with that in mind we're going

94
00:06:35,090 --> 00:06:39,140
to get through kind of a iterative design process right now and we're going to think about how we're

95
00:06:39,140 --> 00:06:45,110
going to join together all these different screens with a collection of different navigators now teaching

96
00:06:45,110 --> 00:06:48,410
how to use these different navigators is kind of challenging.

97
00:06:48,410 --> 00:06:52,870
It's one of those things where you really just got to get hands on at some point and do it for yourself.

98
00:06:52,880 --> 00:06:57,590
So I going to show you how I kind of think through this entire process and how I would use these different

99
00:06:57,590 --> 00:07:01,340
navigators to Wired together these different screens in some particular fashion.

100
00:07:01,700 --> 00:07:03,100
So here's what I'm going to do.

101
00:07:03,140 --> 00:07:07,460
First off I going to delete those brackets on the left hand side and then I'm going to use a little

102
00:07:07,460 --> 00:07:13,700
green box to kind of join together where signify the different screens that I want to hook up together.

103
00:07:13,700 --> 00:07:16,910
And what navigator I want to use to join them together.

104
00:07:16,910 --> 00:07:19,410
So let's look at an easy example of this.

105
00:07:19,430 --> 00:07:25,460
First off is a sign up in sign and screens as we just discussed we want those to have a very classic

106
00:07:25,460 --> 00:07:30,630
kind of top this button and go over to this page top this button go over to this page.

107
00:07:30,650 --> 00:07:33,360
So it really is kind of a back and forth flow.

108
00:07:33,500 --> 00:07:36,980
You go forward to sign in or back to sign up.

109
00:07:36,980 --> 00:07:40,370
We don't really have a header on there with the classic back button.

110
00:07:40,370 --> 00:07:42,850
But regardless the interaction is just about identical.

111
00:07:42,860 --> 00:07:44,350
It's go for to sign in.

112
00:07:44,360 --> 00:07:48,100
Go back to sign up back and forth between those two screens.

113
00:07:48,110 --> 00:07:53,900
So with that in mind I think that we could very easily join those two screens together by using a stack

114
00:07:54,050 --> 00:07:59,490
navigator that will give us that classic back and forth navigation OK.

115
00:07:59,520 --> 00:08:02,000
Let's now go down to another easy example.

116
00:08:02,010 --> 00:08:08,040
So as we just saw the track list screen and track detail screen are going to have a very similar back

117
00:08:08,040 --> 00:08:13,620
and forth navigation style you tap on this thing right here you go forward to the detailed screen and

118
00:08:13,620 --> 00:08:19,400
then the header updates and you see the back button if you press back you go back to the trackless screen.

119
00:08:19,530 --> 00:08:25,900
So I think that the relation would ship between those two screens is also going to be these stack Navigator.

120
00:08:26,070 --> 00:08:31,820
So I'm going to signify that by pulling the detail screen over here I joined them together with the

121
00:08:31,820 --> 00:08:40,470
little arrow and I'll put the stack navigator down there as well next up the relationship between tracklist

122
00:08:40,860 --> 00:08:43,280
create and account screen.

123
00:08:43,290 --> 00:08:48,630
Well that's definitely going to be an instance of that bottom tab navigator.

124
00:08:48,630 --> 00:08:53,460
We want to show the tabs at the bottom with the different buttons that a user can press to instantly

125
00:08:53,460 --> 00:08:55,670
change between these different screens.

126
00:08:55,800 --> 00:09:00,300
So I think that these three screens right here should be related with the bottom tab Navigator.

127
00:09:00,300 --> 00:09:02,430
So I to put another green bar over here.

128
00:09:04,460 --> 00:09:11,330
And resize this slightly like so and I'll say these three screens will be joined together with the bottom

129
00:09:11,600 --> 00:09:17,890
tab navigator and I'll just kind of do a little bit of formatting here just to keep this going to looking

130
00:09:17,890 --> 00:09:21,780
nice.

131
00:09:22,010 --> 00:09:22,260
OK.

132
00:09:22,300 --> 00:09:28,810
And the last thing we need is some way to change between the outflow and this entire not outflow flow

133
00:09:28,810 --> 00:09:32,440
down here like the actual core interaction of our application.

134
00:09:32,440 --> 00:09:37,000
So once again anytime that we are navigating between those two groups we probably want to have kind

135
00:09:37,000 --> 00:09:41,230
of like an abrupt cut over to the non off or off flow.

136
00:09:41,890 --> 00:09:46,330
So for that I think would be a good use of the switch navigator and will essentially say the instant

137
00:09:46,330 --> 00:09:50,920
you're navigated where it is going to instantly cut to a different grouping of screens and show those

138
00:09:50,920 --> 00:09:51,890
to the user.

139
00:09:51,970 --> 00:09:56,000
And we're always showing either the outflow or the not outflow.

140
00:09:56,080 --> 00:10:01,930
So again not be a good use case for the switch navigator so to reflect that I'm going to pull these

141
00:10:01,930 --> 00:10:09,030
over here just a little bit but another green bar that joins these two and I can say that this thing

142
00:10:09,240 --> 00:10:17,010
these two different groups the screens are going to be joined together with a switch navigator and that's

143
00:10:17,010 --> 00:10:17,840
pretty much it.

144
00:10:17,840 --> 00:10:20,970
So that's how we're going to hook up navigation and inside of application.

145
00:10:20,970 --> 00:10:26,670
We're going to use all these different navigators to get our intended you flow our intended user experience

146
00:10:26,670 --> 00:10:29,320
flow between all these different screens.

147
00:10:29,370 --> 00:10:35,160
Now like I said kind of teaching this and giving you a foolproof process of how to go through this kind

148
00:10:35,160 --> 00:10:36,590
of difficult nonetheless.

149
00:10:36,720 --> 00:10:41,040
This is what we eventually want to start to think about when we're thinking about these kind of complicated

150
00:10:41,100 --> 00:10:42,090
interactions.

151
00:10:42,270 --> 00:10:47,310
We want to try to leverage react navigation as much as possible and these different navigators to kind

152
00:10:47,310 --> 00:10:51,430
of stitch together these different screens in some desired fashion.

153
00:10:51,500 --> 00:10:51,740
All right.

154
00:10:51,740 --> 00:10:57,560
So now that we've got some idea of how we're going to approach this design and hopefully once are react

155
00:10:57,560 --> 00:10:59,080
native application has been generated.

156
00:10:59,090 --> 00:11:00,310
Let's take a quick pause right here.

157
00:11:00,320 --> 00:11:04,880
When we come back the next video we're going to install react navigation get our app up and running

158
00:11:05,090 --> 00:11:09,950
and then start creating all these different screens and starting to implement this navigation flow between

159
00:11:09,950 --> 00:11:10,590
them.

160
00:11:10,730 --> 00:11:13,060
So quick pause and I'll see you in just a minute.