1 00:00:01,060 --> 00:00:06,310 We've now finished up our list screen which is a great little example of our flat list component. 2 00:00:06,310 --> 00:00:10,300 Now before we move on to our next screen that we're going to put together I want to do a little bit 3 00:00:10,300 --> 00:00:14,110 of busy work or a little bit of administrative work on our application. 4 00:00:14,320 --> 00:00:18,530 So at present we have three different screens worth of content that a user can see. 5 00:00:18,630 --> 00:00:24,290 But right now there's no way for a user to navigate between these different screens if you open up your 6 00:00:24,290 --> 00:00:25,670 app dot J.S. file. 7 00:00:25,670 --> 00:00:30,800 You'll recall that inside of here there's an object with a initial root Name property and that property 8 00:00:30,800 --> 00:00:35,950 right there decides what screen is going to be visible when our application first starts up. 9 00:00:35,990 --> 00:00:40,040 Right now it's set to list if we change it to home. 10 00:00:40,280 --> 00:00:41,990 It's going to now show this home screen. 11 00:00:42,020 --> 00:00:48,110 So if I now save this the default screen that we see is the home screen instead so in this next series 12 00:00:48,110 --> 00:00:52,490 of videos I would love if we figured out a better way to show all the different screens that we're putting 13 00:00:52,490 --> 00:00:57,460 together so that we do not have to always be changing this prop right here or this property anytime 14 00:00:57,470 --> 00:00:59,600 one shows some different content. 15 00:00:59,750 --> 00:01:05,660 So to do so I want to turn that home screen into kind of a different experience when our application 16 00:01:05,660 --> 00:01:06,470 first boots up. 17 00:01:06,470 --> 00:01:11,710 We should always show the home screen by default but at the same time on the home screen. 18 00:01:11,750 --> 00:01:13,890 I want to add in two different buttons. 19 00:01:14,090 --> 00:01:18,860 One button a user should be able to tap to go to the component screen and the user should be able to 20 00:01:18,860 --> 00:01:22,090 tap this other button to go to the list screen. 21 00:01:22,090 --> 00:01:25,370 So pulling this off is really going to be two different steps. 22 00:01:25,370 --> 00:01:30,430 The first thing we're going to have to do is figure out how to place two buttons on our home screen. 23 00:01:30,530 --> 00:01:36,320 We're going to have to figure out how to detect whenever a user taps on either this button or this button. 24 00:01:36,320 --> 00:01:40,910 The second thing we're going to have to do is figure out how to actually navigate a user from the home 25 00:01:40,910 --> 00:01:47,330 screen over to components or list so that's what we're going to work on in this video in the next couple 26 00:01:48,270 --> 00:01:48,510 so. 27 00:01:48,520 --> 00:01:49,600 The first thing we need to do. 28 00:01:49,610 --> 00:01:53,270 Like I said we need to show some buttons on the screen showing a button. 29 00:01:53,280 --> 00:01:56,770 It's going to be a little bit more complicated than you might think. 30 00:01:56,780 --> 00:02:01,800 Let me tell you why in the world of React Native if you take a look at the documentation you'll see 31 00:02:01,800 --> 00:02:06,240 that there's actually two different ways of showing a button to a user. 32 00:02:06,270 --> 00:02:10,710 There's one primitive element remember a primitive element is something that we import from the React 33 00:02:10,710 --> 00:02:17,100 Native library and it's called button this primitive element as you might guess is going to show a very 34 00:02:17,100 --> 00:02:19,460 simple button component. 35 00:02:19,560 --> 00:02:22,450 This has very little customization features tied to it. 36 00:02:22,500 --> 00:02:25,200 And essentially it's just going to show something that a user can tap. 37 00:02:25,410 --> 00:02:30,970 And it has the ability to tell you and I as developers whenever a user taps on this button. 38 00:02:31,020 --> 00:02:36,450 The other element that we have access to to make a button is something called touchable opacity. 39 00:02:36,450 --> 00:02:42,630 This is a very customizable primitive component and allows us to essentially tag detect a press event 40 00:02:42,630 --> 00:02:47,580 or like a user tapping on something on just about any kind of element inside our application. 41 00:02:47,580 --> 00:02:52,910 So it could be like a piece of text or an image or just about anything else. 42 00:02:52,920 --> 00:02:57,990 So we've got a button component for very simple interactions in a touchable opacity four sign the kind 43 00:02:57,990 --> 00:03:03,660 of like more complex interactions just so you know why there's these two separate things it used to 44 00:03:03,660 --> 00:03:05,730 be in earlier versions of React Native. 45 00:03:05,730 --> 00:03:10,560 There was only this touchable opacity thing but a lot of people were coming into the React Native World 46 00:03:10,560 --> 00:03:12,640 and saying hey how do I show a button. 47 00:03:12,660 --> 00:03:16,920 Because the name touchable opacity doesn't really make it seem like it's a button at all right. 48 00:03:17,280 --> 00:03:22,110 So eventually the React Native team kind of caved in and said OK we'll create a very simple button so 49 00:03:22,110 --> 00:03:26,130 you can show a button but there's not gonna be a lot of customization options tied to it. 50 00:03:26,130 --> 00:03:30,770 So that's why the there's these two different ways of showing a button to a user. 51 00:03:30,780 --> 00:03:31,000 OK. 52 00:03:31,010 --> 00:03:32,850 So then mind let's take a pause right here. 53 00:03:32,850 --> 00:03:36,350 When we come back the next video we're going to work on our home screen. 54 00:03:36,360 --> 00:03:41,160 We're going to try to show a button using that button primitive and the touchable opacity primitive 55 00:03:41,250 --> 00:03:44,040 as well so quite possible see you in just a minute.