In the last section we were able to navigate between two scenes automatically whenever a user logged
into our application.
Now there's just one issue that we're running into now and that's whenever we navigate over to the employee
list we get this automatically generated blue button here placed in the letter.
Now of course maybe it will make sense to eventually allow a user to go back to the log in form.
Whenever we start to implement the log out functionality but usually logging out of an app is an option
that is buried in some type of menu at present if this actually logged our user out there would be a
rather poor user experience because that's a rather large button on the screen that a user could very
easily press accidentally.
In general we don't really want to make it that easy for a user to log out as soon as they log out.
Then they have to retype in their e-mail and their password which is always a real big hassle.
So we need to figure out some way to disable this button right here to do so.
We're going to make a little bit of a change to our scene set up inside of our router at present.
You'll notice that we've got our two scenes in here.
The logon screen and our employee list these two scenes form kind of two separate flows throughout our
application.
So let's take a look at a diagram that's going to expand on that a little bit.
So if you're at the top.
We've got the authentication flow in our app that has its own scene.
Then on a totally separate flow we have our employee list down here.
And eventually we want the user to be able to tap on a name on that employee list and then navigate
over to the employee create whenever a user navigates from employee list to employee create.
I think that in that sense or in that case it would make a lot of sense to have the back button be automatically
generated in the header.
So in other words if we go from this flow to this flow we don't want to see a back button but if we
go from employee list to employee create we probably will want to see the back button.
So to set up this type of navigation structure where in some cases we see a back button and in some
cases we don't.
We're going to create two new scenes in our application inside of our router file to be specific.
And these two new scenes are going to grouped together specific child scenes.
So this would be a child scene and this would be a child scene.
So we want to group these two scenes together because we expect to be able to freely navigate between
them using that automatically generated back button.
But this scene right here is not going to have any other scene that has easy back and forth navigation
through the use of a back button.
So we're going to place it nested in its own separate scene.
Now when I described this with words it's a little bit confusing.
So let's add the code to kind of split these two scenes off into their own separate buckets of sorts.
And then we'll get a better sense of what's going on.
So inside of my router file I'm going to find my log in scene right here.
And I'm going to wrap it with a new parent seem like so
I can make sure I give this scene a key because all the scenes we create must have a key assigned to
them.
And I think that this scene right here kind of describes the Auth. flow inside of our application.
So I'm going to decide to give it a key of off like so or then wrap the employee list inside of its
own scene as well.
And I'll give this one a key of main because I think this really describes the main flow throughout
the application.
All right.
So now we've got two separate buckets of scenes.
When we eventually create the employee detailed component we will replace that new scene inside of here
as well.
So would be something like employee detail and so this will tell Riak native router flux that we want
to easily navigate between the employee list and the employee detail but navigation from the log in
over to either the employee list or the detail right here should not be quite so easy.
And as I'm seen easy to navigate or not easy to navigate what I'm really saying is whether or not we
get that automatic back button generated.
So let's save this right now and just see what happens.
And it's let's save this file.
I'm going to go back over to my simulator and refresh.
Now when I do so you're going to immediately notice some really strange behavior.
You take a look here and you'll see that we've got this extra gigantic header inside of our application.
So this extra header right here has been generated simply because we added in these extra seam components
to disable this extra head a head or in here we can find the roots seen.
So here's the route seen right here.
And we're going to add on a prop of hide nav bar to the route seen that will make sure that this extra
nav bar is not automatically generated just because we are nesting in some extra scenes here.
So let's now refresh and it's back to looking good.
All right let's log in for real here.
So I'll say test at Testim come and password and then I'll log in.
Now when I log in you'll notice that I still have a blue button appearing up here.
But this time it doesn't say Please log in.
Now it says employees.
Well that's kind of strange.
Let's cook it and see what happens.
Oh when I click it it takes me back so to speak to another employee list screen.
So this is a little bit of weird functionality here.
We can fix it up by finding our action creator file so I can open up my action creator file down here
at the bottom we've got our log in users success callback.
And you'll recall that we had said.
Any time that we successfully log into our application we want to automatically go to the employee list
seem.
Now this is a little bit of an oddity of how re-act native outflux works.
But essentially if we want to navigate now from let's go back to the router really quickly if you want
to navigate from this flow right here or from this bucket of scenes rather than navigating directly
into these child scenes we are going to first navigate to Maine.
So rather than going directly to employee list we're going to navigate to Maine.
And Maine is going to attempt to automatically show the first Siemon side of it which is the employee
list.
So long story short in our index start just file or in the actual creator file rather than navigating
to employee list.
We're now going to navigate to Maine now specifically saying Maine right here because that is the key
that we just assigned to the new scene that we just created.
So back inside the router Here's our scene with key main right here.
So after we log in try to go to this flow this flow right here is going to attempt to show the first
scene inside of it which in this case is the employee list.
So it's now testis out again and see what happens.
So I will put in my e-mail again and again.
And now we navigate over to the employee list and we don't have any back button present perfect.
So that's exactly what we wanted.
OK.
I think that our navigation is now in a fairly good spot so let's continue in the next video.