1
00:00:00,860 --> 00:00:05,930
In this video we're going to figure out how to show a button element on our home screen this button

2
00:00:05,930 --> 00:00:10,400
element is going to show the text go to components demo and eventually when a user taps on it we're

3
00:00:10,400 --> 00:00:13,460
going to navigate that user over to the component screen.

4
00:00:13,460 --> 00:00:15,090
So let's give this a shot.

5
00:00:15,140 --> 00:00:21,380
I'm gonna flip back over to my code editor I'm already inside of my home screen dot J.S. file now as

6
00:00:21,380 --> 00:00:26,330
a quick aside here I just want to mention very quickly inside my app dot J.S. file I also change that

7
00:00:26,360 --> 00:00:31,250
initial root name in the last video I did it very quickly I just want to remind you that I changed initial

8
00:00:31,250 --> 00:00:33,180
root name to be home instead.

9
00:00:33,230 --> 00:00:37,550
So now when my application starts up I'm going to see the home screen by default.

10
00:00:37,650 --> 00:00:38,150
All right.

11
00:00:38,190 --> 00:00:41,300
So now inside my home screen file at the very top.

12
00:00:41,400 --> 00:00:44,670
I'm going to import view and button.

13
00:00:44,670 --> 00:00:49,350
I'm only importing view right now because I'm going to use it to wrap this text element and a button

14
00:00:49,350 --> 00:00:51,080
that I'm about to place as well.

15
00:00:51,210 --> 00:00:55,780
Remember from a react component by default we only return a single root element.

16
00:00:55,890 --> 00:01:01,080
So I'm going to use the view to wrap that text and that button I'll first get started by wrapping that

17
00:01:01,080 --> 00:01:02,220
text element with the view

18
00:01:05,520 --> 00:01:06,420
as a quick reminder.

19
00:01:06,450 --> 00:01:10,220
If you had a semicolon at the end of that line of text it needs to be cleaned up.

20
00:01:10,380 --> 00:01:14,820
If you save this file as is you're going to see an error saying that you've got some piece of text outside

21
00:01:14,820 --> 00:01:21,010
of a text element because the semicolon inside of J.S. sex is interpreted as being a piece of text.

22
00:01:21,010 --> 00:01:25,740
You want to print out it's going to clean up that semicolon well then save the file just to make sure

23
00:01:25,740 --> 00:01:27,290
that I don't have any errors.

24
00:01:27,300 --> 00:01:27,500
OK.

25
00:01:27,510 --> 00:01:28,130
Very good.

26
00:01:29,020 --> 00:01:34,810
So now right after that text element I'm going to place a button element a button is a self closing

27
00:01:34,840 --> 00:01:35,510
element.

28
00:01:35,530 --> 00:01:39,260
So notice how I don't have any separate closing tag for the button.

29
00:01:39,280 --> 00:01:44,090
Instead I've got a single forward slash and then a greater than sign right after it.

30
00:01:44,500 --> 00:01:51,610
When we show a button we're not going to pass in some text we want to show inside of it like so we don't

31
00:01:51,610 --> 00:01:52,190
do that.

32
00:01:52,270 --> 00:01:58,280
Instead to show some text inside of a button element we're going to pass it a prop called title it's

33
00:01:58,290 --> 00:02:03,260
going to pass in a title prop and it's going to be a string in J.S..

34
00:02:03,290 --> 00:02:08,630
We can designate a string or pass a string to a prop without using those red curly brackets.

35
00:02:08,660 --> 00:02:13,010
This is one of the very few exceptions when we're trying to assign a value to a prop for just about

36
00:02:13,040 --> 00:02:14,440
every other type of value.

37
00:02:14,480 --> 00:02:19,310
We're always going to use those red curly brackets but for strings we can simply use double quotes like

38
00:02:19,310 --> 00:02:24,720
so so I can give this button a title of exactly what our markup showed back over here.

39
00:02:24,740 --> 00:02:32,580
So go to components demo go to components demo if I then save that I'll see the button appear on the

40
00:02:32,580 --> 00:02:34,840
screen looks good.

41
00:02:34,860 --> 00:02:36,630
That's the default styling of a button.

42
00:02:36,870 --> 00:02:41,000
If you're on android you're going to see the default styling looking like so.

43
00:02:41,160 --> 00:02:44,790
So the button element is going to change how it looks depending upon the platform that you're running

44
00:02:44,790 --> 00:02:45,270
on.

45
00:02:45,360 --> 00:02:48,810
If you're on android you're going to get a very typical looking Android button.

46
00:02:48,920 --> 00:02:54,400
And if you're on IAW you're gonna get that nice kind of blue text button instead so just showing a button

47
00:02:54,460 --> 00:02:57,760
is not quite enough to actually add anything to our application.

48
00:02:57,760 --> 00:03:03,010
We also want to add the ability to run some code or essentially handle whenever user taps on this thing

49
00:03:03,070 --> 00:03:04,350
as well.

50
00:03:04,420 --> 00:03:10,150
So to run some code or respond to a user tapping on that button we can add in an additional prop to

51
00:03:10,150 --> 00:03:14,930
the button element to get started I'm gonna first put a new line inside of here just to give myself

52
00:03:14,930 --> 00:03:18,790
a little bit more space and then either before or after.

53
00:03:18,790 --> 00:03:20,180
It doesn't make a difference.

54
00:03:20,180 --> 00:03:26,440
The title prop we're going to add in another prop called on press and this is a very special prop just

55
00:03:26,440 --> 00:03:27,710
like Title IX.

56
00:03:27,730 --> 00:03:31,220
Notice how I have on and then capital P for press.

57
00:03:31,300 --> 00:03:34,880
If you change the spelling of this prop it's not going to work appropriately.

58
00:03:35,050 --> 00:03:41,650
The button element expects to be passed a prop called specifically on press with exactly that capitalization.

59
00:03:41,650 --> 00:03:42,790
Excuse me capitalization

60
00:03:45,420 --> 00:03:47,290
when we designate the on press prop.

61
00:03:47,340 --> 00:03:49,200
We then pass it a function.

62
00:03:49,260 --> 00:03:54,590
This function is going to be called anytime a user as you might guess presses that button.

63
00:03:54,630 --> 00:03:57,620
So right now let's just try doing a console log inside of here.

64
00:03:57,720 --> 00:04:02,740
It's all due console log button pressed like so.

65
00:04:04,090 --> 00:04:08,780
It's now in theory whenever we press on that button we should see a console log up here so I'll save

66
00:04:08,780 --> 00:04:13,490
this and then press on the button one or two times but I don't immediately see a console log appear

67
00:04:13,520 --> 00:04:14,390
anywhere.

68
00:04:14,420 --> 00:04:16,950
So where do console logs appear when we're running React Native.

69
00:04:17,480 --> 00:04:20,300
Well they always appear in the same terminal window that's running.

70
00:04:20,290 --> 00:04:21,790
Your React Native package.

71
00:04:22,170 --> 00:04:27,940
So if I flip back over to my terminal and find a window that's running my package or I'll see the console

72
00:04:27,940 --> 00:04:34,160
logs right here from the three times I just press that button I can do the same thing on Android as

73
00:04:34,160 --> 00:04:35,040
well.

74
00:04:35,230 --> 00:04:41,160
It's on Android all tab on that button a couple times go back over to my terminal and I can see some

75
00:04:41,160 --> 00:04:44,370
additional number of console logs.

76
00:04:44,520 --> 00:04:48,320
So that's how we use a simple button primitive With React Native.

77
00:04:48,450 --> 00:04:51,180
Again a button primitive is a very simple component.

78
00:04:51,270 --> 00:04:56,640
It's really just going to show a button without really a lot more customized customization options.

79
00:04:56,640 --> 00:05:01,620
We can't change some simple styling options around this thing but for anything more advanced we usually

80
00:05:01,620 --> 00:05:07,110
end up wanting to use that other kind of component for detecting presses call that touchable opacity

81
00:05:07,110 --> 00:05:08,150
thing.

82
00:05:08,190 --> 00:05:09,510
Let's take another quick pause right here.

83
00:05:09,540 --> 00:05:13,660
When we come back the next video we're gonna figure out how to use the touchable opacity instead.

84
00:05:13,830 --> 00:05:18,180
We're just going to do this as kind of like a counterpoint so you can see both different approaches.

85
00:05:18,190 --> 00:05:20,100
It's a quick pause and I'll see you in just a minute.