The last screen we have to put together is the edit screen.
So on edit we're going to want to make sure that on these show page we can tap on some little Edit icon
right there and then to be taken to a new screen where we can edit some amount of content.
Important thing that we want to note here is that on the edit screen we probably want to have a pre
populated value inside of the title input in the content one as well.
Let's first get started by adding in that little navigation icon to our show screen and we'll also create
our edit screen component as well.
All right.
So I'm going to flip back over to my editor inside my screen strategy.
I'll find the show screen.
Here it is right here.
By the way while I'm inside of here I'm going to very quickly make sure that I display the content of
every blog post as well.
That's actually reflected back inside this mockup but right now our show screen is only showing the
title it's inside of show screen going to duplicate that text element and then the second one will just
display one post dot content it's that definitely works.
Next up we're going to add in that icon.
So remember any time we want to show something inside the header we're going to go underneath our component
will add in show screen dot navigation options and this is going to be a function that Richard needs
to return a configuration object that's going to somehow customize our header.
Remember we already did this one time back inside of our index screen icon side of index screen.
We put it right there.
We returned that object with the header right property and to actually do the navigation we had the
touchable opacity that wrapped an icon.
So we essentially want to do the exact same thing this time around as well.
So back inside of show screen we're gonna place the header right property inside their I'm going to
place a touchable opacity to detect a touch event on that icon and then inside there we need to actually
place an icon as well.
So like I said we wanted to kind of look like a pencil to tell a user hey you can tap this to edit this
current listing.
So once again let's take a look at our icon directory and find some kind of appropriate icon.
So back inside this icon directory we'll do a search for like maybe edit maybe that's going to work.
Let's see.
Now I see a couple of pencils inside of here.
Let's try like I don't know just pencil by itself and yeah this looks a little bit more promising.
So it'd be nice if we could use the feather icon library again but I'm not immediately seeing a result
tied to feather.
So instead I'll just use say How about evil icons and we'll show the pencil icon from there.
Or better yet how about font awesome.
That one looks even a little bit better.
So to show that icon.
We'll go back up to the top of the file.
We will import the name of that icon library so evil icons from at Expo vector dash icons like so
and then back down inside of a touchable opacity we can show evil icons with the name of the name of
our icon which was simply pencil
and then I'll set the size on there as well and I'll once again do something around 30 should probably
work out just fine.
OK let's do a quick test so I'll save this.
We need to now make a very quick blog post so we'll enter and title I'll tap on it and whoops I forgot
to import untouchable opacity.
Let's import that really quick at the top from react native so if at the top I will get touchable opacity
that should fix up that error so let's try again really quickly I'll make my new blog post top on that
thing it edit and yeah that looks pretty good the icon could probably be just all a bit larger so I
might increase the size to 35 OK so now we definitely got the icon on there and it's definitely top
of all because it kind of fades out whenever we tap on it we now need to make sure that when we tap
on it we actually navigate over to some edit screen we don't have the edit screen created just yet but
I'm pretty sure that we know that we're going to hook it up to our stack Navigator as a property called
simply edit.
So back over here when we receive or when this function right here gets called remember we receive that
navigation prop sung going to receive navigation and then on touchable opacity we can add in on press
I'll give that thing an arrow function and then whenever we press the button we'll do navigation navigate
and once again we don't yet have the edit route but I'm just going to assume that we will eventually
have it it's all put in edit like so OK.
So let's take a quick pause right here once again when we come back the next video we can start to put
together the edit screen and make sure that tapping on that button actually leads us to another screen.