- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.560 --> 00:00:02.780
Now that we're able to query
2
00:00:02.780 --> 00:00:05.670
and then render all of our post items
3
00:00:05.670 --> 00:00:07.320
from our search bar,
4
00:00:07.320 --> 00:00:09.520
now let's start adding some styles.
5
00:00:09.520 --> 00:00:13.700
So I'm gonna create a dedicated function here.
6
00:00:13.700 --> 00:00:16.210
So let's go into our styles.
7
00:00:16.210 --> 00:00:19.890
And then this is going to be in stacks.
8
00:00:19.890 --> 00:00:22.440
And this could also be in posts, I think.
9
00:00:22.440 --> 00:00:23.800
You could put it somewhere else,
10
00:00:23.800 --> 00:00:25.270
if you feel like it needs to be there,
11
00:00:25.270 --> 00:00:28.060
you could create a search set of styles,
12
00:00:28.060 --> 00:00:30.320
but I don't really think that's necessary.
13
00:00:30.320 --> 00:00:31.710
'Cause these are gonna be the only ones
14
00:00:31.710 --> 00:00:33.070
that we're gonna create.
15
00:00:33.070 --> 00:00:38.070
And so I'm just gonna say searchStyles.ts.
16
00:00:38.770 --> 00:00:41.900
And inside of here, let's do the same thing we usually do.
17
00:00:41.900 --> 00:00:44.613
We're gonna import the StyleSheet,
18
00:00:46.300 --> 00:00:50.173
and that is from react-native.
19
00:00:51.580 --> 00:00:54.783
And then we wanna export default,
20
00:00:56.003 --> 00:00:59.880
StyleSheet.create, call the function,
21
00:00:59.880 --> 00:01:03.010
and then let's start listing off the elements
22
00:01:03.010 --> 00:01:04.400
that we know we're gonna need.
23
00:01:04.400 --> 00:01:06.210
So this is kind of the same thing we did
24
00:01:06.210 --> 00:01:09.000
when we were building out our layout for the post form.
25
00:01:09.000 --> 00:01:11.320
This is the standard practice
26
00:01:11.320 --> 00:01:12.830
that I personally like to do
27
00:01:12.830 --> 00:01:14.540
when I'm building out new components,
28
00:01:14.540 --> 00:01:17.200
and building layouts and styles.
29
00:01:17.200 --> 00:01:18.270
So let's go through,
30
00:01:18.270 --> 00:01:21.150
and let's just list off what we know we're gonna need.
31
00:01:21.150 --> 00:01:25.250
So we know we're gonna need a search form container.
32
00:01:25.250 --> 00:01:28.570
So that's gonna be the view
33
00:01:28.570 --> 00:01:32.390
that is gonna hold the input and the icon.
34
00:01:32.390 --> 00:01:35.060
Then we're gonna have a text field,
35
00:01:35.060 --> 00:01:37.050
and then we're gonna have an icon.
36
00:01:37.050 --> 00:01:39.390
And I think that's all that we're gonna need.
37
00:01:39.390 --> 00:01:41.010
So let's add those three,
38
00:01:41.010 --> 00:01:44.030
or at least just placeholders for the three.
39
00:01:44.030 --> 00:01:46.120
So searchFormContainer,
40
00:01:47.080 --> 00:01:49.570
and that's just gonna start off as an empty object.
41
00:01:49.570 --> 00:01:54.570
SearchField, or let's just call it searchTextField,
42
00:01:56.238 --> 00:01:58.060
or TextInput.
43
00:01:58.060 --> 00:02:03.060
And then lastly, let's add in one more field.
44
00:02:05.190 --> 00:02:08.083
And so this one's gonna be the searchIcon.
45
00:02:08.940 --> 00:02:10.290
There we go.
46
00:02:10.290 --> 00:02:13.870
Okay, so that's all that we need in our styles.
47
00:02:13.870 --> 00:02:15.920
Now, let me hit save here.
48
00:02:15.920 --> 00:02:18.200
And let's go back to our SearchScreen.
49
00:02:18.200 --> 00:02:20.150
I'll close out these other tabs,
50
00:02:20.150 --> 00:02:22.220
just to make it a little bit easier to see.
51
00:02:22.220 --> 00:02:25.200
And now let's import each of those styles.
52
00:02:25.200 --> 00:02:27.450
So at the very top here,
53
00:02:27.450 --> 00:02:31.357
I'm gonna say that I want to import searchStyles.
54
00:02:33.310 --> 00:02:38.310
And we're going to do that from ../styles.
55
00:02:38.610 --> 00:02:41.520
And then we put that in stacks,
56
00:02:41.520 --> 00:02:44.500
posts, and then searchStyles.
57
00:02:44.500 --> 00:02:47.380
And then let's also do the same thing we did before.
58
00:02:47.380 --> 00:02:51.020
Let's use destructuring to grab each of those elements,
59
00:02:51.020 --> 00:02:55.340
so that we can access them with just a one single word call,
60
00:02:55.340 --> 00:02:58.660
instead of having to call searchStyles.,
61
00:02:58.660 --> 00:03:00.670
and do that for each one of them.
62
00:03:00.670 --> 00:03:03.150
So let's say we want to do const.
63
00:03:03.150 --> 00:03:05.760
And we can just copy and paste each of these,
64
00:03:05.760 --> 00:03:07.110
there's only three of them.
65
00:03:07.960 --> 00:03:11.100
Copy those, paste those in.
66
00:03:11.100 --> 00:03:13.443
And we have our searchFormContainer,
67
00:03:14.290 --> 00:03:16.140
and then we have our searchTextInput.
68
00:03:18.120 --> 00:03:21.193
And we're gonna set each of those equal to searchStyles.
69
00:03:23.330 --> 00:03:26.250
Okay, hit save, we don't have any errors,
70
00:03:26.250 --> 00:03:28.360
everything there looks good.
71
00:03:28.360 --> 00:03:32.610
Okay, now let's come down into our search bar.
72
00:03:32.610 --> 00:03:34.840
And let's add the first one.
73
00:03:34.840 --> 00:03:37.040
So the first one's gonna be style,
74
00:03:37.040 --> 00:03:40.540
and we'll set this equal to the searchForm,
75
00:03:42.360 --> 00:03:43.510
if I can spell it correctly,
76
00:03:43.510 --> 00:03:45.700
there we go, searchFormContainer.
77
00:03:45.700 --> 00:03:47.710
Now our text input is gonna
78
00:03:47.710 --> 00:03:51.337
have the style of searchTextInput.
79
00:03:52.780 --> 00:03:57.780
And then lastly, our button here is gonna have that icon.
80
00:03:57.830 --> 00:04:01.620
Now, right now, we have one little margin style in there,
81
00:04:01.620 --> 00:04:02.780
but we're not gonna use that.
82
00:04:02.780 --> 00:04:04.320
So let's just get rid of it.
83
00:04:04.320 --> 00:04:06.640
And that's gonna say searchIcon.
84
00:04:07.910 --> 00:04:10.560
Okay, let's hit save.
85
00:04:10.560 --> 00:04:12.570
And you can see nothing changed,
86
00:04:12.570 --> 00:04:14.220
because we called each of those styles,
87
00:04:14.220 --> 00:04:15.740
but there's nothing inside of them.
88
00:04:15.740 --> 00:04:17.900
So let's start adding a few things.
89
00:04:17.900 --> 00:04:20.440
So I want to add some padding,
90
00:04:20.440 --> 00:04:22.620
because remember, the layout that we want,
91
00:04:22.620 --> 00:04:26.510
is we wanna have a rectangle up here at the top.
92
00:04:26.510 --> 00:04:30.630
And then we wanna have the text input on the left hand side.
93
00:04:30.630 --> 00:04:34.010
And then on the right hand side, we want to have our icon.
94
00:04:34.010 --> 00:04:36.030
So let's build that out.
95
00:04:36.030 --> 00:04:37.460
We're gonna start with some padding,
96
00:04:37.460 --> 00:04:39.840
so that the elements aren't butting up
97
00:04:39.840 --> 00:04:41.540
against the edge of the screen.
98
00:04:41.540 --> 00:04:43.370
And so I'm gonna say padding: 15,
99
00:04:43.370 --> 00:04:45.420
just like we've done the rest of the course.
100
00:04:45.420 --> 00:04:48.410
And then we want the elements side by side.
101
00:04:48.410 --> 00:04:49.810
So that means we're just gonna have
102
00:04:49.810 --> 00:04:52.830
to change the flex direction to row.
103
00:04:52.830 --> 00:04:57.300
So FlexDirection, and we'll change that to row.
104
00:04:57.300 --> 00:04:59.930
Okay, hit save, and now you can see
105
00:04:59.930 --> 00:05:01.680
that that updated the layout.
106
00:05:01.680 --> 00:05:02.960
We have our padding.
107
00:05:02.960 --> 00:05:04.930
And now the search button,
108
00:05:04.930 --> 00:05:07.260
is right next to the search input.
109
00:05:07.260 --> 00:05:08.860
So far, so good.
110
00:05:08.860 --> 00:05:12.680
Now let's add styles to our text input.
111
00:05:12.680 --> 00:05:17.680
So here, I'm gonna go with a background color of white.
112
00:05:19.110 --> 00:05:22.673
And then let's add a width here.
113
00:05:23.550 --> 00:05:27.793
We want this to always be at 85% width,
114
00:05:28.740 --> 00:05:32.710
and then we'll add a border radius.
115
00:05:32.710 --> 00:05:34.150
And I want this one to be pretty big.
116
00:05:34.150 --> 00:05:37.120
So we're gonna go BorderRadius: 25.
117
00:05:37.120 --> 00:05:38.900
And then let's go with,
118
00:05:38.900 --> 00:05:41.340
make this a little bit thicker for the font.
119
00:05:41.340 --> 00:05:45.010
So we'll say fontWeight of 500.
120
00:05:45.010 --> 00:05:49.530
And then paddingLeft of 21.
121
00:05:49.530 --> 00:05:50.700
These are ones I played with,
122
00:05:50.700 --> 00:05:53.330
and I've actually used this exact set of styles
123
00:05:53.330 --> 00:05:55.810
for a number of other components I built out
124
00:05:55.810 --> 00:05:57.430
in past projects.
125
00:05:57.430 --> 00:06:00.640
So let's hit save here, and there we go,
126
00:06:00.640 --> 00:06:02.910
that's already looking better, definitely.
127
00:06:02.910 --> 00:06:05.670
It's not done yet, but it's starting to get there.
128
00:06:05.670 --> 00:06:08.070
Okay, so that's our searchTextInput.
129
00:06:08.070 --> 00:06:11.030
Now let's add our searchIconStyles.
130
00:06:11.030 --> 00:06:13.325
So for search icon,
131
00:06:13.325 --> 00:06:15.920
we haven't actually brought our icon in yet.
132
00:06:15.920 --> 00:06:17.870
But that's fine, we'll update that.
133
00:06:17.870 --> 00:06:20.620
We want to center it horizontally and vertically.
134
00:06:20.620 --> 00:06:25.620
So I'll say justifyContent center, alignItems center.
135
00:06:25.930 --> 00:06:29.180
And then we wanna make sure the width takes
136
00:06:29.180 --> 00:06:30.460
up the remaining amount.
137
00:06:30.460 --> 00:06:35.030
So if we subtract 100, or 85 from 100,
138
00:06:35.030 --> 00:06:37.890
then we're left with 15%.
139
00:06:37.890 --> 00:06:39.410
Okay, hit save,
140
00:06:39.410 --> 00:06:41.430
and that's looking really good.
141
00:06:41.430 --> 00:06:43.670
So I'm liking the way that's looking,
142
00:06:43.670 --> 00:06:46.010
we can always, we can add things like,
143
00:06:46.010 --> 00:06:47.030
we can update the height,
144
00:06:47.030 --> 00:06:49.240
we can change anything in here that we want.
145
00:06:49.240 --> 00:06:50.143
But for right now,
146
00:06:51.340 --> 00:06:53.310
I'm happy with where we're at right now
147
00:06:53.310 --> 00:06:55.270
with the set of styles.
148
00:06:55.270 --> 00:06:59.290
Okay, so let's bring in our icon now.
149
00:06:59.290 --> 00:07:02.450
So I'm gonna get rid of this text icon.
150
00:07:02.450 --> 00:07:06.650
And I wanna use one from Ionicons.
151
00:07:06.650 --> 00:07:09.190
So let's go to the bottom tab bar once again,
152
00:07:09.190 --> 00:07:11.180
to reference this look up.
153
00:07:11.180 --> 00:07:14.950
And we actually are using a Ionicons already.
154
00:07:14.950 --> 00:07:18.420
I'm gonna use the exact same searchIcon that we have here.
155
00:07:18.420 --> 00:07:20.623
So let's import that.
156
00:07:21.900 --> 00:07:25.150
And then for the search,
157
00:07:25.150 --> 00:07:28.700
let's copy the exact same code we have here.
158
00:07:28.700 --> 00:07:30.420
So it's gonna be md-search.
159
00:07:30.420 --> 00:07:32.670
The only thing that we might change,
160
00:07:32.670 --> 00:07:35.620
is we can test around with changing the size.
161
00:07:35.620 --> 00:07:37.770
I'm not sure we can see what it looks like.
162
00:07:38.680 --> 00:07:40.980
Okay, I'm gonna paste that in.
163
00:07:40.980 --> 00:07:42.540
Hit save, and look at that.
164
00:07:42.540 --> 00:07:44.700
That looks so much better.
165
00:07:44.700 --> 00:07:46.500
That looks like a real search bar.
166
00:07:46.500 --> 00:07:48.140
Okay, let's test this out.
167
00:07:48.140 --> 00:07:51.300
So programming, and you can come
168
00:07:51.300 --> 00:07:54.440
and hit this icon, hit search, and there you go.
169
00:07:54.440 --> 00:07:55.490
That's looking good.
170
00:07:55.490 --> 00:07:58.140
Notice also that it has this padding,
171
00:07:58.140 --> 00:08:01.130
and then it's not part of the ScrollView container.
172
00:08:01.130 --> 00:08:02.670
So as the user is scrolling,
173
00:08:02.670 --> 00:08:06.000
they can still see what they typed in there.
174
00:08:06.000 --> 00:08:07.890
Now the last thing I'm gonna change here,
175
00:08:07.890 --> 00:08:10.810
is the placeholderTextColor style.
176
00:08:10.810 --> 00:08:13.720
So I can just get rid of that entirely,
177
00:08:13.720 --> 00:08:17.440
hit save, and now you can see that it has the,
178
00:08:17.440 --> 00:08:19.150
you can actually see the placeholder.
179
00:08:19.150 --> 00:08:21.310
When it was set to white, you couldn't see it.
180
00:08:21.310 --> 00:08:23.220
So that is looking really good,
181
00:08:23.220 --> 00:08:25.280
feel free obviously, it's your app.
182
00:08:25.280 --> 00:08:27.760
Feel free to make any changes to your own code,
183
00:08:27.760 --> 00:08:29.460
and your own styles that you like.
184
00:08:29.460 --> 00:08:31.100
I definitely encourage you to do that,
185
00:08:31.100 --> 00:08:32.890
because that's gonna give you practice
186
00:08:32.890 --> 00:08:36.200
on how you can work with the different style elements
187
00:08:36.200 --> 00:08:37.870
that you have available to you.
188
00:08:37.870 --> 00:08:40.660
And the more practice you do with it,
189
00:08:40.660 --> 00:08:41.900
the easier it's gonna become.
190
00:08:41.900 --> 00:08:44.080
And you're gonna start to remember each
191
00:08:44.080 --> 00:08:45.530
of these types of keywords,
192
00:08:45.530 --> 00:08:47.000
so you're not gonna have to look them up,
193
00:08:47.000 --> 00:08:48.670
or reference the documentation
194
00:08:48.670 --> 00:08:50.080
for everything that you do.
195
00:08:50.080 --> 00:08:52.160
So, great job if you went through that.
196
00:08:52.160 --> 00:08:53.500
In the next video,
197
00:08:53.500 --> 00:08:56.110
we're gonna build out a loading state
198
00:08:56.110 --> 00:08:59.810
for showing the user when we are going out,
199
00:08:59.810 --> 00:09:01.343
and we're getting those posts.