The very last thing we have to do inside of our sign up function is make sure that we navigate our user
over to our main flow remember inside of our apt J.S. file.
We defined our main flow right here.
That's gonna be all the screens that a user can see after they actually sign in.
Now here's one little kind of nasty thing you might recall that inside of our last application in order
to do some navigation.
We passed a callback to our different action functions.
So essentially right here as the additional argument to our action function we passed in something like
callback.
And then after we did all of our work inside this action function we then said something like If callback
then go ahead and run that callback.
Like so now this definitely works without a doubt.
It's a valid approach but it's maybe not the very best way of handling things because the reason is
that right now we are essentially relying upon a component to define some really important definition
about what should happen after this action function runs.
But in this case you and I know exactly what we want to do after we successfully sign in.
We want to make sure that we navigate over to that other screen.
So I think it might be just a little bit more ideal if we wrote in that navigation code directly inside
this action function.
So in other words right after doing our dispatch if we could call a function that said navigate to main
flow that would then leave this action function really clear in nature it would be really obvious to
other engineers who read this thing exactly what happened.
Whenever we sign it we make the request store the token update our state and then navigate to main flow.
No question about what goes on.
So I want to figure out some way that we can trigger some navigation from inside of this function without
having to pass in some callback.
Now unfortunately this kind of relies upon making use of React navigation.
And the reason I say unfortunately is well let's take a look at our app dot J.S. file it's inside of
app dot J.S. we go through all this work of creating our navigators blah blah blah all that good stuff
goes on but here's the problem.
The only things inside of our application right now that can trigger navigation are components that
are rendered by these different navigators.
Remember every screen that we show here receives a props object that has that navigation prop inside
of it.
So it's that navigation prop that allows us to handle some amount of navigation or trigger that navigation.
Getting access to that prop from essentially outside of a react component is rather challenging to do.
We cannot just take like this switch navigator right here and say magically Hey.
Please try to do some navigation for me.
It's not quite how it works.
You see the switch navigator that we create right here and all these different navigators are kind of
like react component definitions the switch navigator itself is not actually a navigator per say it's
instead kind of like a class of sorts or a function that could be used to create a switch navigator
with all this configuration you see right here.
So it's not until we actually render our app out of that app container thing right here it's not until
that line of code actually runs that we actually get the functions or these functions are even created
that allow us to actually start triggering some navigation so in other words we can't really somehow
get the ability to navigate by just using something that gets returned by this block of code.
Instead we have to essentially kind of hook in to that thing right there until that thing.
Hey give me some way to navigate using all the functions that were just created inside of the navigators.
More or less in that line of code.
So I hope right now it sounds really confusing what I'm trying to say here.
Essentially I'm trying to communicate is that getting access to navigation outside of a react component.
So like from inside of one these action functions is just a little bit troubling with react navigation.
That's pretty much it so let me show you how we're going to handle this.
So just you know if you look at the react navigation documentation there is actually a guide to tell
you how to do exactly what we're about to do but we're going to write out some code to do the same thing
as that guide.
That's way more simple and easy to understand then what the guide shows.
So here's pretty much what's going to go on inside of our apt J.S. file a navigator is declared eventually
essentially like in that kind of line of code right there right.
But it's really hard for us to get access to.
So to make sure that every other file inside of our project if it's not a react component to make sure
that everything else still has the ability to navigate even if it is not tied to react we're going to
make another file called navigation ref then inside there we're going to write out a clever little function
that's going to get us access to the navigator that was defined over on that app line like that line
right there then inside of navigation wrap.
We're going to also export a function that can be used by every other file.
That's not a real component inside of our project to actually trigger some navigation and navigate around
two different screens now at the end of the day.
The code that we're gonna write here is pretty simple and straightforward in nature.
All I'm really trying to communicate is that it's just hard to get access to the navigator that is declared
by react navigation pretty much it.
So let's start writing some code.
We're gonna create a new file called navigation ref.
We're going to write out that clever function and the function to actually trigger some navigation.
So back inside my code editor I'm gonna find my SRT directory and inside there I'm gonna make a new
file called navigation ref dot J.S. so notice that I did not actually put this in any sub directory
inside of s RC It's just inside the s RC directory.
If you want to put this in some kind of like helper file sub directory or some like that feel free to
do so.
But for me it's kind of a central file and I just want to make sure it's easily accessible like everything
else inside my project.
So now inside of here we're going to write out these two things First off the clever function to get
access to the Navigator.
So here's what we're going to do.
We're going to define a variable inside of here with the inlet keyword.
No let means that we just want to be able to reassign this variable at some point time in the future.
Now you've essentially got some storage mechanism inside this file.
So here's our clever function we're gonna say export concept sets navigator this thing is going to be
called with some navigation object.
So that's going to be the actual thing coming from react navigation that it's going to allow us to navigate
around two different screens.
So we're gonna take that NAV thing coming from react navigation and just assign that value to our navigator
variable.
It's also navigator equals NAV and that's our clever function.
Yep I know not really that clever but let's try to make use of it and then you'll see why it is kind
of maybe just a little bit clever.
So going to save this file I'm gonna go back in to act J.S. and then at the very top I'm going to import
that function we just declared.
So up here I'll say import set navigator.
And notice that we're using those curly braces because we did not do a default expert here.
We're going to eventually export multiple things from this file.
That's why we are using it named exports as opposed to a default so I'm using the curly braces we import
set navigator from source navigation RAF we're then going to take that function we're gonna go down
to where we accreted that app component right there.
Remember that app component is essentially created entirely by react navigation.
So we're gonna pass in a prop called ref ref is going to receive an arrow.
Function and inside of here all we're going to do is accept an argument that is essentially our navigator
is the object that's going to allow us to navigate around so I can refer to that as navigator and I'm
gonna pass that variable into our set navigator function and that's pretty much it.
So what's going on with ref.
Well more or less this ref thing right here is going to be a function that gets called with that object
that allows us to navigate around.
So this is kind of like a hook into our component.
It allows us to get a reference to the Navigator.
So we're gonna take that Navigator.
The thing that allows us to navigate around we're going to call our set navigator function with it that
ultimately is going to take that navigator thing and assign it to the navigator variable that we defined
back inside of here at navigation ref.
So now we've got direct access right there that object is the very special thing that allows us to navigate
around and tell react navigation that we want to show a different screen to the user.
It's now the last thing we can do inside this file is write out a function and export it.
That's going to allow everything else.
Like all of our non react component stuff to trigger some navigation so to do so we're gonna write out
just a little bit of nasty code.
So the very top I'm going to import something called navigation actions Rama react navigation and then
down at the bottom I'll say const or expert const navigate and we're going to call this thing with the
name of the route that we want to navigate to I'll be like route name and any pyramids or any parameters
we want to navigate to that other out with.
It's a route named right here.
It's gonna be like the name of our routes we define back inside of app dot J.S. so like sign up sign
in tracklist track detail and so on and then prams remember we've taken a look at Ramsey for that some
information that we want to pass to the screen that we're about to show then inside of here to actually
trigger some navigation.
We're going to call navigator Dot.
Dispatch and inside we will pass navigation actions dot navigate and we'll put in an object with route
name as root name and parameters as Brahms and as you can probably guess we're gonna shorten both those
down to be just right name and perhaps because the keys in the values are the same.
So what's going on inside of here.
Well it turns out that the navigator provided to us by react navigation has an internal API or essentially
functions very similar to our all of our contact stuff works as well.
So some of these words probably look familiar.
Dispatch Yep very familiar actions.
Yeah very familiar as well.
So essentially by dispatching an action we are telling react navigation that we want to it to change
its status and show a different screen to our user.
So be under the hood behind the scenes react navigation is really doing the same stuff the same code
that you and I are writing more or less so now anytime we call navigate we'll pass in the name of the
route that we want to show and optionally some firearms as well that's then going to run to run some
under the hood code right here that's going to trigger a change in state in react navigation and show
some different content to our user okay.
That's pretty much it.
So last thing we'll do is a quick test here.
So going to save this file it's now anytime we want to navigate around our application from anywhere
outside of a react component.
So in the case of our action function back over here all we have to do is import this navigate function
and call it with the route that we want to navigate to a back inside of off context at the very top.
I will import navigate from up one directory navigation ref.
Once again notice that we're using curly braces because inside of navigation ref we export and navigate
as a named export not default.
So we have to use those curly braces back over here to then down inside of sign up right after we go
through all this success stuff.
The last thing wants to do is navigate to our main flow so we will call the navigate function and put
in the name of the route that we want to navigate to so in our case we could say either just take us
to the main flow or more particularly I think that we really want to go to the track list by default.
We don't really have any data to show inside there right now but that's pretty much what we said we
were going to navigate to after we successfully signed in.
So we are going to attempt to just go directly over to the track list.
So to do so I'm going to navigate right here.
I got a pass in a string of track list like so just you know we could optionally have instead said main
flow that is a valid target to navigate to.
But I'm going be very direct and say just take me to the track list.
So time for a test.
Let's save all the changes we've made I'll flip back over.
I'm going to again sign up this I'm going to sign up with a brand new email so I should not get any
error message around something about an email being in use or something like that.
It's going to use test 9 at test dot com which I've never used before.
I'll enter my password and then sign up and it looks like.
Nonetheless I've got something a little bit wrong here.
So I can do just a little bit of debugging between this video and the next one because that really should
have worked correctly.
Second to just a little bit of debugging and to figure out what went wrong.
Come back.
The next video and actually get this thing working.
So quick pause and I'll see you in just a minute.