WEBVTT

1
00:00:00.550 --> 00:00:02.850
Great job in making it through that last section.

2
00:00:02.850 --> 00:00:04.650
That got pretty challenging at the end,

3
00:00:04.650 --> 00:00:06.010
but you've made it through,

4
00:00:06.010 --> 00:00:09.393
and we're in the final section of this entire course,

5
00:00:09.393 --> 00:00:12.200
the main focus of this section is going to be

6
00:00:12.200 --> 00:00:14.630
to build out our search functionality,

7
00:00:14.630 --> 00:00:18.330
along with cleaning up a few last items

8
00:00:18.330 --> 00:00:21.160
to get our application completely done.

9
00:00:21.160 --> 00:00:22.700
So to start off in this guide,

10
00:00:22.700 --> 00:00:26.010
we are gonna start building out our search screen

11
00:00:26.010 --> 00:00:31.010
with a focus on the starting to build out our search form.

12
00:00:31.010 --> 00:00:33.080
So the very first thing that we're gonna do,

13
00:00:33.080 --> 00:00:35.470
whenever you're building out a component like this,

14
00:00:35.470 --> 00:00:37.520
if you're gonna work with a form,

15
00:00:37.520 --> 00:00:40.200
then you're probably gonna have to use state.

16
00:00:40.200 --> 00:00:42.210
So that's what we're gonna do first,

17
00:00:42.210 --> 00:00:44.710
I'm gonna say import react, comma,

18
00:00:44.710 --> 00:00:48.770
and then in curly brackets use state.

19
00:00:48.770 --> 00:00:51.620
Then also we know that we're gonna have

20
00:00:51.620 --> 00:00:55.130
to have a button, a submit or a search button,

21
00:00:55.130 --> 00:00:56.800
along with the text input.

22
00:00:56.800 --> 00:01:00.080
So let's import those from react native as well.

23
00:01:00.080 --> 00:01:02.880
So I'm gonna say text input,

24
00:01:02.880 --> 00:01:05.890
and then touchable opacity.

25
00:01:05.890 --> 00:01:07.720
So we're gonna bring both of those in.

26
00:01:07.720 --> 00:01:11.270
and those are the only imports that we need right now.

27
00:01:11.270 --> 00:01:13.780
I'm gonna start off by creating our state.

28
00:01:13.780 --> 00:01:15.610
So I'll say const,

29
00:01:15.610 --> 00:01:19.220
and I'm gonna call our first state element query,

30
00:01:19.220 --> 00:01:21.820
and then set query,

31
00:01:21.820 --> 00:01:23.210
and then we're gonna set that equal

32
00:01:23.210 --> 00:01:27.150
to use state starting with an empty string.

33
00:01:27.150 --> 00:01:28.500
That's the first thing.

34
00:01:28.500 --> 00:01:30.630
Now, what are we gonna do next?

35
00:01:30.630 --> 00:01:32.560
Well, now we need our search bar.

36
00:01:32.560 --> 00:01:36.820
So what I'm envisioning is a text field

37
00:01:36.820 --> 00:01:38.850
that goes almost from side to side

38
00:01:38.850 --> 00:01:40.780
and then a button right next to it.

39
00:01:40.780 --> 00:01:43.260
We're not gonna worry about the styles right now.

40
00:01:43.260 --> 00:01:45.850
let's at least add those elements.

41
00:01:45.850 --> 00:01:49.410
Now, I'm not gonna place this in the JSX code,

42
00:01:49.410 --> 00:01:50.470
even though we could.

43
00:01:50.470 --> 00:01:51.730
I think this makes sense

44
00:01:51.730 --> 00:01:56.050
to either break into its own dedicated component,

45
00:01:56.050 --> 00:01:59.830
or to just create a function for it or a variable.

46
00:01:59.830 --> 00:02:01.450
And so that's what we're gonna do here.

47
00:02:01.450 --> 00:02:03.880
And I think because so far up in this course,

48
00:02:03.880 --> 00:02:06.750
we've really focused a lot on creating functions

49
00:02:06.750 --> 00:02:08.420
and then creating components.

50
00:02:08.420 --> 00:02:11.700
Let's see how we can wrap up an entire search bar,

51
00:02:11.700 --> 00:02:14.370
inside of a single variable.

52
00:02:14.370 --> 00:02:16.450
So I'm gonna come down right after,

53
00:02:16.450 --> 00:02:19.290
our use state declaration here,

54
00:02:19.290 --> 00:02:24.290
and I'm going to create a search bar variable,

55
00:02:24.300 --> 00:02:29.300
so const, search bar equals and then just parens.

56
00:02:29.420 --> 00:02:31.830
Now, inside of this paren,

57
00:02:31.830 --> 00:02:34.840
what I'm gonna do is build out our initial search bar.

58
00:02:34.840 --> 00:02:38.690
So that means we're gonna have a view tag inside of it.

59
00:02:38.690 --> 00:02:41.130
And then inside of the view tag,

60
00:02:41.130 --> 00:02:45.610
we're gonna work with our text input component.

61
00:02:45.610 --> 00:02:48.340
And then let's just add the first few props

62
00:02:48.340 --> 00:02:49.960
that text input needs.

63
00:02:49.960 --> 00:02:52.240
So we know it needs a value,

64
00:02:52.240 --> 00:02:54.930
and that's gonna be set to the query,

65
00:02:54.930 --> 00:02:58.280
then we need a way of updating the value.

66
00:02:58.280 --> 00:03:03.003
So that's going to use, the on change,

67
00:03:04.100 --> 00:03:06.000
text, prop.

68
00:03:06.000 --> 00:03:10.730
And then we're going to set that equal to val or value,

69
00:03:10.730 --> 00:03:12.060
whatever you want to call it,

70
00:03:12.060 --> 00:03:14.530
and the anonymous function where we say,

71
00:03:14.530 --> 00:03:18.720
set query equal to the value.

72
00:03:18.720 --> 00:03:21.070
So if you remember, this is the same prop

73
00:03:21.070 --> 00:03:24.220
that we've used for our authorization screens,

74
00:03:24.220 --> 00:03:26.230
for our post form, everything like that.

75
00:03:26.230 --> 00:03:29.770
So we're pretty much following the same pattern as before.

76
00:03:29.770 --> 00:03:33.060
So we have that, let's also add some placeholder text.

77
00:03:33.060 --> 00:03:34.880
So I'm gonna placeholder,

78
00:03:34.880 --> 00:03:37.760
we actually are gonna use placeholder text color too,

79
00:03:37.760 --> 00:03:38.672
so we might as well bring that in.

80
00:03:38.672 --> 00:03:41.700
For right now, we're eventually gonna get rid of it.

81
00:03:41.700 --> 00:03:43.500
But I'm gonna start off with this white.

82
00:03:43.500 --> 00:03:45.830
And now let's actually use the placeholder,

83
00:03:45.830 --> 00:03:47.670
and for that, that's gonna be a string

84
00:03:47.670 --> 00:03:51.130
and we could say something like search for a meme,

85
00:03:51.130 --> 00:03:55.660
just like that, and this, one other thing we could do,

86
00:03:55.660 --> 00:03:58.620
is we could add a on,

87
00:03:58.620 --> 00:04:00.700
submit editing,

88
00:04:00.700 --> 00:04:04.210
So remember, because this is a form

89
00:04:04.210 --> 00:04:06.040
with only one form element,

90
00:04:06.040 --> 00:04:08.870
it kinda makes sense that whenever the user is done,

91
00:04:08.870 --> 00:04:11.360
they shouldn't have to click the search button,

92
00:04:11.360 --> 00:04:13.610
they should also just be able to hit return

93
00:04:13.610 --> 00:04:15.110
on their phone keyboard,

94
00:04:15.110 --> 00:04:17.330
and it should do perform the same search.

95
00:04:17.330 --> 00:04:19.934
So we can use on submit editing,

96
00:04:19.934 --> 00:04:21.675
and we'll set that equal just

97
00:04:21.675 --> 00:04:24.350
to a console log statement right now.

98
00:04:24.350 --> 00:04:27.483
So I'm gonna say console log search.

99
00:04:29.360 --> 00:04:33.030
Okay, that should be everything we need for our text input.

100
00:04:33.030 --> 00:04:36.440
And let me hit save, and then come down here

101
00:04:36.440 --> 00:04:37.550
to the search bar.

102
00:04:37.550 --> 00:04:40.120
Now because this is a variable,

103
00:04:40.120 --> 00:04:42.970
if I put this underneath the search screen

104
00:04:42.970 --> 00:04:45.050
and have our curly brackets,

105
00:04:45.050 --> 00:04:47.410
all I have to do is say search bar.

106
00:04:47.410 --> 00:04:49.100
I don't have to call it as a function

107
00:04:49.100 --> 00:04:50.480
because it's not a function.

108
00:04:50.480 --> 00:04:52.680
It's simply a variable.

109
00:04:52.680 --> 00:04:54.850
So I'm gonna hit save, and you can see that,

110
00:04:54.850 --> 00:04:55.750
that's right there.

111
00:04:55.750 --> 00:04:56.930
And if I click on it,

112
00:04:56.930 --> 00:05:00.430
I can start typing and it's storing those values.

113
00:05:00.430 --> 00:05:03.380
Now notice I didn't change the color of the text,

114
00:05:03.380 --> 00:05:05.810
I just change the color of the placeholder text,

115
00:05:05.810 --> 00:05:08.100
that's why this is showing up black,

116
00:05:08.100 --> 00:05:09.272
but that's perfectly fine.

117
00:05:09.272 --> 00:05:13.280
The way I'm envisioning this is we're gonna have a rectangle

118
00:05:13.280 --> 00:05:18.280
that goes from side to side here with a white rounded form.

119
00:05:18.550 --> 00:05:21.010
So like rounded edges on the input,

120
00:05:21.010 --> 00:05:23.170
and then an icon for the search,

121
00:05:23.170 --> 00:05:24.450
I think that would look really nice,

122
00:05:24.450 --> 00:05:26.910
and that kind of is the way most apps are built.

123
00:05:26.910 --> 00:05:28.420
So that's what we're gonna do.

124
00:05:28.420 --> 00:05:30.420
Now the last thing that we're going

125
00:05:30.420 --> 00:05:32.600
to add into our search bar,

126
00:05:32.600 --> 00:05:35.000
is that button, that search button

127
00:05:35.000 --> 00:05:37.420
so let's add in,

128
00:05:37.420 --> 00:05:40.940
a touchable, opacity call,

129
00:05:40.940 --> 00:05:43.160
there you go, touchable opacity

130
00:05:43.160 --> 00:05:46.560
and let's close it off and inside,

131
00:05:46.560 --> 00:05:48.833
put some text and say search.

132
00:05:50.040 --> 00:05:52.970
Now, let's also add a placeholder function

133
00:05:52.970 --> 00:05:55.490
that will be our handle search function.

134
00:05:55.490 --> 00:05:59.010
So I'll say const handle search,

135
00:05:59.010 --> 00:06:02.260
and that isn't gonna take in any arguments quite yet,

136
00:06:02.260 --> 00:06:05.030
we will eventually, not have to use arguments,

137
00:06:05.030 --> 00:06:09.290
but we are going to want to use a synchronous function.

138
00:06:09.290 --> 00:06:12.050
coz this is where we're gonna call the API.

139
00:06:12.050 --> 00:06:16.880
And then let's just say console log searching

140
00:06:16.880 --> 00:06:20.820
for comma the query.

141
00:06:20.820 --> 00:06:24.100
Okay, and then we can use this handle search here

142
00:06:24.100 --> 00:06:26.013
for on submit editing,

143
00:06:27.240 --> 00:06:32.240
and then we can also have it for on press, for our search.

144
00:06:36.300 --> 00:06:38.020
On press,

145
00:06:38.020 --> 00:06:40.730
equals curly brackets handle search.

146
00:06:40.730 --> 00:06:43.700
Okay, let's hit save, You can see it's kind, it's dark.

147
00:06:43.700 --> 00:06:45.470
Let me add some color here just

148
00:06:45.470 --> 00:06:47.310
so we can see it a little easier.

149
00:06:47.310 --> 00:06:49.240
So style,

150
00:06:49.240 --> 00:06:50.890
color white,

151
00:06:50.890 --> 00:06:52.960
and I'll add a little bit of margin,

152
00:06:52.960 --> 00:06:56.310
will eventually add all of our own custom styles of course.

153
00:06:56.310 --> 00:06:58.210
And so for style,

154
00:06:58.210 --> 00:07:00.860
let's add margin top,

155
00:07:00.860 --> 00:07:01.973
of 20,

156
00:07:03.290 --> 00:07:04.607
nope did i spell something Oh yeah,

157
00:07:04.607 --> 00:07:07.540
you need to have double curly brackets,

158
00:07:07.540 --> 00:07:10.770
because it's an object, there we go.

159
00:07:10.770 --> 00:07:14.380
Now hit save, and you can see we have our text here,

160
00:07:14.380 --> 00:07:15.940
which is really our form element,

161
00:07:15.940 --> 00:07:17.700
and then we have our search bar.

162
00:07:17.700 --> 00:07:20.390
So let me open up the terminal,

163
00:07:20.390 --> 00:07:21.720
you can see it right there.

164
00:07:21.720 --> 00:07:23.900
Now if I click on search for a meme

165
00:07:23.900 --> 00:07:27.260
and say I'm looking for programming memes,

166
00:07:27.260 --> 00:07:29.490
if I can spell there we go programming,

167
00:07:29.490 --> 00:07:30.413
and now I can either hit return,

168
00:07:30.413 --> 00:07:33.230
and that's gonna search,

169
00:07:33.230 --> 00:07:35.220
just like it says search for programming.

170
00:07:35.220 --> 00:07:37.370
So that has all of our keywords,

171
00:07:37.370 --> 00:07:40.020
Or I could press that again.

172
00:07:40.020 --> 00:07:42.050
So that is all working,

173
00:07:42.050 --> 00:07:46.400
and so we have our initial search bar component.

174
00:07:46.400 --> 00:07:47.920
It doesn't have any styles,

175
00:07:47.920 --> 00:07:50.070
It's not connected to the API,

176
00:07:50.070 --> 00:07:52.730
and so we still have our ways to go on it,

177
00:07:52.730 --> 00:07:53.850
but it's coming along,

178
00:07:53.850 --> 00:07:56.470
we have all of the major elements we need,

179
00:07:56.470 --> 00:07:57.750
at least for the search bar.

180
00:07:57.750 --> 00:07:58.650
So in the next guide,

181
00:07:58.650 --> 00:08:01.503
we're going to continue building this out.

Resources

• Source code