In the last section we made our first use of the scene component from the re-act native router flux
library.
We did so by making a router component inside of it.
We placed a router tag.
Now this overall router tag is what kind of organizes all the different scenes that we're going to put
together for our application.
Remember each scene corresponds to one distinct screen that we want to show to the user.
Our scene has three properties to it right now a key component and a title as we saw inside the simulator
if we provide a title the routing library will automatically generate a header component for us in place
inside the application.
We can also place the component tag which tells it hey whenever you boot up I want to show this particular
component.
Finally we had passed him the key property and this is going to get a lot more relevant when we want
to navigate between different scenes in our application.
I also had previously mentioned an initial property that initial property is used to figure out what
the first scene to show inside of our app is because we've only got one scene right now we really don't
need to make use of it so we don't need the initial property just yet.
After we finished creating the router we imported it into our component and then placed it inside the
render method.
And so this is where the real magic happens.
You know we place the router somewhere and poof the routing library just fills figures out what needs
to be shown on the screen for us.
All right.
So that brings us up to the present.
The big issue right now.
Yeah.
You know we were able to refresh no errors.
We have a log in form as on the screen we want we have a header but clearly there is something really
funky going on right here.
We've got this kind of overlay of the header on top of our component.
So clearly this doesn't really work for us.
You might wonder why the router library authors decided to make their nav bar behave like this.
You know kind of floating on top of any content behind it.
Well to be honest you know they don't know if you want to use their nav bar as is or if you want to
customize it to behave like a bottom tab bar down here.
So it is up to us to fully customize this menu bar this nav bar appear as much as we want so we can
really tear the thing apart turn it into absolutely anything we want.
So by default the library authors are giving us something that can be heavily customized and so they're
really making no assumptions about it whatsoever.
You know maybe you do want to overlay some content maybe you don't.
I don't know.
You know it's really up to us to figure out what we want to do for us.
Obviously we don't want the overlay here.
So we're going to add a little bit of styling in to fix this issue right here.
We can make some global styling changes by passing a property called Scene style to the router.
So we're going to pass this thing a scene style if we pass this a scene style any style we passed and
here will be applied to all the different scenes on our application when they show up on the screen.
So this is like kind of a you think of this as a global style object right here.
I mean to give it a padding top it's going to hard code in 65 to move it down 65 units.
Now if I refresh it shows up much more reasonably.
So now you can imagine that the kind of the start of this of any component we place in here is you're
right about here because we've got this global 65 patting on top all across our application.
Just for the sake of making sure that everything works well on Android as well.
You know any time we hard code in a style having to do with dimensions we really need to think about
cross-platform compatibility.
So I did also start up my android emulator.
It is let's do a refresh and.
OK.
Definitely looks reasonable.
You'll see it there's definitely a little bit more of a gap here.
We could definitely add in a platform specific check and telling saying like you know hey if we're on
Android maybe only do 60 units or something like that.
But for the purposes of this tutorial I think that you know this looks good.
I'm way more concerned about navigation.
So let's continue with figuring out how navigation works.
All right so at this point in time we've only got a single component to work with the log in form.
So we've got now obviously with navigation we want to figure out how to kind of navigate to different
components of course.
Right we want to navigate to different screens.
So I think that our next step is going to be to create a test component just so we can figure how to
navigate around to different scenes or application.
So let's take a quick break and then come back.
Make a test component and then figure out how we navigate between different scenes in our application