We've now got the ability to navigate over to our component screen.
So now we're going to add the same thing into our touchable opacity.
The code we're going to write for this is going to be just about identical to what we added in two button.
So I'll find the on press callback right here.
Remember this is a function that good that gets ran anytime a user taps on any element inside of touchable
opacity or then remove that console log in I'll replace it with props not navigation not navigate and
then as a string we'll put the name of the route that we want to show.
So the list screen has a root name of list with a capital L..
So back over here we'll call navigate and put in list with a capital L as well okay.
So we'll say this test out really quickly I can now tap on go to list demo and see our list screen appeared
perfect I can go back to my home screen and I can now navigate between all three of these different
screens very easily and just show it on Android as well.
Yep works over here to okay.
So this looks great.
Now last thing I want to do even though I wanted to show you both the button element and the touchable
opacity for our home screen it's kind of strange that two very different types are stylings of buttons
up here.
So last thing I want to do is refactor this touchable opacity into a button as well.
Remember in general the button element is a little bit less powerful and has way fewer configuration
options available to it.
But for this particular case well we really just plain want to show a button or the list demo link.
I think it's going to add in a second button element here.
I'll give it a title of go to list demo an all out in a on press prop remember we're going to give that
thing a zero function like so and then inside there we can call props navigation navigate and we want
to navigate to list and now we can clean up our touchable opacity.
So going to delete that entirely.
All right.
So now we should go to save this but back over and yep there we go.
We've got both them and they look pretty reasonable.
Now on ISIS there's a very clear separation there.
But on Android and those two buttons are right next to each other.
So we'll eventually come back and add in a little bit of styling to this home screen.
But right now we just need to be a little bit careful about which button we actually press OK.
That's pretty much it.
Now last thing I want to mention here is that inside of our on press functions we have some very similar
looking calls.
In both cases we have prop stock navigation not navigate and same thing down here as well.
So if we want to we could use a little feature out of iOS 2015 javascript to slightly condense the code
we've written here.
Notice how we don't have any other reference to this props argument inside of our function.
The only thing we are receiving this props argument for is to refer to that navigation property.
So if we wanted to we could refactor this by deleting props right there putting in a set of parentheses
and then a set of curly braces inside there.
We can then write out the word navigation.
So this is referred to as dy structuring and we're essentially pulling off just the navigation property
from that props object.
We no longer have access to the props object inside of here.
Instead we have access only to the navigation one.
So that means we can shorten up both props dot navigation right here to be just navigation dot navigate
and we can do the same thing for the second one as well.
Just navigation dot navigate.
So that just saves us having to write out that word props a ton of times inside of this component.
We're going to use this pattern quite a bit throughout the course because very very seldom do we ever
want to receive the entire props object.
Usually we just want to pull like one or two properties off of it.
I guess I'll say this again just to make sure everything works and yet still looks good again.
This is fantastic.
Let's take a quick pause right here and move on to the next topic.
Next video.