1 00:00:00,850 --> 00:00:03,410 The last screen we have to put together is the edit screen. 2 00:00:03,430 --> 00:00:08,710 So on edit we're going to want to make sure that on these show page we can tap on some little Edit icon 3 00:00:08,710 --> 00:00:13,510 right there and then to be taken to a new screen where we can edit some amount of content. 4 00:00:13,520 --> 00:00:17,500 Important thing that we want to note here is that on the edit screen we probably want to have a pre 5 00:00:17,500 --> 00:00:21,700 populated value inside of the title input in the content one as well. 6 00:00:22,570 --> 00:00:28,570 Let's first get started by adding in that little navigation icon to our show screen and we'll also create 7 00:00:28,600 --> 00:00:30,630 our edit screen component as well. 8 00:00:31,320 --> 00:00:31,870 All right. 9 00:00:31,870 --> 00:00:35,070 So I'm going to flip back over to my editor inside my screen strategy. 10 00:00:35,080 --> 00:00:36,430 I'll find the show screen. 11 00:00:36,430 --> 00:00:37,710 Here it is right here. 12 00:00:37,900 --> 00:00:42,100 By the way while I'm inside of here I'm going to very quickly make sure that I display the content of 13 00:00:42,100 --> 00:00:43,520 every blog post as well. 14 00:00:43,720 --> 00:00:47,530 That's actually reflected back inside this mockup but right now our show screen is only showing the 15 00:00:47,530 --> 00:00:53,380 title it's inside of show screen going to duplicate that text element and then the second one will just 16 00:00:53,380 --> 00:00:58,550 display one post dot content it's that definitely works. 17 00:00:58,560 --> 00:01:00,870 Next up we're going to add in that icon. 18 00:01:00,870 --> 00:01:05,640 So remember any time we want to show something inside the header we're going to go underneath our component 19 00:01:06,370 --> 00:01:15,300 will add in show screen dot navigation options and this is going to be a function that Richard needs 20 00:01:15,300 --> 00:01:20,800 to return a configuration object that's going to somehow customize our header. 21 00:01:20,850 --> 00:01:25,950 Remember we already did this one time back inside of our index screen icon side of index screen. 22 00:01:25,950 --> 00:01:27,030 We put it right there. 23 00:01:27,060 --> 00:01:31,230 We returned that object with the header right property and to actually do the navigation we had the 24 00:01:31,230 --> 00:01:33,470 touchable opacity that wrapped an icon. 25 00:01:33,540 --> 00:01:37,180 So we essentially want to do the exact same thing this time around as well. 26 00:01:37,460 --> 00:01:44,520 So back inside of show screen we're gonna place the header right property inside their I'm going to 27 00:01:44,520 --> 00:01:52,570 place a touchable opacity to detect a touch event on that icon and then inside there we need to actually 28 00:01:52,570 --> 00:01:53,820 place an icon as well. 29 00:01:53,830 --> 00:01:59,080 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 30 00:01:59,080 --> 00:02:00,200 current listing. 31 00:02:00,370 --> 00:02:04,960 So once again let's take a look at our icon directory and find some kind of appropriate icon. 32 00:02:05,050 --> 00:02:10,570 So back inside this icon directory we'll do a search for like maybe edit maybe that's going to work. 33 00:02:10,630 --> 00:02:11,440 Let's see. 34 00:02:11,590 --> 00:02:13,620 Now I see a couple of pencils inside of here. 35 00:02:13,630 --> 00:02:19,440 Let's try like I don't know just pencil by itself and yeah this looks a little bit more promising. 36 00:02:19,590 --> 00:02:24,750 So it'd be nice if we could use the feather icon library again but I'm not immediately seeing a result 37 00:02:24,750 --> 00:02:26,070 tied to feather. 38 00:02:26,070 --> 00:02:31,890 So instead I'll just use say How about evil icons and we'll show the pencil icon from there. 39 00:02:31,890 --> 00:02:33,420 Or better yet how about font awesome. 40 00:02:33,420 --> 00:02:36,080 That one looks even a little bit better. 41 00:02:36,170 --> 00:02:37,870 So to show that icon. 42 00:02:38,010 --> 00:02:40,780 We'll go back up to the top of the file. 43 00:02:40,870 --> 00:02:49,020 We will import the name of that icon library so evil icons from at Expo vector dash icons like so 44 00:02:52,060 --> 00:02:58,100 and then back down inside of a touchable opacity we can show evil icons with the name of the name of 45 00:02:58,100 --> 00:03:01,370 our icon which was simply pencil 46 00:03:05,720 --> 00:03:10,400 and then I'll set the size on there as well and I'll once again do something around 30 should probably 47 00:03:10,400 --> 00:03:12,140 work out just fine. 48 00:03:12,150 --> 00:03:14,940 OK let's do a quick test so I'll save this. 49 00:03:14,990 --> 00:03:22,250 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 50 00:03:22,250 --> 00:03:24,020 to import untouchable opacity. 51 00:03:24,020 --> 00:03:31,360 Let's import that really quick at the top from react native so if at the top I will get touchable opacity 52 00:03:33,240 --> 00:03:40,270 that should fix up that error so let's try again really quickly I'll make my new blog post top on that 53 00:03:40,270 --> 00:03:47,080 thing it edit and yeah that looks pretty good the icon could probably be just all a bit larger so I 54 00:03:47,080 --> 00:03:53,310 might increase the size to 35 OK so now we definitely got the icon on there and it's definitely top 55 00:03:53,340 --> 00:03:57,180 of all because it kind of fades out whenever we tap on it we now need to make sure that when we tap 56 00:03:57,180 --> 00:04:02,940 on it we actually navigate over to some edit screen we don't have the edit screen created just yet but 57 00:04:02,970 --> 00:04:07,170 I'm pretty sure that we know that we're going to hook it up to our stack Navigator as a property called 58 00:04:07,290 --> 00:04:08,760 simply edit. 59 00:04:08,910 --> 00:04:14,880 So back over here when we receive or when this function right here gets called remember we receive that 60 00:04:14,880 --> 00:04:21,210 navigation prop sung going to receive navigation and then on touchable opacity we can add in on press 61 00:04:22,310 --> 00:04:29,540 I'll give that thing an arrow function and then whenever we press the button we'll do navigation navigate 62 00:04:30,410 --> 00:04:34,370 and once again we don't yet have the edit route but I'm just going to assume that we will eventually 63 00:04:34,370 --> 00:04:39,210 have it it's all put in edit like so OK. 64 00:04:39,570 --> 00:04:44,100 So let's take a quick pause right here once again when we come back the next video we can start to put 65 00:04:44,100 --> 00:04:48,630 together the edit screen and make sure that tapping on that button actually leads us to another screen.