Last we have to do for our home screen is make sure that a user can tap on either this button or this
touchable opacity and get navigated over to the appropriate screen.
So in this video we're going to figure out exactly how to do that.
The first thing I want to remind you about is that inside of our app dot J is file.
This project came pre configured with a stack navigator thing the stack navigator is what's going to
allow us to navigate or essentially change the content that is visible on the screen to our users.
Let's talk about how we can directly manipulate the stack navigator.
Okay.
So quick diagram it's on the left hand side this diagram is our stack navigator.
This is an object like I said.
It decides what to show on the screen at any given point in time.
So the stack navigator itself is responsible for deciding to show home screen list or component screen
when the stack navigator shows any one of these different components.
It renders it in in the process it passes down a set of configuration options.
Remember we refer to these different configuration options as props at this point.
We've only seen an example of props that we pass into a primitive component.
So for example inside of our home screen file you and I passed in a prop to that text element of style.
And here's a prop. We passed into button on press 1 for title and so on.
Props are not limited to just primitive elements created by React Native however components that you
create.
You and I create such as our home screen or list screen or whatever else can also receive props as well.
So in react we can both pass props in which is what you're seeing right here and we can also receive
configuration options or props into a component that we create in the stack navigator shows one of our
components and passes in that props object.
The props object has a lot of different properties tied to it.
One of the properties inside there is a function that we can call inside of our code and tell the stack
navigator that we wanted to change some content that is visible on the screen let's first try to just
receive this props object inside of our home screen component we'll do a console log of the props object
and just kind of inspect some of the different properties or different options that were given inside
of our home screen.
Okay.
So back inside of our home screen undefined concept home screen the function declaration right up here
at the top whenever a component that you and I create is passed a props object.
It always shows up as the first argument to this function.
So we usually call this props like so then inside of our function body we can console logout that prop
subject So now anytime that our home screen appears on our device as it is right here we should see
this console log up here in our terminal at the same exact time.
OK so I'm going to say this if I now flip back over to my terminal
I'll see that console log.
So this big console log right here is all the different properties that exist inside of that props object.
Now reading this console log is a little bit challenging.
So let me just walk you through it very quickly.
This is essentially saying that we've got a prop object like that's the top level object right there
and then inside that object there is a navigation property the navigation property points to an object
and that navigation object has keys of actions at event listener dangerously get parent dismissed dispatch
and so on.
So everything that you're seeing inside this console log right here is all nested inside of navigation
so in other words just make sure it's really clear.
We could update this console log of props to prop start navigation like so and then we'll just see that
inner object.
So I'll say this once again flip back over and now if we scroll down a little bit we should see a second
console log.
There it is right there.
And now we're seeing the console log of just the prop start navigation object just to be clear this
navigation property like this entire object right here is added in specifically by that react navigation
library or more specifically by the stack navigator that we're making use of.
So a normal react component is not going to be just magically provided some big navigation object.
Instead it is specifically given to us because our component is being shown buy that stock and navigator
All right.
So then mind if we now look really carefully inside this object.
You'll notice that inside of here there's one very specific property inside of here and it's called
navigate navigate is a function that we can use to change the content that is visible on the screen
of our device.
We can call this navigation or this navigate function with a string.
If we pass in a string that matches one of the different root names that are defined inside of our apt
J J.S. file.
Let's flip over there really quickly.
So here's app J.S. here's our root object right here that describes all the different routes that we
can navigate to inside of application.
So we can call that navigate function and pass in a string of home or components or list when we do
so will then see the appropriate component appear on the screen immediately.
And that's pretty much it.
That's the whole ballgame okay.
So let's now test this out to test it out.
I'm gonna go back over to my home screen component.
I'm gonna clean up that console log that we have right there and I'm going to find my button and replace
the console log inside there.
So not the entire function just the console log.
I'll replace it with props dot navigation dot navigate.
Again that's a function that we can call and we can pass in a string that points to one of these other
routes that we've defined inside of our stack Navigator.
So in this case there button says go to components demo.
So we probably want to navigate over to components so inside the navigate function I'll put in a string
with components like so and that's pretty much it.
Let's now save this and we'll test out our application I should now be able to tap on go to components
demo and we'll see some navigation automatically occur.
So now we are seeing our components demo screen or component visible and you'll notice inside the header
react navigation that's library we are using to show different content has automatically added in a
back button right there.
If I tap on that back button I go back to the original home screen.
OK.
So it's perfect.
This is exactly what we wanted.
I should be able to replicate all this on my android device as well.
So if I tap on go to components demo yep I navigate over and then in a header right there I've automatically
got a back button that I can tap and go back to my home screen.
Perfect OK.
So let's take a quick pause right here.
When we come back the next video we're going to add in the same functionality to our touchable opacity
as well.