WEBVTT

1
00:00:00.160 --> 00:00:01.500
Hi and welcome back.

2
00:00:01.530 --> 00:00:03.700
We're very close to our finish line

3
00:00:03.730 --> 00:00:05.940
for this application. So far

4
00:00:05.970 --> 00:00:09.660
to finish up this module,
all we have to do is create this page

5
00:00:09.690 --> 00:00:11.540
here. And we're going to start off

6
00:00:11.570 --> 00:00:14.780
by setting up the back button so

7
00:00:14.810 --> 00:00:20.020
that we're able to navigate to the back
page here in our application.

8
00:00:20.040 --> 00:00:21.940
And I'm going to make this into

9
00:00:21.970 --> 00:00:27.240
a component because we have this button
on another page as well that we're going

10
00:00:27.260 --> 00:00:31.020
to be working on later once
we set up our payment system.

11
00:00:31.050 --> 00:00:35.540
And I want to be able to reuse
our code as much as possible.

12
00:00:35.570 --> 00:00:37.940
And you should always be thinking about

13
00:00:37.960 --> 00:00:42.220
reusability when you're creating
your screens and components.

14
00:00:42.250 --> 00:00:43.880
So we're going to make this

15
00:00:43.910 --> 00:00:47.460
into a component because we
want our code to be reusable.

16
00:00:47.490 --> 00:00:50.460
And we're going to start
with the back button navigation.

17
00:00:50.490 --> 00:00:56.020
So we're going to create a new component
and we're going to call it Back button.

18
00:00:56.050 --> 00:00:59.760
And inside this component we're going
to create a new file and we're going

19
00:00:59.790 --> 00:01:06.050
to call it backbutton JS and we're going
to create a style JS file as well.

20
00:01:06.080 --> 00:01:11.980
And since our single donation items styles
is already empty, I'm just going to copy

21
00:01:12.010 --> 00:01:16.210
this code and I'm going to go to back
button and I'm going to paste it there.

22
00:01:16.240 --> 00:01:18.180
And here we can do the same.

23
00:01:18.210 --> 00:01:22.620
Single donation item has just been
set up so let's just use that.

24
00:01:22.650 --> 00:01:25.160
And instead of single donation item we're

25
00:01:25.190 --> 00:01:28.290
going to use back button
and let's export that.

26
00:01:28.320 --> 00:01:32.980
We don't need this here and we
can delete this as well.

27
00:01:33.010 --> 00:01:37.540
And now we have our back button
initial step complete.

28
00:01:37.570 --> 00:01:40.180
And what we do want to do is make sure

29
00:01:40.210 --> 00:01:42.930
that this back button
shows up on this screen.

30
00:01:42.960 --> 00:01:47.780
And I don't know if you're noticing or
not, but our screen is gray right now so

31
00:01:47.810 --> 00:01:50.380
we're going to have
to take care of that here.

32
00:01:50.410 --> 00:01:52.020
Let's start with that.

33
00:01:52.050 --> 00:01:54.180
First of all, I'm going to move this up

34
00:01:54.210 --> 00:02:00.210
and I'm also going to use the safe area
view and I'm also going to use the scroll

35
00:02:00.240 --> 00:02:08.300
view from React native
to set this page up.

36
00:02:08.330 --> 00:02:10.940
And then I'm going to do safe Area view

37
00:02:10.970 --> 00:02:14.020
here and I'm going to use
some global styles for this.

38
00:02:14.050 --> 00:02:18.860
And inside it I'm going to put the scroll
view and I'm going to say that shows

39
00:02:18.890 --> 00:02:23.680
vertical scroll indicator
should be false because we don't want

40
00:02:23.710 --> 00:02:27.860
to be seeing it when our screen
is going to be scrollable.

41
00:02:27.890 --> 00:02:28.890
Let's save this.

42
00:02:28.920 --> 00:02:31.450
And now let's apply some styles from our

43
00:02:31.480 --> 00:02:39.700
global styles that are very good that we
have set it up because we do want this

44
00:02:39.730 --> 00:02:44.500
reused as much as possible and let's
import the global styles here as well.

45
00:02:44.530 --> 00:02:45.500
Let's save it.

46
00:02:45.530 --> 00:02:49.960
And now we see that part of our screen is
white and because of that we're going

47
00:02:49.990 --> 00:02:55.340
to be using the flex as well that's
set up in our global styles.

48
00:02:55.370 --> 00:02:58.540
So now whole our screen is white.

49
00:02:58.570 --> 00:03:01.820
And what we do want to do here is put

50
00:03:01.850 --> 00:03:09.560
the back button component that we just
created and let's import this component.

51
00:03:09.600 --> 00:03:12.740
And I'm going to organize our
code and put the styles last.

52
00:03:12.770 --> 00:03:15.060
And then what I want to do is go

53
00:03:15.090 --> 00:03:19.900
to the back button here and I want
to start creating this component.

54
00:03:19.930 --> 00:03:23.660
First of all let's start with the fact
that it is pressable, right?

55
00:03:23.690 --> 00:03:25.380
So we're going to have to use

56
00:03:25.410 --> 00:03:31.380
the pressable component and we're going
to have to import it from react native.

57
00:03:31.410 --> 00:03:35.420
So let's import pressable
from react native.

58
00:03:35.450 --> 00:03:41.940
And on press we want something
to happen and what should happen

59
00:03:41.970 --> 00:03:46.100
exactly is going to be handled
from the parent component.

60
00:03:46.130 --> 00:03:48.860
So we're going to have to use props,

61
00:03:48.890 --> 00:03:53.380
and because we're going to have to use
props, we're going to have to import prop

62
00:03:53.410 --> 00:04:00.900
types, and we're going to say,
here that we're expecting an onpress prop

63
00:04:00.930 --> 00:04:04.420
that is going to be required
and it's going to be a function.

64
00:04:04.450 --> 00:04:12.020
And we're going to say here onpress
use props onpress function.

65
00:04:12.050 --> 00:04:15.820
And inside here we have the back arrow.

66
00:04:15.850 --> 00:04:19.300
So we're going to have to use
a fontawesome icon for that.

67
00:04:19.330 --> 00:04:26.860
So let's do that and then let's search
for faArrowLeft

68
00:04:26.890 --> 00:04:33.060
and yes, it exists and we're going to use
the solid icon for that and then again,

69
00:04:33.090 --> 00:04:39.020
I'm going to sort these and I'm going
to the here and let's save this.

70
00:04:39.040 --> 00:04:41.420
And now we see the back button here

71
00:04:41.450 --> 00:04:45.660
and our simulator is complaining
that you're doing nothing on press.

72
00:04:45.690 --> 00:04:49.940
So let's go to single donation
item and say that on press.

73
00:04:49.970 --> 00:04:54.500
What we want to do is use the navigation.

74
00:04:54.530 --> 00:04:57.620
So here we're going to say navigation

75
00:04:57.650 --> 00:05:03.500
and we're going to say navigation, and to
go back, we're going to use a function

76
00:05:03.530 --> 00:05:07.300
called go back.

77
00:05:07.330 --> 00:05:11.540
So now if we were to press on this arrow,
we would just go back.

78
00:05:11.570 --> 00:05:13.580
But we do want to style it.

79
00:05:13.600 --> 00:05:19.820
And let's start with the fact that we have
for the whole page some kind of margins

80
00:05:19.840 --> 00:05:23.620
so we have margin
horizontal of around what?

81
00:05:23.650 --> 00:05:24.620
20.

82
00:05:24.650 --> 00:05:31.640
So let's create a style for our scroll
view and let's just call it container.

83
00:05:31.920 --> 00:05:35.500
And let's go to our styles here.

84
00:05:35.530 --> 00:05:37.500
Define a container.

85
00:05:37.530 --> 00:05:43.758
And we're going to say that margin
horizontal is horizontal scale 20.

86
00:05:43.958 --> 00:05:44.300
Great.

87
00:05:44.330 --> 00:05:50.620
Now, we do want to set this button
up better and follow our designs.

88
00:05:50.650 --> 00:05:53.820
So for that, we're going to go to Styles

89
00:05:53.850 --> 00:05:58.540
and we're going to say that we
need a container here as well.

90
00:05:58.570 --> 00:06:01.940
And that container is going to find
what's the background color.

91
00:06:01.970 --> 00:06:04.780
So let's just copy it from here and say

92
00:06:04.800 --> 00:06:10.460
background color is this,
and then it's going to have some height

93
00:06:10.480 --> 00:06:14.860
and width, and it's 44
for width and height.

94
00:06:14.890 --> 00:06:17.740
And again, our vertical scaling

95
00:06:17.770 --> 00:06:22.740
and horizontal scaling is going to be
returning different values and we have

96
00:06:22.770 --> 00:06:25.860
to make sure that they are
equal because this is a square.

97
00:06:25.890 --> 00:06:29.220
So I'm going to use
horizontal scaling for both.

98
00:06:29.250 --> 00:06:33.300
And I'm going to say width
horizontal scale is 44.

99
00:06:33.330 --> 00:06:36.820
Height horizontal scale is 44.

100
00:06:36.850 --> 00:06:41.060
And we're going to have to have some
kind of border radius for that as well.

101
00:06:41.090 --> 00:06:47.620
And I think because the color is so gray,
you might not be able to see it clearly.

102
00:06:47.650 --> 00:06:51.020
So for a while I'm going to change it

103
00:06:51.040 --> 00:06:55.620
to something different and save
it so that you can see it better.

104
00:06:55.650 --> 00:06:59.620
And then I'm going to apply
it to our pressable.

105
00:06:59.650 --> 00:07:02.460
So let's say style container.

106
00:07:02.480 --> 00:07:07.820
And now we see that this is a square,
so we definitely do need a border radius.

107
00:07:07.850 --> 00:07:10.140
So let's find out how much that is here.

108
00:07:10.170 --> 00:07:11.900
It's given that it's 26.

109
00:07:11.920 --> 00:07:16.980
So let's say border radius,
horizontal scale, 26.

110
00:07:17.010 --> 00:07:21.340
And now this is circular, but we do
want this icon to be centered here.

111
00:07:21.360 --> 00:07:27.380
So let's say align items center
and justify content center.

112
00:07:27.410 --> 00:07:33.940
I think flex one is automatically applied
to every container that you make.

113
00:07:33.970 --> 00:07:37.220
So we don't need to define
it explicitly here.

114
00:07:37.250 --> 00:07:38.900
However, if we did define it,

115
00:07:38.920 --> 00:07:41.900
nothing would really change,
so we don't really need it.

116
00:07:41.920 --> 00:07:47.700
And now I'm going to go back to the
original color and great, that's it.

117
00:07:47.730 --> 00:07:51.100
We might need some kind of margin top,

118
00:07:51.130 --> 00:07:56.660
which is seven, and we can apply it
on our single donation item here.

119
00:07:56.690 --> 00:08:01.300
And we can just apply it to our scroll view.

120
00:08:01.330 --> 00:08:07.282
Let's say margin top,
vertical scale seven.

121
00:08:07.410 --> 00:08:10.660
Great so our back button is ready

122
00:08:10.690 --> 00:08:15.340
and in the next video, on one go,
we're just going to design the whole

123
00:08:15.360 --> 00:08:19.540
screen given here and we're going
to be done with this module.

124
00:08:19.570 --> 00:08:22.180
So far, are you've done amazingly well.

125
00:08:22.210 --> 00:08:26.400
Thanks so much for watching and I can't
wait to see you in the next video.