We've now got that create screen wired up but a user needs to actually be able to navigate over to it
to do so we need to add a little button into our header that will only be displayed on the index screen.
So let's figure out how to first just do that.
Back inside my code editor I'm gonna find the index screen dot J.S. file.
Here it is right here.
I'm going to find the index screen component and I'm going to scroll down underneath it to right above
Stiles right underneath the component.
I'm going to add in a new section here called index screen so that's a direct reference to our functional
component.
And I'll say navigation options equals a function like so and then inside this function we're going
to return an object whenever our index screen is about to be displayed by react navigation react navigation
will automatically call this function that we just assigned to navigation options and then it will inspect
the object that we return we can use this object right here to customize the different things that are
displayed inside of our header and what happens whenever users say taps on them or something like that.
So one option we can set inside this object is header right.
We're going to assign a react element directly to this thing the react element will then be displayed
on the right hand side of the header.
So in our case on the right hand side we want to show some kind of plus icon we could show a text element
with a simple plus inside of it or alternatively we could find another icon from our icon directory
to show as a little plus icon usually a text plus doesn't always show up very nicely.
So we'll use an actual plus icon.
So over at this icon directory I'll do a search for say plus and it looks like I've got a couple of
results here.
Looks like feather once again has a pretty good result so I'll import the feather icon into my index
screen and use the plus icon on the right hand side of the header so I'll first go up to the top of
next screen it looks like we've already imported feather into this.
So we don't need to import it a second time we'll go back down to my header header right and assign
it the feather icon with the name of plus all then also directly assign a size to the thing I'll try
out a size of like 30 just to get started.
Okay.
Let's now save this and make sure that the icon is actually displayed so I'll save that and yep looks
like the icon is there.
Now it's a little bit too far to the right hand side.
I might want to add in a little bit of margin on the right hand side to kind of push it over a little
bit.
But once again I'm not going to really worry about styling too much on this application so I'll just
leave it as is if you want to add in a little bit of margin on the right hand side of the icon.
Go for it.
Now we've got that put together the next we need to do is make sure that if a user taps on this thing
we navigate them to the create screen so that's really two separate steps.
First we have to detect a tap on this icon.
Well we've gone through that process many times remember we can use that touchable opacity element and
then step to actually doing the navigation Well we'll figure that out in just a moment.
Let's first rapper icon with another touchable opacity so we can detect a tap on it.
So I'm gonna wrap my feather with touchable opacity
like so and then I'll add it on the on press prop so inside of here I'll put my arrow function and right
inside that arrow function is where we're going to want to initiate some navigation.
So here's the trick to handling navigation inside of navigation options.
This function right here is going to be called with these same navigation prop that we get up inside
of our index screen component.
So remember up inside of index screen we're pulling off that navigation prop right there and that thing
has the navigate function that allows us to navigate around well we get the same thing down here inside
of navigation options as well so we can d structure off navigation.
Notice the curly braces and then inside of on press we can call navigation dot navigate and then pass
in the name of the route that we want to show.
So once again I'll open up app dot J.S. if you recall the name of our route for the create screen is
simply create with a capital C and so in the navigate call I'll put in create with a capital C as well
and I'll save this I get a little bit of automatic formatting but nothing has changed and that looks
good Gates.
Let's do a quick test so I'll go back over.
I'm going to tap on that icon and I navigate over to the create screen and I can very easily navigate
between the two.
Perfect.
OK.
So now we are showing the create screen.
We can now start to focus on showing the actual form to the user and then adding in a new blog post.
Once the user has actually filled it out.
So let's start to take care of some implementation on the great screen in the next video.