WEBVTT

1
00:00:00.320 --> 00:00:02.780
Hi and welcome back to our tutorials.

2
00:00:02.810 --> 00:00:07.940
The next thing that we're going to be
building is going to be our button.

3
00:00:07.970 --> 00:00:10.300
We are going to need a primary button

4
00:00:10.330 --> 00:00:14.620
that's displayed at the end of the page
for the details of the donation page.

5
00:00:14.650 --> 00:00:18.100
So let's create this button component.

6
00:00:18.130 --> 00:00:24.580
Let's go here and create a new directory

7
00:00:24.600 --> 00:00:33.500
called button and inside here we're
going to create a button JS file.

8
00:00:33.530 --> 00:00:37.940
We're going to import react from react.

9
00:00:37.960 --> 00:00:43.440
We are going to need a pressable

10
00:00:43.640 --> 00:00:50.100
from react native
and then we are going to create a constant

11
00:00:50.130 --> 00:00:55.540
for button and this is
going to return null.

12
00:00:55.570 --> 00:01:02.100
So far we're going to export
default button.

13
00:01:02.130 --> 00:01:06.360
Great.
Now we need a style for this.

14
00:01:06.640 --> 00:01:14.000
Let's create a style sheet,
create a constant style that uses the style

15
00:01:14.030 --> 00:01:22.600
sheet to create our styles
and then let's export default style.

16
00:01:22.640 --> 00:01:24.140
Great.

17
00:01:24.170 --> 00:01:27.340
So now what we're going to need here is

18
00:01:27.370 --> 00:01:34.540
a pressable
and this pressable is going to have a text

19
00:01:34.570 --> 00:01:41.700
inside and this text is
going to have a title.

20
00:01:41.730 --> 00:01:44.490
So we do need a prop

21
00:01:44.520 --> 00:01:49.460
here and since we have the prop we need
the prop types

22
00:01:49.490 --> 00:01:57.490
and then let's do button prop types
and say that it needs a title that is

23
00:01:57.520 --> 00:02:01.920
going to be required and is
going to be a string.

24
00:02:03.360 --> 00:02:04.460
Great.

25
00:02:04.490 --> 00:02:07.740
Now other than the title we will need its

26
00:02:07.770 --> 00:02:14.220
state whether it is disabled or enabled so
let's say is disabled and this is going

27
00:02:14.250 --> 00:02:17.700
to be a boolean, it's not
going to be required.

28
00:02:17.730 --> 00:02:21.140
We can set up a default value for this

29
00:02:21.170 --> 00:02:26.260
and say that by default
is disabled is false.

30
00:02:26.290 --> 00:02:33.480
And let's set up Disabled State
here and say props is disabled.

31
00:02:33.800 --> 00:02:38.120
And then we are going to need
some styles for this button.

32
00:02:38.600 --> 00:02:40.500
So let's create those styles.

33
00:02:40.530 --> 00:02:44.020
But we do need to be looking at how
this button is looking like.

34
00:02:44.050 --> 00:02:47.100
So let's import

35
00:02:47.130 --> 00:02:58.360
our button from our components and use
this button here with a title of Donate.

36
00:02:58.560 --> 00:03:01.100
So now this appears here

37
00:03:01.130 --> 00:03:06.610
but it doesn't really have any
styles so let's work on that a bit.

38
00:03:06.640 --> 00:03:14.320
Create a style and call this style button

39
00:03:14.680 --> 00:03:17.660
and then we need to import our style

40
00:03:17.690 --> 00:03:24.340
from styles
and we do need to create a button style.

41
00:03:24.370 --> 00:03:32.580
So our button is going to be
following our designs from here

42
00:03:32.610 --> 00:03:38.660
so let's explore what they have
as their design components.

43
00:03:38.690 --> 00:03:40.960
So first of all let's set up

44
00:03:40.990 --> 00:03:46.960
the background color and that is
going to be this value here.

45
00:03:49.800 --> 00:03:52.920
Great.
Now we do need the text styles for this as

46
00:03:52.950 --> 00:04:00.280
well so let's create a style for that
and that would be style title.

47
00:04:00.680 --> 00:04:05.300
So let's go here and do
some styles for title.

48
00:04:05.330 --> 00:04:13.060
Let's click into here, go to inspect
and let's see what they need.

49
00:04:13.090 --> 00:04:17.160
So they need a font family of inter

50
00:04:18.560 --> 00:04:25.500
font size with a scale font size function
that is going to be 16.

51
00:04:25.530 --> 00:04:31.100
And font weight is going to be 500.

52
00:04:31.130 --> 00:04:37.760
And the line height is going
to be scale font size 19.

53
00:04:38.320 --> 00:04:42.260
Great.
Now we missed the color which is white.

54
00:04:42.280 --> 00:04:46.320
So let's give this some color.

55
00:04:47.880 --> 00:04:48.860
Perfect.

56
00:04:48.890 --> 00:04:53.720
And now this needs to be
aligned in the center.

57
00:04:54.280 --> 00:04:55.780
Perfect.

58
00:04:55.800 --> 00:04:59.940
This button has some height which is 55.

59
00:04:59.970 --> 00:05:08.600
So let's give it a height
with a vertical scaling of 55.

60
00:05:08.720 --> 00:05:09.220
Great.

61
00:05:09.250 --> 00:05:13.220
And now we do see that Donate
is right at the top.

62
00:05:13.250 --> 00:05:17.100
So we do need to add something from flex.

63
00:05:17.130 --> 00:05:20.420
So our flex direction by default right now

64
00:05:20.450 --> 00:05:29.120
is column and to center this vertically
justify content center.

65
00:05:29.400 --> 00:05:31.120
Great.

66
00:05:31.720 --> 00:05:34.900
So now we need some borders, which is 50.

67
00:05:34.920 --> 00:05:45.080
So let's give this border radius
of horizontal scale 50.

68
00:05:45.960 --> 00:05:47.720
Perfect.

69
00:05:48.120 --> 00:05:50.860
And I think our button is done.

70
00:05:50.890 --> 00:05:56.780
Let's think about how we want this button
to look like when it's disabled

71
00:05:56.800 --> 00:06:02.060
right now it seems like it is
enabled, but let's test that.

72
00:06:02.090 --> 00:06:05.080
Let's say on press

73
00:06:06.960 --> 00:06:13.320
console log pressed save this.

74
00:06:17.520 --> 00:06:24.820
And let's go to our terminal
and it seems like it's being pressed.

75
00:06:24.850 --> 00:06:27.860
So let's say that if our button is

76
00:06:27.890 --> 00:06:34.900
disabled we are going to add some styling
here so let's say Props is disabled

77
00:06:34.920 --> 00:06:42.820
added style disabled
let's save this and go here and create

78
00:06:42.850 --> 00:06:50.640
a disabled style and let's say whenever
this is disabled it has opacity of 0.5.

79
00:06:50.720 --> 00:06:55.520
So now let's test how that would
look like from our home.

80
00:06:56.080 --> 00:06:59.900
So let's create another button
and say that it disabled

81
00:06:59.920 --> 00:07:01.840
is true.

82
00:07:02.200 --> 00:07:03.920
Great.

83
00:07:04.200 --> 00:07:08.580
So now if we test whether

84
00:07:08.600 --> 00:07:13.320
this is pressable we're going to see
that it is not I'm pressing right now so

85
00:07:13.350 --> 00:07:18.180
if I press this we'll get console log
but on the disabled one I don't get it so

86
00:07:18.210 --> 00:07:20.580
that's great, that's
what we needed exactly.

87
00:07:20.600 --> 00:07:25.660
We're going to need a function
to execute when the button is pressed.

88
00:07:25.690 --> 00:07:32.100
So let's say props on press is what runs
when this button is clicked.

89
00:07:32.130 --> 00:07:39.660
And let's set up a prop on press
and it's going to be of a type function.

90
00:07:39.690 --> 00:07:43.940
And let's set up a default value on press.

91
00:07:43.970 --> 00:07:47.660
Just going to be an empty function.
Great.

92
00:07:47.690 --> 00:07:50.800
So now if we were to

93
00:07:51.120 --> 00:07:59.440
go to our home and say that onpress
we want a function to run

94
00:08:00.480 --> 00:08:08.340
let's save this and let's say this should
console log you just pressed to me

95
00:08:08.360 --> 00:08:16.980
let's save this, go here and we see
that our prop function works perfect.

96
00:08:17.010 --> 00:08:19.460
I think we're all done with our button

97
00:08:19.480 --> 00:08:24.140
component and now we can
move on to something else.

98
00:08:24.160 --> 00:08:26.760
Thanks so much for watching
and I'll see you in the next video.