In the last section we installed the re-act need of router flux library and it had a little discussion
about scenes and they decided to get right to work.
Again this is really a library where getting your hands on practice with it is much more rewarding than
a long lecture.
So let's just dive right it inside my SIRC directory.
I'm going to make a new file called rowdier.
So make a new file inside their router.
J.S..
The purpose of this file is to have one single location where I can tweak all the different components
that a user can navigate to inside of our application.
So in this file where we are going to define all the different routes that a user can visit we will
be creating a component inside of here.
So let's add some boilerplate for making a component at the top.
We will import re-act from re-act underneath that we will define a new component called router component.
That will be a functional component.
Right now I'll leave an empty return statement.
We'll come back to that in just one second.
And then at the bottom will place our export default router component like so now we're going to add
some more import statements at the top here.
We're going to import two things from the re-act need of retroflex library and we're also going to import
our log in form as well.
So we'll import scene and router from re-act native router flux and we'll also import loggin form from
components log in form like so.
All right.
Now here's the way that we use this router.
This is going to be the top level component inside of our application.
So inside of our return statement we are going to place our router
and then inside of your we are going to place a couple of different scene components.
So each of these scenes right here are going to represent some distinct route that a user can navigate
to inside of our application.
Now there is one requirement of re-act native router flux and that is that it must have one singular
parent scene.
So immediately inside of the router I'm going to place a scene this scene right here will be referred
to as our route seen or our parent seen all the different routes that we are going to create are going
to be children of this parents seen right here.
Every single scene that we create has to have a key assigned to it.
And remember in the last section we spoke very briefly about keys.
So for this parent or root scene that we just created I'm going to pass it a prop of key and that's
going to be a string route like so.
So that is identifying this particular scene that inside of here we are going to create one more scene.
This next scene that we are going to create will be responsible for showing our log and form component.
So inside the scene component will place scene.
We are going to give this one a key of log in whenever this scene is shown on the screen.
We are going to attempt to show the component log in form and then we're also going to give this thing
a title of Please log in.
And then finally we're going to close off the scene tag at the very far right hand side like so all
right now the last thing we have to do is to use this router inside of our application.
We're going to wire this thing up and make sure that our router component is actually showed inside
of our app and then we'll do a little bit of testing inside of our simulator.
So right now let's go back on over to our outtalk J.S. file inside of us we will import the router that
we just created.
So import router from router then down inside of our render method I'll find the log and form that we
were showing previously.
So no longer do we always want to be showing the log in form now instead we want to be showing the router
and allowing the router to decide what set of components to show us something to replace the log in
form here with router hoops router like so.
All right let's flip on over to our simulator and just see what happens.
Let's do a little bit of testing see how things go.
So refresh the simulator.
It's going to take a moment to load up.
Just because we are importing the re-act native router flux library for the first time.
So if you pull up in your packager you might actually see the progress and it looks like it's all done
here.
And so now on the screen we can see very simply at the top we have some text that says Please log in.
And then underneath that we've got our actual log in form.
Cool.
So as you can see this is at least a good start.
Let's take a break right now and we're going to continue in the next section.