1 00:00:01,220 --> 00:00:04,470 We've now got the ability to navigate over to our component screen. 2 00:00:04,510 --> 00:00:07,470 So now we're going to add the same thing into our touchable opacity. 3 00:00:07,700 --> 00:00:11,700 The code we're going to write for this is going to be just about identical to what we added in two button. 4 00:00:12,070 --> 00:00:14,180 So I'll find the on press callback right here. 5 00:00:14,180 --> 00:00:19,490 Remember this is a function that good that gets ran anytime a user taps on any element inside of touchable 6 00:00:19,490 --> 00:00:28,490 opacity or then remove that console log in I'll replace it with props not navigation not navigate and 7 00:00:28,490 --> 00:00:32,340 then as a string we'll put the name of the route that we want to show. 8 00:00:32,680 --> 00:00:37,310 So the list screen has a root name of list with a capital L.. 9 00:00:37,400 --> 00:00:42,950 So back over here we'll call navigate and put in list with a capital L as well okay. 10 00:00:42,950 --> 00:00:49,520 So we'll say this test out really quickly I can now tap on go to list demo and see our list screen appeared 11 00:00:49,940 --> 00:00:55,900 perfect I can go back to my home screen and I can now navigate between all three of these different 12 00:00:55,900 --> 00:01:00,230 screens very easily and just show it on Android as well. 13 00:01:00,240 --> 00:01:02,770 Yep works over here to okay. 14 00:01:02,780 --> 00:01:04,120 So this looks great. 15 00:01:04,120 --> 00:01:08,260 Now last thing I want to do even though I wanted to show you both the button element and the touchable 16 00:01:08,260 --> 00:01:14,410 opacity for our home screen it's kind of strange that two very different types are stylings of buttons 17 00:01:14,410 --> 00:01:15,170 up here. 18 00:01:15,180 --> 00:01:19,900 So last thing I want to do is refactor this touchable opacity into a button as well. 19 00:01:19,900 --> 00:01:25,180 Remember in general the button element is a little bit less powerful and has way fewer configuration 20 00:01:25,210 --> 00:01:26,590 options available to it. 21 00:01:26,710 --> 00:01:32,070 But for this particular case well we really just plain want to show a button or the list demo link. 22 00:01:32,080 --> 00:01:39,000 I think it's going to add in a second button element here. 23 00:01:39,100 --> 00:01:48,020 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 24 00:01:48,020 --> 00:01:56,350 thing a zero function like so and then inside there we can call props navigation navigate and we want 25 00:01:56,350 --> 00:02:01,800 to navigate to list and now we can clean up our touchable opacity. 26 00:02:01,850 --> 00:02:05,700 So going to delete that entirely. 27 00:02:05,710 --> 00:02:05,950 All right. 28 00:02:05,960 --> 00:02:10,330 So now we should go to save this but back over and yep there we go. 29 00:02:10,330 --> 00:02:12,830 We've got both them and they look pretty reasonable. 30 00:02:13,180 --> 00:02:16,210 Now on ISIS there's a very clear separation there. 31 00:02:16,260 --> 00:02:19,780 But on Android and those two buttons are right next to each other. 32 00:02:19,950 --> 00:02:22,980 So we'll eventually come back and add in a little bit of styling to this home screen. 33 00:02:22,990 --> 00:02:28,400 But right now we just need to be a little bit careful about which button we actually press OK. 34 00:02:28,440 --> 00:02:29,830 That's pretty much it. 35 00:02:29,870 --> 00:02:35,300 Now last thing I want to mention here is that inside of our on press functions we have some very similar 36 00:02:35,300 --> 00:02:36,620 looking calls. 37 00:02:36,620 --> 00:02:41,840 In both cases we have prop stock navigation not navigate and same thing down here as well. 38 00:02:41,840 --> 00:02:48,050 So if we want to we could use a little feature out of iOS 2015 javascript to slightly condense the code 39 00:02:48,050 --> 00:02:49,400 we've written here. 40 00:02:49,400 --> 00:02:53,660 Notice how we don't have any other reference to this props argument inside of our function. 41 00:02:53,660 --> 00:02:58,840 The only thing we are receiving this props argument for is to refer to that navigation property. 42 00:02:58,910 --> 00:03:05,840 So if we wanted to we could refactor this by deleting props right there putting in a set of parentheses 43 00:03:06,290 --> 00:03:08,930 and then a set of curly braces inside there. 44 00:03:08,930 --> 00:03:11,730 We can then write out the word navigation. 45 00:03:11,800 --> 00:03:16,750 So this is referred to as dy structuring and we're essentially pulling off just the navigation property 46 00:03:16,960 --> 00:03:18,970 from that props object. 47 00:03:18,970 --> 00:03:21,880 We no longer have access to the props object inside of here. 48 00:03:21,880 --> 00:03:25,280 Instead we have access only to the navigation one. 49 00:03:25,320 --> 00:03:31,210 So that means we can shorten up both props dot navigation right here to be just navigation dot navigate 50 00:03:31,720 --> 00:03:33,850 and we can do the same thing for the second one as well. 51 00:03:33,850 --> 00:03:36,310 Just navigation dot navigate. 52 00:03:36,430 --> 00:03:41,380 So that just saves us having to write out that word props a ton of times inside of this component. 53 00:03:41,530 --> 00:03:46,390 We're going to use this pattern quite a bit throughout the course because very very seldom do we ever 54 00:03:46,390 --> 00:03:48,540 want to receive the entire props object. 55 00:03:48,550 --> 00:03:52,360 Usually we just want to pull like one or two properties off of it. 56 00:03:52,370 --> 00:03:57,740 I guess I'll say this again just to make sure everything works and yet still looks good again. 57 00:03:57,760 --> 00:03:58,870 This is fantastic. 58 00:03:58,870 --> 00:04:01,530 Let's take a quick pause right here and move on to the next topic. 59 00:04:01,550 --> 00:04:02,260 Next video.