In the last video we spent a little bit of time setting up our router component inside of the router.
We place two scenes one scene was the root scene and every other scene that we add will be a child of
this route one inside of there.
We also added a scene that we will refer to as the log in scene.
When we did so and then refresh our application in the simulator we can now see that we automatically
got a header generated and displayed on this page right here.
So what you see is a header that is being generated by this scene right here because we provided a title
prop of Please log in we can see Please log in at the top.
Now this definitely is a good place to start.
But of course whenever we are talking about navigation we're really wanting to make sure that we can
show multiple components on the screen.
So at this point I think that we should add in another test component of sorts and wired up into our
router and get a better idea of how we can somehow navigate between the two.
So inside of my code editor I'll find the components directory and inside of components I'm going to
make a new file that I will call the employee list component.
So employee list.
Yes eventually we will use this component to show a list of employees to the user.
But right now we're just going to use it to test a little bit of navigation inside of employee list.
Let's set up a little bit of boilerplate just to have some stuff to show on the screen so we can navigate
between this thing and the log in form at the top of the file.
I will import react and component from re-act import view and text from re-act native and then we'll
make our class employee list.
This is going to extend our component base class we'll define a render method in here and return a little
bit of just kind of garbage GSX for right now.
So make a view and inside of there I'll put a couple of text tags that just have a little bit of gibberish
text.
So nothing really meaningful here is going to say something like employee list.
I'm going to copy that down a couple of times just so we have something to look at.
Finally at the bottom the file I will export the employee list so export default employee list like
so.
All right.
So we've now got another component to add into our router so I'm going to close this file and then go
back over to our router file at the top.
We will import the employee list component that we just made with import employee list from components
employee letzte.
All right now here comes the fun part.
Any time we want to add another component that a user can navigate to inside of our application.
All we have to do is create another scene.
So underneath our current scene of the log in scene I'm going to make another scene component.
So I'm going to say scene like so then I'll give it a key and this key is supposed to at least somewhat
describe the purpose of this scene that we are creating.
Usually I've found that it's good practice to just make it after the component that we're trying to
show.
So in this case I'll give it a key of employee list.
Any time a user navigates to the scene we want to show them the employee list component.
So I'm going to set up a prop of component and I'll pass it the employee list.
So this tells re-act native router flux that whenever someone goes to this scene right here we want
to show this component.
Finally we'll give this thing a title and the title is really anything you want it to be.
It should just be something that makes sense in the context of your application.
So I'm going to give it a title or something like that the employees that works and then one last thing
at the very far end over here don't forget to close off the tag.
All right.
So let's say this will refresh the simulator and see what happens.
So I'm going to refresh and when I do so it looks like we still get the log in screen appearing here.
Well that actually makes a lot of sense right now we designated our log in screen to be the first one
inside this list right here.
So anytime we open up our application we're always going to see this scene component right here.
Now if we want to we can more programmatically tell re-act native router flux which scene we want to
appear first inside of our application and we can do so by adding one additional prop.
So on this second scene I'm going to add in a new prop and I'm going to call it initial initial like
so.
So this initial prop right here will be read by re-act native router flux and the router will say OK
this is going to be the initial scene that we are supposed to show on the screen.
So if we now flip over to the simulator and refresh the page we should see the employee list now appear
rather than the log in form.
Of course we probably always want to start off with a log in form because our expectation is that a
user should really log into our application before we show them any content.
So I'm going to take off the initial prop from the employee list and I'm going to add it to the log
in form instead just to make sure that it's always the one that is going to show up inside of our application
first.
Let's refresh again.
And now we should be back to seeing the log in form appear cool.
So this looks good.
Let's take a break right here and figure out how to navigate between routes in the next video.