All right my friends in this video we're gonna have a lot of fun trying to put together this kind of
structure right here that's going to join together all of our screens.
So I'm gonna flip back over to my editor I'm inside my apt.
J.S. file to get started at the very top.
I'm going to import react from react because we're going to eventually write out some jazz sex inside
of here and then I'm going to import a couple of different things from the react navigation navigation
no navigation There we go.
LIBRARY SO WE'RE GOING TO GET THE create app container function.
Remember that's going to take some navigator object and essentially just create a component out of it.
Then after that we're going to import that create functions for the three different navigators that
we're trying to use in total we're trying to use Switch.
Bottom tab and stack it's going to import three functions to create each of those.
So create stack navigator create bottom tab navigator
and create switch navigator.
Now I know all the text inside this file is kind of faded out right now which is probably quite annoying.
But as I start to use all these different variables they're all going to pop in and you'll be able to
see them very easily.
OK so now we're gonna start to write out our different navigators so the very first navigator we're
going to put together is the top level.
We're then going to kind of drill down and assemble each additional Navigator.
So the first navigator we need is the switch navigator so let's write that out right now.
So back inside of app dot J.S. after all of our different imports I'm going to write out const switch
navigator is create switch navigator and we'll pass in our route configuration object.
So inside of this object eventually going to have a bunch of different nested create navigator statements.
So we're going to essentially assemble everything inside this object right here except for one very
small exception.
So inside of here we're going to get started by listing out the different things that this switch navigator
is going to display.
So the first thing that that switch navigator is going to display is essentially the authentication
flow and the not authentication flow which we might refer to as like our main flow of screens.
It's going to list those both out as different keys inside this object.
Remember inside of all the navigators we've used so far inside this course we always did something like
I don't know maybe track screen is hard like tracks is tracks screen but we don't have to list just
screens on here we can actually have links to other navigators so we want to show.
So I'm gonna put inside of here a link to our log and flow because I'm referencing another flow I'm
going to use a convention of putting a lowercase character as opposed to the uppercase we've used for
everything else.
Now once again putting a lowercase character here has no effect on our application whatsoever.
I just like to do this is kind of an indication to myself that hey I'm about to refer to kind of like
another navigator or another grouping of different screens so whenever we enter into this log and flow
we want to show a stack navigator that's gonna show either the sign up screen or sign and screen it's
going to list those both out for our log and flow.
So for log and flow if we ever go to our log and flow we're going to create a stack navigator that's
going to toggle between our sign up screen or our sign in screen so now we're starting to see this nesting
come together.
So we're saying Okay we've got one flow when we enter this flow we're going to show the stack navigator
and inside of this stack navigator we want to toggle between our sign up screen in our sign and screen.
So now as a sibling to the log and flow the other thing that these steps switch navigator is going to
control is our main flow.
So that's gonna be all of these things down here.
So for our main flow we always want to be showing a bottom tab navigator so to our main flow right here
we're going to assign create bottom tab navigator.
We're going to pass this thing its own set of routes it's now inside of here we want to have a choice
between either a stack navigator that shows the track list or track detail our track creates or the
account screen will first just put in the track create an account screen and then come back and handle
those two in just a moment.
So inside of our main flow we want to be able to show either our create track which will be create track
screen or our account screen.
So account is account screen it's gonna make sure yep that's we call it account screen and I realized
I just made a very small typo right there I put create track it's actually track create so I'm going
to fix that up very quickly so it's track create track create screen just you know in my original notes
for this application I actually use the Noman creature of create track and like list track and so on
and I eventually swapped it out to track create track detail and so on which I think makes a lot more
sense OK.
So we've now got this kind of first level of navigation put together we're saying that we've got a switch
navigator that's gonna go between either our log and flow or the main flow and then in each of these
flows we've got some different sub navigator.
Now last we have to do is indicate that inside of our main flow in addition to having some bottom tabs
for either our track creates or our account screen we also want to have a another navigator that can
be a stock navigator and that's going to toggle between track list interact detail so back over here
the first entry inside of our main flow I'm going to put a which we call this I don't like track list
flow and we'll assign it a create stack navigator and then inside this object reading the list the different
screens that are going to be controlled by the stack Navigator.
So once again it's going to be first our track list and then the track detail so I'll put in track list
is track loops casualty track list screen and then track detail is track detail screen and that's pretty
much it so once again I know this is kind of a crazy process we're going through and it really is something
that you just got to kind of tackle on your own at least one time to understand how to stitch together
together these different navigators Well we've essentially gone from our diagram over here where we
expressed how we want to have some form of navigation between all of our different screens and then
reflected that inside of a nested router setup or nested navigator setup.
So now our topmost navigator is the switch navigator so you actually get something to show up on the
screen of our device just for right now at the very bottom of the file we'll do our classic export default
with create app container and we'll pass in that top level switch Navigator.
So now inside of our application we're going to first show the log and flow that will toggle between
those two screens and then right now we don't have any way to toggle over to the main flow but we'll
add that in just a moment.
So right now let's just see this and see what we get.
It's going to save this file and pull up my application.
So here's our sign up screen.
Very good.
We don't really have like I said any way to get anywhere else inside of here right now.
So let's take a quick pause.
When we come back the next video we're gonna start to add in a couple of different elements to all these
different screens to kind of navigate around and visit some of the other screens inside of our flow.
So quick pause and I'll see you in just a minute.