Our app is now in a really great spot.
I think that we have wrapped up our log in form.
It is fully redux defied.
And I'm going to see that.
You know we've probably got a better hand on handle on redux in general at this point in time.
So I think that now we can move on to the next area of the application.
Know Right now we can put an email and password we can in theory sign in.
But once the user is signed in we're not really actually doing anything about it right.
We're not shown the user like a list of employees are given the ability to our employees.
And so that's what we want to start working on.
And so we're sort of going to start working on the realm of navigation with Riak native and I can tell
you right now navigation with re-act native is a little of a tricky subject.
While the react.
S world like you know react in the browser and has a defacto standard of navigation with the reactor
router library so ratch.
Yes very clear directions on how to pull off navigation on the Web.
On the other hand reac native doesn't really have a very similar go to solution for navigation.
There's not like a single just fantastic community accepted standard library for all navigation.
So we're going to using one possible solution.
Right so this is a possible solution for navigation.
Personally I've looked at many of them.
I think this is the best.
So I think they were making a good decision here but I want you to be aware that there are different
solutions for navigation the re-act native world so the navigation Slusher are going to use is a layered
library called and this is just a crazy town name re-act native router flux I nasty name for a liar.
Let me say that right a nasty name for a library.
I'm going to most refer to it as just like our right routing library because you know just remembering
all those four words is too much for me.
Until ya.
Gotta tell ya.
Anyways getting a little off topic there let's install the library and we're going to figure out how
it works.
So at our command line will NPM install Ashutosh safe then re-act dash router dash me wait no see it's
too long re-act dashed native router flux and I want a very specific version of this 3.3 5.0.
So while that installs Let's go ahead and check out a diagram on how this thing works.
So I've taken a couple of these screens out of our application.
You know these are from our mockups.
I know the formatting on these there is a little bit weird it's just how it kind of turned out.
I took the screens and I separated them out on the top.
We've got our main authentication screen like our log in form and that is kind of like this authentication
flow and you can imagine that maybe if we had a really full featured authentication flow maybe you would
also have like a sign up screen over here and then maybe also like a you know reset my password or something
like that below it.
I have what I'm currently calling the main flow which is you know maybe not the best name but you kind
of get the idea.
It has a flow where a user can see their list of employees and they can tap on the individual employee
and they can look at details about that particular employee as well.
And they can very freely navigate between these two screens right here right like they can tap on the
user.
They can tap the back button and they can toggle between the two very easily.
That is the intent anyways.
The main flow and the authentication flow however the this is a little bit more of a very distinct jump
between the two.
Right.
Like you have to really put in your email and password press loggin button.
And then we the developer will direct you over to this employee list of sorts right here.
So jumping between these two flows is a little bit you know more direct more programmatic something
that we are going to take care of ourselves as the developers.
So now our question is how do we use this navigation library that we just installed to set up for this
type of navigation right here.
We've got these kind of two distinct flows where we can jump between the two.
And then the one we can freely go forward and back.
How are we going to use this re-act router native flux library to do that.
Well then this routing library has the idea of what is called a scene a scene in a scene is how we organize
a distinct page that our user can navigate to a scene is a component that we are going to import from
that routing navigate routing library.
So in our application we have three distinct screens log in screen a employee list of sorts an employee
create of sorts where you you know create new employees.
We have three screens and so I'm going to expect to have three Screen Scene components.
So scene one scene two and SCENE THREE.
Each of these scene components are going to create match up a component with a key property over here
and the key property kind of describes hey what does this show screen or what.
Excuse me what does the screen show backwards.
So I'm going to expect that we're going to create three scene components one for each of the distinct
screens that we're going to create.
All right.
One more thing I want to talk about here.
Figure out how these scenes work with the routeing library.
I expect that you're going to jump onto it pretty quickly.
The most challenging part of this scene API of sorts is just understanding what all the props you can
past the scene are.
So again we're going to make one scene component for each distinct screen in our application the scene
component has four big properties that we're going to really care about and there's many other properties
we can pass this thing but these are the ones that we're like going to use probably 90 percent and time
in our applications.
First off is a key.
So we might give it a key of like log in which means you know this is my log in screen.
The key is very important and is very distinctly different from the Keys that we've been working with
whenever we made a list of re-act components.
OK.
I want to throw that out there right away.
This key is not related to list building like when we were using map to build up a list.
Instead the key is how we navigate around from screen to screen in our application.
So I've got a note up here that says you know you call this thingamajig to show the screen.
We'll talk more about that.
But for right now I just want you to understand that the key does not have to do with list building.
It has to do with how we identify a particular screen.
Next is the component and this one I bet you can imagine what this one is for when we make a scene.
It represents a singular screen that we want to show in our app or a single like a set up of components.
So we tell a single scene what component we want it to show next.
The title property.
That's where things start to get a little bit more interesting.
This re-act router no re-act native router flock's.
There we go library has a built in Hetter component for us to use.
So we have already made it better.
Yes.
And we made a reusable component but we're not going to be using that one.
We're going to be using the one that is provided by this library and there's a very good reason for
that and we'll talk about it.
We started using the header for right now I just want you understand that we can tell a scene what its
tiles should be and if we set that title it will put that title on the nav bar that is going to be automatically
created for us.
And again we will talk a whole bunch about that.
Finally the last prop I want to talk about is called initial initial means hey out of all the different
scenes I have in my application.
When the first boots up I want to show this scene in particular.
So for us we're going to have three different scenes right.
We definitely want to show the log in screen first no matter what.
Pop that thing up make the person log in.
So we want to tell one scene that is the initial scene to show insider application.
All right.
So a lot of talking here.
Overall I feel like this whole router library is really one of those things where it's kind of tough
for me to explain with words and diagrams.
But once we put some code down on the screen are you on the page and see how it really works by writing
some code.
I think you're going to get a hold on it really quickly.
So let's take a quick break and then start working on some implementation in the next section.