WEBVTT

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

2
00:00:01.650 --> 00:00:04.180
Now that we have our fontawesome icons

3
00:00:04.210 --> 00:00:09.460
installed, all we need to do is start
creating the search component given here.

4
00:00:09.490 --> 00:00:10.660
So let's do that.

5
00:00:10.690 --> 00:00:12.800
I'm going to put my editor here and I'm

6
00:00:12.830 --> 00:00:18.580
going to get rid of everything on our
home screen so that it has a blank view.

7
00:00:18.600 --> 00:00:20.720
And what we're going to do later is we're

8
00:00:20.740 --> 00:00:23.540
just going to put the search
input component here.

9
00:00:23.570 --> 00:00:26.500
So that what we're building.

10
00:00:26.520 --> 00:00:29.980
And for that, we're going to need
to create the search input component.

11
00:00:30.010 --> 00:00:32.020
So let's do that. Here

12
00:00:32.050 --> 00:00:35.900
we're going to create a new directory
and we're going to call it Search.

13
00:00:35.930 --> 00:00:38.540
And inside it we're going
to create two files.

14
00:00:38.570 --> 00:00:47.700
One is going to be named Search JS
and another one is going to be Style JS.

15
00:00:47.720 --> 00:00:49.700
Here we're just going to place our styles

16
00:00:49.730 --> 00:00:53.860
and we're going to have
to import the style sheet.

17
00:00:53.890 --> 00:00:55.620
And then we're going to define our

18
00:00:55.650 --> 00:00:59.380
constant for styles
and create the style sheet.

19
00:00:59.410 --> 00:01:02.260
And we're not going to place
any styles here yet.

20
00:01:02.290 --> 00:01:06.050
We're just going to export default

21
00:01:06.080 --> 00:01:10.540
styles so that we're able to use
this in our search component.

22
00:01:10.560 --> 00:01:12.740
And here we're just going
to do regular stuff.

23
00:01:12.770 --> 00:01:16.290
Let's import react from react.

24
00:01:16.320 --> 00:01:22.520
Let's create the constant
for our search component.

25
00:01:22.560 --> 00:01:31.540
Let's make it return null so far
and let's export default search.

26
00:01:31.570 --> 00:01:37.000
Now let's use this search component on our
home screen so that we're able to see what

27
00:01:37.030 --> 00:01:45.920
we're building
and let's make sure that it's imported.

28
00:01:46.920 --> 00:01:48.570
Great.

29
00:01:48.600 --> 00:01:50.980
And now we see our blank screen again

30
00:01:51.010 --> 00:01:54.460
because our component is
actually returning null.

31
00:01:54.490 --> 00:02:00.420
Let's import the style from our styles
and start building this component.

32
00:02:00.450 --> 00:02:03.490
So what are we going to need for this?

33
00:02:03.520 --> 00:02:05.900
Let's analyze our design.

34
00:02:05.930 --> 00:02:11.170
So we're going to need an input text
input component from react native.

35
00:02:11.200 --> 00:02:13.500
And it's going to have to be in some kind

36
00:02:13.530 --> 00:02:19.780
of container because we are also
going to have to use the search icon.

37
00:02:19.810 --> 00:02:23.860
And we can't provide icons
with text input component.

38
00:02:23.890 --> 00:02:29.300
So we're going to have to use
a view container.

39
00:02:29.330 --> 00:02:37.600
Let's import view and text
input from React native.

40
00:02:38.840 --> 00:02:42.100
And let's create a view component inside

41
00:02:42.130 --> 00:02:46.540
which we're going to place
our text input component.

42
00:02:46.570 --> 00:02:52.060
And we're also going to need the font
of some icon with faSearch value.

43
00:02:52.090 --> 00:02:55.500
And let's import this faSearch as well.

44
00:02:55.530 --> 00:03:02.440
And now we're getting some kind of error.

45
00:03:04.160 --> 00:03:06.100
I'm going to reload my application.

46
00:03:06.130 --> 00:03:08.460
Okay, now it's all good.

47
00:03:08.490 --> 00:03:11.610
It was just some random
error because of pods.

48
00:03:11.640 --> 00:03:15.580
So Reloading did it great.

49
00:03:15.610 --> 00:03:21.220
So now that we have our view and our text
input component, we see that we're not

50
00:03:21.250 --> 00:03:24.940
really able to see where our
text input component is.

51
00:03:24.970 --> 00:03:28.020
So let's apply some styles to it.

52
00:03:28.050 --> 00:03:36.600
Let's say that style for the text input
component is called style search input.

53
00:03:36.720 --> 00:03:41.420
And let's create this
search input styles here.

54
00:03:41.450 --> 00:03:46.220
And let's just give it
border width of one.

55
00:03:46.250 --> 00:03:48.380
And now we see that it's actually located

56
00:03:48.410 --> 00:03:53.820
below the icon and we want
it to be side by side.

57
00:03:53.850 --> 00:03:57.900
So we're going to have to use flex
here with a direction of row.

58
00:03:57.920 --> 00:03:59.700
So we're going to have to create a style

59
00:03:59.730 --> 00:04:05.300
for the container and let's
call it search input container.

60
00:04:05.330 --> 00:04:14.980
Let's copy this and paste it in our styles
and let's say flex direction row.

61
00:04:15.010 --> 00:04:19.060
And once we do that,
we see that our text input component

62
00:04:19.090 --> 00:04:22.700
becomes very small,
which we don't want to do because

63
00:04:22.720 --> 00:04:27.260
otherwise users would have to click
exactly here to be able to type.

64
00:04:27.280 --> 00:04:31.900
So let's give this a flex of one
so that it takes up all the space.

65
00:04:31.920 --> 00:04:34.220
Here we actually see that

66
00:04:34.250 --> 00:04:39.940
between the icons and the input
component we have some kind of margin.

67
00:04:39.970 --> 00:04:43.060
So let's set that margin
for the search input container.

68
00:04:43.090 --> 00:04:46.140
And let's say that margin left is going

69
00:04:46.160 --> 00:04:51.140
to be of horizontal scale 6
because that's what's given here.

70
00:04:51.160 --> 00:04:55.860
Oh, I applied it to search input container
so let's move it to search input instead.

71
00:04:55.890 --> 00:04:57.380
Great.

72
00:04:57.410 --> 00:05:02.180
And now what we want to do is we are going
to have to have some kind of padding

73
00:05:02.210 --> 00:05:08.820
horizontal as well so that icon has some
room to breathe inside the container.

74
00:05:08.840 --> 00:05:11.560
So let's say that search input container

75
00:05:11.590 --> 00:05:19.580
has a padding horizontal of horizontal
scale 16 as given in the design.

76
00:05:19.600 --> 00:05:22.300
We also need some kind of background.

77
00:05:22.330 --> 00:05:25.340
So let's copy the color from here

78
00:05:25.360 --> 00:05:29.800
and apply the background
color to the container.

79
00:05:30.960 --> 00:05:34.940
Great.
And we also need some height which is 50.

80
00:05:34.970 --> 00:05:39.180
So let's set height to vertical scale of

81
00:05:39.210 --> 00:05:44.260
50 and let's import the vertical scale
function so that we don't get any errors.

82
00:05:44.290 --> 00:05:47.400
And now we see that our search icons is

83
00:05:47.420 --> 00:05:51.540
actually at the very top so we're
going to have to vertically center it.

84
00:05:51.570 --> 00:05:55.820
Since our flex direction is row,
we need the cross axis centering.

85
00:05:55.850 --> 00:06:03.140
So we're going to choose align items
center and that should fix it.

86
00:06:03.160 --> 00:06:06.060
Great.
So now if the user is going to want

87
00:06:06.090 --> 00:06:09.740
to type something,
if they're going to press outside

88
00:06:09.770 --> 00:06:16.620
of the text input, we're going to see
that we can't focus and start typing.

89
00:06:16.650 --> 00:06:19.500
I'm going to have to press
exactly here to start typing.

90
00:06:19.520 --> 00:06:21.420
So we're going to have to fix that problem

91
00:06:21.450 --> 00:06:26.700
and that problem is going
to be fixed with refs.

92
00:06:26.730 --> 00:06:30.940
But in order for us to catch the press,

93
00:06:30.970 --> 00:06:34.500
instead of view, we're going to have
to use the pressable component.

94
00:06:34.520 --> 00:06:35.300
So let's do that.

95
00:06:35.330 --> 00:06:38.180
And instead of view,
let's import the pressable.

96
00:06:38.210 --> 00:06:46.120
It shouldn't change our design and let's
set up a function called Handle focus.

97
00:06:47.960 --> 00:06:50.100
And this function is going to take care

98
00:06:50.130 --> 00:06:54.780
of when the text input
is going to be focused.

99
00:06:54.800 --> 00:07:01.020
But to get a reference to the text inputs
dom, we're going to have to use refs.

100
00:07:01.040 --> 00:07:08.260
So let's import the user hook,
create a constant for text input reference

101
00:07:08.290 --> 00:07:11.860
and let's use ref with
initial value of null.

102
00:07:11.890 --> 00:07:19.620
And let's set the reference here and say
that we need to use text input ref.

103
00:07:19.650 --> 00:07:24.300
So now on press
we're going to call the handle focus

104
00:07:24.330 --> 00:07:28.020
function
and inside here we're going to use

105
00:07:28.040 --> 00:07:33.140
the text input reference,
its current value and we're going to call

106
00:07:33.170 --> 00:07:37.820
the function focus that comes
with the text input references.

107
00:07:37.850 --> 00:07:44.500
And I'm just going to move this up above
Handle focus so that we know exactly what

108
00:07:44.530 --> 00:07:48.220
variables we're using and if
we see how this works.

109
00:07:48.250 --> 00:07:52.060
Now if I click outside of the text input

110
00:07:52.090 --> 00:07:59.500
container we're going to see that I'm able
to focus and start typing as I need to.

111
00:07:59.530 --> 00:08:04.660
And also our text input here
has a very small height.

112
00:08:04.690 --> 00:08:11.240
So let's take care of that and make sure
that text input gets height of 100%.

113
00:08:12.600 --> 00:08:14.500
Great.
Once we start typing,

114
00:08:14.530 --> 00:08:19.500
we see that the font styling is
kind of different from our design.

115
00:08:19.530 --> 00:08:21.540
So let's take care of that.

116
00:08:21.570 --> 00:08:25.980
Let's go here and see what kind
of font styling they need.

117
00:08:26.010 --> 00:08:29.700
Let's set up font family for inter,

118
00:08:29.730 --> 00:08:35.740
font size for scale, font size 14 and
their line height is actually similar.

119
00:08:35.770 --> 00:08:41.300
So I'm just going to copy this line
and replace font size with line height.

120
00:08:41.320 --> 00:08:46.880
And if I go back and I start typing,
I think the main reason we don't see

121
00:08:46.910 --> 00:08:51.180
the change is because of color given here,
which I forgot to include.

122
00:08:51.200 --> 00:08:54.220
So let's do that.

123
00:08:54.250 --> 00:08:57.340
And now let's see the design and our

124
00:08:57.370 --> 00:09:03.020
simulator and great,
they match up, which is great.

125
00:09:03.050 --> 00:09:06.980
And I also see that we don't have
the border radius set for our container.

126
00:09:07.010 --> 00:09:08.820
So let's do that.

127
00:09:08.850 --> 00:09:13.620
Let's say border radius, horizontal scale

128
00:09:13.650 --> 00:09:19.900
15
and now we have the border radius of 15

129
00:09:19.930 --> 00:09:22.980
and we don't really need
this width anymore.

130
00:09:23.010 --> 00:09:29.200
And what we do need to do is
make sure that fontawesome icons matches up

131
00:09:29.230 --> 00:09:33.520
with this color here,
which is this one here.

132
00:09:33.840 --> 00:09:43.020
So let's go here and say color
and the size is of 22.

133
00:09:43.050 --> 00:09:49.860
So let's set the size to scale font size
22 and let's save this.

134
00:09:49.890 --> 00:09:51.900
Let's see how it looks.

135
00:09:51.930 --> 00:09:54.380
And it looks great.

136
00:09:54.410 --> 00:10:00.700
So now what we're not going to do is we're
not going to give this margin

137
00:10:00.730 --> 00:10:06.300
in a component because we don't want to be
controlling the margins from the component

138
00:10:06.320 --> 00:10:10.940
because we're not going to have as much
flexibility when using this component.

139
00:10:10.970 --> 00:10:13.780
What if we want the margins
to be 36 or twelve?

140
00:10:13.810 --> 00:10:17.900
So if we want that to happen,
we're just going to have to put this

141
00:10:17.930 --> 00:10:21.460
in a view container that has
a margin horizontal of 24.

142
00:10:21.490 --> 00:10:23.480
What we also need to think about is how

143
00:10:23.510 --> 00:10:26.820
we're going to take care of what
the user is typing here.

144
00:10:26.850 --> 00:10:31.400
We're going to have to do some action
on anything that user types here and we

145
00:10:31.430 --> 00:10:35.220
are not having any ability to do
that from the home screen currently.

146
00:10:35.250 --> 00:10:40.340
So we're going to have to set up a prop
with a function that handles the search.

147
00:10:40.370 --> 00:10:41.380
So let's do that.

148
00:10:41.410 --> 00:10:47.140
Let's say that we're going to have props
here and we're going to have to import

149
00:10:47.170 --> 00:10:51.620
prop types from prop types to make
sure that we have our type checking.

150
00:10:51.650 --> 00:10:52.900
So let's do that.

151
00:10:52.930 --> 00:10:57.660
Let's set up search
default props first of all and say

152
00:10:57.690 --> 00:11:03.080
that on search
is going to have to be a function

153
00:11:03.280 --> 00:11:06.660
and this is not going
to be a required prop.

154
00:11:06.690 --> 00:11:09.100
It's fine if the user doesn't want to pass

155
00:11:09.130 --> 00:11:16.600
anything here and we're going to say that
on search will have to be a function.

156
00:11:17.800 --> 00:11:22.460
So we're going to type check like
that and we're going to have to give this

157
00:11:22.490 --> 00:11:25.860
function a value every
time user uses it here.

158
00:11:25.890 --> 00:11:32.060
So we're going to have to track the state
of the variable that user types here.

159
00:11:32.080 --> 00:11:39.020
So let's use state
and let's set up search as a value.

160
00:11:39.050 --> 00:11:40.420
Let's set search,

161
00:11:40.450 --> 00:11:45.240
let's call useState with an empty string
value

162
00:11:45.840 --> 00:11:55.700
and let's say that the text inputs value
is equal to search and every time its text

163
00:11:55.730 --> 00:12:04.100
changes we're going to have to get this
value and call handle search function.

164
00:12:04.130 --> 00:12:06.220
We're going to pass this value

165
00:12:06.250 --> 00:12:10.540
to the handle search and we're going
to have to set up that Handle search

166
00:12:10.570 --> 00:12:15.920
function here and it will
accept the search value.

167
00:12:16.120 --> 00:12:20.260
And the first thing it's going to do is
it's going to set search

168
00:12:20.290 --> 00:12:25.220
to the search value,
and the second thing it's going to do is

169
00:12:25.250 --> 00:12:33.180
call on search method and
pass the search value to it as well.

170
00:12:33.210 --> 00:12:36.060
So now if we go to our home screen

171
00:12:36.080 --> 00:12:41.560
and create a prop on search and inside
here

172
00:12:42.000 --> 00:12:51.580
create a console log that logs to us value
of what we are typing and save this.

173
00:12:51.610 --> 00:12:54.540
If we go to our terminal reload our

174
00:12:54.570 --> 00:13:02.260
application and start typing and we're
going to see what we're typing here.

175
00:13:02.290 --> 00:13:04.260
So that's it for today's tutorial.

176
00:13:04.290 --> 00:13:08.940
We just made our search input component
that we can use for our home screen

177
00:13:08.970 --> 00:13:13.940
and in the next video we're going to be
creating these single donation items user

178
00:13:13.970 --> 00:13:18.820
can press and they're going to be
redirected to this page here.

179
00:13:18.840 --> 00:13:21.320
Thanks so much for watching
and I'll see you in the next video.