All right my friends regardless of whether you went through the express API set up with me or you went
through the setup in the last video.
At this point you should have a track server directory and you should be able to run NPM run Dev inside
there and not see any error message appear.
So if you're getting an error.
Well we need to do a little bit of troubleshooting because he won't be able to work on our next application.
Speaking of which let's start to generate our new React Native project for our next application which
remember is still going to be this kind of track thing that we discussed previously.
So to generate a new project I can open up a new terminal window.
I'm going to go back to a workspace directory of sorts and then inside of here we'll do an NPR X Expo
Seelye in it.
And then the name of our project which I going to call simply tracks so as usual I'll be asked to select
a template.
I'm going to go blank and then we'll put in a name for our app as well.
We'll just put in Trax okay.
So that's going to start the installation process while that's going.
I want to start to have a quick discussion about the design of our application.
So we already took a look at all these different mockups.
I'm not going to make you listen to me talk about them again but basically just remember we're going
to a collection of different screens that we're trying to show the user.
I want to think about how we're going to connect all these different screens together.
So in total these are all the different screens I expect that we're going to have.
We've got the authentication screens we've got something to list out all the different tracks that have
been created a screen to focus in on one track that the user has created another one to create a track
and finally an account management screen where a user can basically just log out.
So I want to start to think about how all these different screens are related or connected together.
First off I think we can make a very logical separation between the authentication screens and the not
authentication screens.
So if a user is not signed in we definitely want them to only be able to see the sign up screen or the
sign and screen and to be able to easily navigate between the two of them.
Looking back at the mockup over here remember we want to have some blue techs down at the bottom that
tells the user if you don't have an account then tap that link right there and go to the sign and screen.
And if they go there and then realize that they don't have an account.
Well of course they should build you navigate back to sign up.
So without a doubt we definitely want to have a very close link between those two screens but they are
definitely 100 percent separate from everything else now to start to think about how to wire up all
these different screens.
I want to give you some more detail on the react navigation library which we've used several times throughout
this course.
OK so throughout this course we've been making use of that stack navigator thing that stack navigator
object is something provided by react Navy native or react navigation that makes it really easy to go
like back and forth between different screens.
So that's a very classic interaction of going black back and forth.
Anytime we kind of navigate to another screen remember the header automatically updated and showed a
little button inside the header that it user could press to go back to the previous screen.
It turns out that there are several other navigators that are available to us that we can use for other
forms of common types of navigation.
You can find the full list of these different navigators at the API reference.
There is a link to it right there some of the other navigators that might be useful inside of our application
are the bottom tab navigator.
If we make use of that it's going to show a collection of different screens that are tied together with
a tab bar that is going to be displayed at the bottom of the user's device.
So we've kind of got something very similar to that on these screens over here.
Take note that down here at the bottom we want to show that kind of bottom tab bar where we have links
to all of our different screens and probably show like an icon above each one or something like that.
So I think that the bottom tab navigator might be really useful inside of our application.
We've also got access to something called a switch Navigator a switch navigator is used for very abrupt
switching between different screens.
So whenever we make use of switch navigator it's usually to switch between abruptly or significantly
different flows of screens so to speak.
So a good use or example of where we would use the switch navigator is when the user signs up whenever
user signs up.
We're gonna take them from either these sign up or sign in screen to probably art tracklist screen or
maybe the create one.
So that transition once a user signs into our application should be very abrupt.
We don't really need a animation there and we don't really need the ability to have a user to feel to
go very easily back to the sign up or sign in screens.
So going from the not authenticated pages to the authenticated pages might be a pretty good use of the
switch navigator.
And then finally we've got something called the draw navigator.
We're not gonna use this inside of this application but this will show a very classic kind of fly out
menu from these side of the device either the left hand or right hand side and inside that fly out window
there will be a list of different links that a user can tap to go to some different screens.
Now we understand some the different navigators that exist with react navigation.
I want to understand how we can kind of assemble some of these different things together to really achieve
the flow that we expect a user to have inside of application.
Remember we have some very different methods of navigation or kind of interactions going on between
sign up and sign in.
We want a very smooth back and forth flow.
Once the user signs in we want a very abrupt flow.
And once the user gets over to this grouping of screens we want to have that bottom tab bar but we're
not going to have a link add on that bottom tab bar for all four of these screens.
We only have links for three of them the track list screen create an account remember back over here
the track list screen that's this one right here.
The create button will go to the create screen and the account screen will go to the well account screen.
So the track detail is kind of an oddity inside of here.
We can only navigate to track detail if a user first goes to track list and then taps on one these entries
so even though we might build to make use of that bottom tab bar navigator it's kind of clear that we
might have to have some other kind of like form of navigation to get a user to toggle between these
different two screens in particular.
Notice how we definitely want to show the header with the classic back button inside there.
So once again I think it's kind of clear that we need to use a combination of these different navigators
together to really achieve the flow that you and I are looking for so with that in mind we're going
to get through kind of a iterative design process right now and we're going to think about how we're
going to join together all these different screens with a collection of different navigators now teaching
how to use these different navigators is kind of challenging.
It's one of those things where you really just got to get hands on at some point and do it for yourself.
So I going to show you how I kind of think through this entire process and how I would use these different
navigators to Wired together these different screens in some particular fashion.
So here's what I'm going to do.
First off I going to delete those brackets on the left hand side and then I'm going to use a little
green box to kind of join together where signify the different screens that I want to hook up together.
And what navigator I want to use to join them together.
So let's look at an easy example of this.
First off is a sign up in sign and screens as we just discussed we want those to have a very classic
kind of top this button and go over to this page top this button go over to this page.
So it really is kind of a back and forth flow.
You go forward to sign in or back to sign up.
We don't really have a header on there with the classic back button.
But regardless the interaction is just about identical.
It's go for to sign in.
Go back to sign up back and forth between those two screens.
So with that in mind I think that we could very easily join those two screens together by using a stack
navigator that will give us that classic back and forth navigation OK.
Let's now go down to another easy example.
So as we just saw the track list screen and track detail screen are going to have a very similar back
and forth navigation style you tap on this thing right here you go forward to the detailed screen and
then the header updates and you see the back button if you press back you go back to the trackless screen.
So I think that the relation would ship between those two screens is also going to be these stack Navigator.
So I'm going to signify that by pulling the detail screen over here I joined them together with the
little arrow and I'll put the stack navigator down there as well next up the relationship between tracklist
create and account screen.
Well that's definitely going to be an instance of that bottom tab navigator.
We want to show the tabs at the bottom with the different buttons that a user can press to instantly
change between these different screens.
So I think that these three screens right here should be related with the bottom tab Navigator.
So I to put another green bar over here.
And resize this slightly like so and I'll say these three screens will be joined together with the bottom
tab navigator and I'll just kind of do a little bit of formatting here just to keep this going to looking
nice.
OK.
And the last thing we need is some way to change between the outflow and this entire not outflow flow
down here like the actual core interaction of our application.
So once again anytime that we are navigating between those two groups we probably want to have kind
of like an abrupt cut over to the non off or off flow.
So for that I think would be a good use of the switch navigator and will essentially say the instant
you're navigated where it is going to instantly cut to a different grouping of screens and show those
to the user.
And we're always showing either the outflow or the not outflow.
So again not be a good use case for the switch navigator so to reflect that I'm going to pull these
over here just a little bit but another green bar that joins these two and I can say that this thing
these two different groups the screens are going to be joined together with a switch navigator and that's
pretty much it.
So that's how we're going to hook up navigation and inside of application.
We're going to use all these different navigators to get our intended you flow our intended user experience
flow between all these different screens.
Now like I said kind of teaching this and giving you a foolproof process of how to go through this kind
of difficult nonetheless.
This is what we eventually want to start to think about when we're thinking about these kind of complicated
interactions.
We want to try to leverage react navigation as much as possible and these different navigators to kind
of stitch together these different screens in some desired fashion.
All right.
So now that we've got some idea of how we're going to approach this design and hopefully once are react
native application has been generated.
Let's take a quick pause right here.
When we come back the next video we're going to install react navigation get our app up and running
and then start creating all these different screens and starting to implement this navigation flow between
them.
So quick pause and I'll see you in just a minute.