1 00:00:00,820 --> 00:00:03,850 We've now seen an example of the very simple button element. 2 00:00:03,850 --> 00:00:08,350 Now we're going to go through the same process with a touchable opacity touchable opacity works slightly 3 00:00:08,350 --> 00:00:12,760 differently but chances are you're going to end up using touchable opacity in a lot of your applications 4 00:00:13,000 --> 00:00:15,010 more frequently than you're going to use a button. 5 00:00:15,010 --> 00:00:16,840 So let's give this a shot. 6 00:00:16,940 --> 00:00:22,240 I'll flip back over to my home screen component and at the top I'm going to add in an import for touchable 7 00:00:22,720 --> 00:00:30,040 opacity from React Native as well then right after my button I'm gonna place a touchable opacity 8 00:00:32,900 --> 00:00:35,530 in touchable opacity is not a self closing element. 9 00:00:35,540 --> 00:00:42,520 So notice how I put down an opening and closing tab then inside of here we're going to add in some number 10 00:00:42,520 --> 00:00:43,620 of elements. 11 00:00:43,840 --> 00:00:49,540 Whenever a user taps on any of the elements inside of here the touchable opacity will detect that tab 12 00:00:49,780 --> 00:00:55,000 and give us some kind of notification in the form of a on press event just like the one we assigned 13 00:00:55,000 --> 00:00:57,060 to button right there. 14 00:00:57,070 --> 00:01:03,770 So in this case I'm going to add in a text element inside of the touchable opacity I'll then give it 15 00:01:03,770 --> 00:01:09,950 some text like about what do we show in our markup back over here go to list demo let's do that go to 16 00:01:10,010 --> 00:01:12,710 list demo OK. 17 00:01:12,750 --> 00:01:15,520 Let's save this as is and see what happens. 18 00:01:16,490 --> 00:01:19,460 So I can now see that text appear in my application. 19 00:01:19,460 --> 00:01:22,420 Notice how by default that text gets no styling. 20 00:01:22,520 --> 00:01:27,230 So that's one benefit to using the button element by element by default has some nice styling it tied 21 00:01:27,230 --> 00:01:28,400 to it. 22 00:01:28,400 --> 00:01:34,440 If I now tap on that text you'll notice that it kind of fades out very briefly and then comes back in. 23 00:01:34,640 --> 00:01:37,610 That behavior is added in by the touchable opacity. 24 00:01:37,610 --> 00:01:42,620 The word opacity inside there indicates that whenever you tap on an element that is listed inside of 25 00:01:42,620 --> 00:01:46,530 touchable opacity it's going to very briefly kind of fade out. 26 00:01:46,610 --> 00:01:50,660 The idea there is that it's going to give some feedback to our users and let them know that hey you 27 00:01:50,660 --> 00:01:53,840 just tapped on like that thing right there. 28 00:01:53,840 --> 00:01:58,520 This automatic kind of fade effect is going to work on any kind of element that we put inside of a touchable 29 00:01:58,520 --> 00:01:59,750 opacity. 30 00:01:59,750 --> 00:02:05,660 So if we also put in say some kind of image or an icon and then tapped on it it would have a very similar 31 00:02:05,720 --> 00:02:10,600 fade out effect so it's kind of a nice benefit to using the touchable opacity. 32 00:02:10,800 --> 00:02:12,650 We can show any kind of element inside of it. 33 00:02:12,690 --> 00:02:17,570 And if a user taps on it they're going to get an immediate little piece of feedback. 34 00:02:17,630 --> 00:02:22,800 It's now to detect a press event we're going to assign in on press prop just like we did for our button 35 00:02:23,100 --> 00:02:24,790 to the touchable opacity. 36 00:02:24,950 --> 00:02:31,680 So inside of touchable opacity on the opening tab to be opening tag I'll say on press well then assign 37 00:02:31,710 --> 00:02:36,520 an era function and I'll do a console log inside of here right now as well. 38 00:02:36,760 --> 00:02:39,620 For this one I'll say list rest. 39 00:02:39,640 --> 00:02:40,060 Like so 40 00:02:43,600 --> 00:02:52,660 I'll save that now if I tap on that text and then flip back over to my terminal window I'll see list 41 00:02:52,660 --> 00:02:53,490 pressed. 42 00:02:53,500 --> 00:02:56,550 Perfect all right. 43 00:02:56,550 --> 00:03:01,600 So this is a very simple demonstration of some of the differences between button and touchable opacity. 44 00:03:01,650 --> 00:03:06,420 The big difference is is that a button is going to essentially just show some pre styled text inside 45 00:03:06,420 --> 00:03:08,470 of it and that's pretty much it. 46 00:03:08,590 --> 00:03:13,230 The touchable opacity on the other hand is going to allow us to put in any kind of element we want inside 47 00:03:13,230 --> 00:03:13,990 of here. 48 00:03:14,040 --> 00:03:16,800 We could even put in multiple elements if we wanted to. 49 00:03:16,800 --> 00:03:21,420 So for example it's for some crazy reason we want to have like multiple pieces of text. 50 00:03:21,420 --> 00:03:24,780 Those will all be displayed when I get my emulator back up here really quickly. 51 00:03:24,780 --> 00:03:25,620 There we go. 52 00:03:26,500 --> 00:03:29,430 All three pieces of text are displayed in if I tap on any of them. 53 00:03:29,560 --> 00:03:32,150 An entire block of text is going to fade out. 54 00:03:32,170 --> 00:03:37,210 Now obviously having like multiple pieces of text fade out or be principle is not super useful but you 55 00:03:37,210 --> 00:03:41,920 might imagine that maybe you want to have like a really big image that a user can press on and maybe 56 00:03:41,920 --> 00:03:45,180 also have like a piece of tax like a title underneath it. 57 00:03:45,370 --> 00:03:50,590 And whenever a user tapped on either the image or that piece of text maybe we would want to respond 58 00:03:50,590 --> 00:03:54,990 to that and the touchable opacity would be perfect for that. 59 00:03:55,030 --> 00:03:59,140 So right now we're just kind of trying to get a better idea of how to touchable opacity works or we're 60 00:03:59,140 --> 00:04:04,440 gonna get some good examples of the power of it in some later applications that we put together. 61 00:04:04,480 --> 00:04:04,690 Okay. 62 00:04:04,720 --> 00:04:08,200 So now we've seen both our button and our touchable opacity. 63 00:04:08,230 --> 00:04:12,730 The last thing you have to do is figure out how to navigate a user over to the components demo or the 64 00:04:12,730 --> 00:04:14,890 list demo whenever they tap on it. 65 00:04:15,070 --> 00:04:17,760 So we'll figure out how to handle that navigation in the next video.