- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.200 --> 00:00:01.850
Over the next few guides,
2
00:00:01.850 --> 00:00:06.390
we are gonna start styling our post-form here.
3
00:00:06.390 --> 00:00:08.833
Now we're gonna start with our image
4
00:00:08.833 --> 00:00:09.666
and specifically, our PostImagePicker.
5
00:00:09.666 --> 00:00:14.666
Now just to give you kind of idea of the final layout
6
00:00:16.103 --> 00:00:17.670
that I wanna have,
7
00:00:17.670 --> 00:00:21.130
I wanna have a square portion
8
00:00:21.130 --> 00:00:23.131
right here in the top left-hand side
9
00:00:23.131 --> 00:00:23.964
that has a image icon,
10
00:00:23.964 --> 00:00:26.782
a Camera icon,
11
00:00:26.782 --> 00:00:30.241
if there is no image uploaded,
12
00:00:30.241 --> 00:00:32.080
and then if there is an image,
13
00:00:32.080 --> 00:00:32.913
I want the entire space
14
00:00:32.913 --> 00:00:36.592
to be filled with a thumbnail of that image.
15
00:00:36.592 --> 00:00:37.838
That's kind of the layout.
16
00:00:37.838 --> 00:00:39.163
And then on the right-hand side,
17
00:00:39.163 --> 00:00:40.240
I wanna have the name,
18
00:00:40.240 --> 00:00:43.130
and then a larger text window
19
00:00:43.130 --> 00:00:45.529
for the content.
20
00:00:45.529 --> 00:00:47.496
And so, we're gonna get rid of this text
21
00:00:47.496 --> 00:00:49.313
and I think that'll be a nice layout.
22
00:00:49.313 --> 00:00:52.310
It's very similar to what Instagram has,
23
00:00:52.310 --> 00:00:54.957
so I wanted you to be able to see how that would work.
24
00:00:54.957 --> 00:00:56.140
Now, right here,
25
00:00:56.140 --> 00:00:58.858
I have the PostImagePicker open,
26
00:00:58.858 --> 00:01:02.777
and if I zoom out, you can see all of the view tag.
27
00:01:02.777 --> 00:01:05.184
Now, there are definitely a lot of changes
28
00:01:05.184 --> 00:01:07.124
that I wanna take place here,
29
00:01:07.124 --> 00:01:09.699
so right now, we just have this button,
30
00:01:09.699 --> 00:01:11.709
which I am rarely a fan
31
00:01:11.709 --> 00:01:14.470
of ever using the native button component,
32
00:01:14.470 --> 00:01:17.220
and then also you may notice
33
00:01:17.220 --> 00:01:18.854
that if an image has been uploaded,
34
00:01:18.854 --> 00:01:22.012
all we're doing is we're showing the image tag.
35
00:01:22.012 --> 00:01:23.984
What I would like to do is to get rid
36
00:01:23.984 --> 00:01:25.636
of the text entirely,
37
00:01:25.636 --> 00:01:28.750
have it replaced with an icon that is clickable.
38
00:01:28.750 --> 00:01:31.224
Now, if an image is uploaded,
39
00:01:31.224 --> 00:01:33.639
what I would like to have is I want that image
40
00:01:33.639 --> 00:01:35.634
to be clickable as well.
41
00:01:35.634 --> 00:01:38.359
So you may already know what we're gonna do.
42
00:01:38.359 --> 00:01:42.290
We're gonna use a TouchableOpacity component,
43
00:01:42.290 --> 00:01:43.620
and we're gonna wrap up
44
00:01:43.620 --> 00:01:47.478
the entire PostImagePicker in that component.
45
00:01:47.478 --> 00:01:50.228
So let's start by importing that,
46
00:01:50.228 --> 00:01:53.818
I'm gonna get rid of this ButtonTag here,
47
00:01:53.818 --> 00:01:56.683
and I'm gonna call TouchableOpacity,
48
00:01:57.610 --> 00:01:59.895
and so that's gonna be what we're importing,
49
00:01:59.895 --> 00:02:02.414
and then down here in the bottom,
50
00:02:02.414 --> 00:02:05.400
I'm just gonna get rid of everything here,
51
00:02:05.400 --> 00:02:06.741
we don't need any of this.
52
00:02:06.741 --> 00:02:09.608
So I'm gonna get rid of everything that we have here,
53
00:02:09.608 --> 00:02:12.740
and now let's call TouchableOpacity,
54
00:02:12.740 --> 00:02:15.573
so we're gonna say return TouchableOpacity,
55
00:02:20.640 --> 00:02:22.460
and then inside of here,
56
00:02:22.460 --> 00:02:25.696
this is where we're gonna have our conditional.
57
00:02:25.696 --> 00:02:26.845
This is where we're gonna say,
58
00:02:26.845 --> 00:02:27.678
if there is an image, then show the image.
59
00:02:27.678 --> 00:02:32.003
And if not, show the icon.
60
00:02:32.003 --> 00:02:35.615
Now, you can definitely do a ternary operator here,
61
00:02:35.615 --> 00:02:38.590
but that might start to get a little bit messy.
62
00:02:38.590 --> 00:02:40.359
So, I can show you both options,
63
00:02:40.359 --> 00:02:43.327
I'll build it first using a ternary operator,
64
00:02:43.327 --> 00:02:44.492
and then I'm gonna show you
65
00:02:44.492 --> 00:02:47.492
how we can put all of that inside of a function.
66
00:02:47.492 --> 00:02:49.768
So, for TouchableOpacity,
67
00:02:49.768 --> 00:02:51.369
let's say inside of it,
68
00:02:51.369 --> 00:02:53.297
if there is an image,
69
00:02:53.297 --> 00:02:56.640
then I want you to show that image tag.
70
00:02:56.640 --> 00:02:59.500
So, let's write out the whole ternary operator,
71
00:02:59.500 --> 00:03:00.658
it's just gonna look like that.
72
00:03:00.658 --> 00:03:02.708
If there is an image, show this image.
73
00:03:02.708 --> 00:03:03.541
If not, show a image,
74
00:03:03.541 --> 00:03:08.188
or a Camera icon or something like that.
75
00:03:08.188 --> 00:03:10.074
So, for the image tag,
76
00:03:10.074 --> 00:03:11.824
I'm gonna call image,
77
00:03:11.824 --> 00:03:13.957
and then the source,
78
00:03:13.957 --> 00:03:16.122
which that takes in an object,
79
00:03:16.122 --> 00:03:17.686
and make sure that it
80
00:03:17.686 --> 00:03:19.520
because it takes in an object,
81
00:03:19.520 --> 00:03:21.890
you need two sets of curly brackets,
82
00:03:21.890 --> 00:03:24.571
uri and then the image,
83
00:03:24.571 --> 00:03:26.193
and then after that,
84
00:03:26.193 --> 00:03:28.470
we wanna put in some sizing.
85
00:03:28.470 --> 00:03:31.539
So, here, I'll say style equals,
86
00:03:31.539 --> 00:03:33.930
and then two sets of curly brackets,
87
00:03:33.930 --> 00:03:38.010
a width of 100 and a height of 100,
88
00:03:38.010 --> 00:03:40.240
because that's the size I wanna go with.
89
00:03:40.240 --> 00:03:42.580
And then let's close that out.
90
00:03:42.580 --> 00:03:44.239
So that's our image tag.
91
00:03:44.239 --> 00:03:47.300
Now for, if there is no image uploaded,
92
00:03:47.300 --> 00:03:49.730
we wanna show the icon,
93
00:03:49.730 --> 00:03:51.820
so we can import the icon,
94
00:03:51.820 --> 00:03:53.033
I already have one picked out,
95
00:03:53.033 --> 00:03:54.840
you can definitely feel free
96
00:03:54.840 --> 00:03:56.506
to use a different one if you want.
97
00:03:56.506 --> 00:03:58.540
I'm gonna go to BottomTabBar,
98
00:03:58.540 --> 00:04:03.339
and copy this imports statement for Ionicons,
99
00:04:03.339 --> 00:04:05.389
and we're not gonna use that library,
100
00:04:05.389 --> 00:04:08.050
I'm just using that kind of as a reference point.
101
00:04:08.050 --> 00:04:10.600
So, if you come up to the top here
102
00:04:10.600 --> 00:04:11.576
and paste that in,
103
00:04:11.576 --> 00:04:15.830
we're gonna use one that is called EvilIcons.
104
00:04:15.830 --> 00:04:18.214
So, let me type that in,
105
00:04:18.214 --> 00:04:20.338
and it's EvilIcons,
106
00:04:20.338 --> 00:04:25.338
and the second I or the second word is capitalized,
107
00:04:25.360 --> 00:04:28.860
and then I'm going to use that as the import,
108
00:04:28.860 --> 00:04:29.693
and now let's actually call this,
109
00:04:29.693 --> 00:04:31.179
so now I'm gonna say,
110
00:04:33.059 --> 00:04:34.998
I want EvilIcons
111
00:04:34.998 --> 00:04:37.453
and the icon I want,
112
00:04:37.453 --> 00:04:40.070
and it's actually the prop is name,
113
00:04:40.070 --> 00:04:43.853
so the name that I want is gonna be Camera,
114
00:04:45.010 --> 00:04:50.010
and then I want this to be of a color of primary,
115
00:04:50.084 --> 00:04:53.919
so do color equals curly brackets,
116
00:04:53.919 --> 00:04:56.382
and then if you have auto-importer installed,
117
00:04:56.382 --> 00:04:58.380
just start typing out primary,
118
00:04:58.380 --> 00:05:00.460
if not you can import it at the very top,
119
00:05:00.460 --> 00:05:04.200
and then lastly, let's add a size.
120
00:05:04.200 --> 00:05:07.680
So, size equals 42,
121
00:05:07.680 --> 00:05:09.969
and then right after those curly brackets,
122
00:05:09.969 --> 00:05:13.620
just close off that tag, okay.
123
00:05:13.620 --> 00:05:14.550
Let's hit Save,
124
00:05:14.550 --> 00:05:16.621
prettier will reformat it for us.
125
00:05:16.621 --> 00:05:18.045
And as you can see right there,
126
00:05:18.045 --> 00:05:19.270
that works perfect.
127
00:05:19.270 --> 00:05:20.592
We have this Camera Icon,
128
00:05:20.592 --> 00:05:22.460
and nothing's happening right now,
129
00:05:22.460 --> 00:05:25.061
because we haven't wired up our TouchableOpacity yet,
130
00:05:25.061 --> 00:05:27.182
but so far this is looking good.
131
00:05:27.182 --> 00:05:29.517
So, now let's add that in.
132
00:05:29.517 --> 00:05:33.284
So, I'm going to write here in TouchableOpacity,
133
00:05:33.284 --> 00:05:35.484
I'm gonna say whenever this is pressed,
134
00:05:35.484 --> 00:05:37.815
then I want you to call PickImage,
135
00:05:37.815 --> 00:05:39.965
which is the name of our function.
136
00:05:39.965 --> 00:05:41.625
Hit Save, and now,
137
00:05:41.625 --> 00:05:43.311
if you click on this,
138
00:05:43.311 --> 00:05:46.890
now you should be able to pick out an image,
139
00:05:46.890 --> 00:05:48.403
and then you can see it gets replaced
140
00:05:48.403 --> 00:05:50.836
with the other image,
141
00:05:50.836 --> 00:05:53.510
so the icon gets replaced.
142
00:05:53.510 --> 00:05:54.589
So far, so good.
143
00:05:54.589 --> 00:05:56.460
That's looking really nice.
144
00:05:56.460 --> 00:05:58.130
Now let's add some styles,
145
00:05:58.130 --> 00:06:00.953
because, let me hit refresh,
146
00:06:03.570 --> 00:06:05.606
if it wants to refresh, there we go,
147
00:06:05.606 --> 00:06:08.497
and now if I go back,
148
00:06:08.497 --> 00:06:11.202
let's see how we wanna structure this.
149
00:06:11.202 --> 00:06:12.286
You can kind of see,
150
00:06:12.286 --> 00:06:13.546
we have a box here,
151
00:06:13.546 --> 00:06:14.423
it's kind of hard to tell
152
00:06:14.423 --> 00:06:15.835
'cause we don't have a border or anything,
153
00:06:15.835 --> 00:06:16.743
but there is a box here,
154
00:06:16.743 --> 00:06:18.568
you could see it when we had an image,
155
00:06:18.568 --> 00:06:20.164
I wanna have this Camera icon
156
00:06:20.164 --> 00:06:22.630
right in the middle, centered in it.
157
00:06:22.630 --> 00:06:24.625
So we can use justifyContent
158
00:06:24.625 --> 00:06:26.633
and alignItems for that,
159
00:06:26.633 --> 00:06:27.923
and we also want to make sure
160
00:06:27.923 --> 00:06:30.435
this TouchableOpacity container
161
00:06:30.435 --> 00:06:32.790
is the same size as our image.
162
00:06:32.790 --> 00:06:36.528
So, let's add some styles here for TouchableOpacity.
163
00:06:36.528 --> 00:06:38.669
So, here, I'm gonna come up here,
164
00:06:38.669 --> 00:06:43.327
and say style equals two sets of curly brackets,
165
00:06:43.327 --> 00:06:47.221
justifyContent which is gonna be center,
166
00:06:47.221 --> 00:06:48.888
and then alignItems,
167
00:06:50.371 --> 00:06:52.637
which is also gonna be centered,
168
00:06:52.637 --> 00:06:55.240
and then we want to use that same size.
169
00:06:55.240 --> 00:06:56.778
So the height,
170
00:06:56.778 --> 00:06:58.570
we're gonna want to be 100,
171
00:06:58.570 --> 00:07:00.857
and the width is also 100.
172
00:07:00.857 --> 00:07:02.960
Hit Save, and that's perfect.
173
00:07:02.960 --> 00:07:04.760
Now that is centered there.
174
00:07:04.760 --> 00:07:06.468
And maybe you can kind of envision
175
00:07:06.468 --> 00:07:08.951
how it's gonna look when we update the layout,
176
00:07:08.951 --> 00:07:11.993
we're gonna move this up top here in the left-hand side,
177
00:07:11.993 --> 00:07:14.710
and that's gonna work really nice.
178
00:07:14.710 --> 00:07:16.210
So this is looking really good.
179
00:07:16.210 --> 00:07:17.770
I definitely like it.
180
00:07:17.770 --> 00:07:19.554
There are some refactors that we can do.
181
00:07:19.554 --> 00:07:21.906
One refactor is, you notice how we have the height
182
00:07:21.906 --> 00:07:23.591
and width in two spots
183
00:07:23.591 --> 00:07:24.765
and it's the same.
184
00:07:24.765 --> 00:07:27.052
Let's actually just create a variable for that.
185
00:07:27.052 --> 00:07:30.318
So I'm gonna say create a variable called size,
186
00:07:30.318 --> 00:07:32.530
and this is gonna be an object,
187
00:07:32.530 --> 00:07:34.937
and it's just gonna take in the height at 100,
188
00:07:34.937 --> 00:07:37.064
and the width at 100,
189
00:07:37.064 --> 00:07:40.395
and what we can do now is copy that
190
00:07:40.395 --> 00:07:42.855
and where we have our image tag,
191
00:07:42.855 --> 00:07:45.530
replace the inner curly brackets
192
00:07:45.530 --> 00:07:47.496
with a size call,
193
00:07:47.496 --> 00:07:50.040
and then in our style,
194
00:07:50.040 --> 00:07:51.211
what we can do is,
195
00:07:51.211 --> 00:07:56.022
we don't wanna just pass in the height
196
00:07:56.022 --> 00:07:57.750
and width size like that,
197
00:07:57.750 --> 00:07:58.688
that's gonna throw an error,
198
00:07:58.688 --> 00:08:01.867
because that would actually be taking a nested object,
199
00:08:01.867 --> 00:08:03.467
and it would be sliding it in there.
200
00:08:03.467 --> 00:08:04.750
That's not what we want.
201
00:08:04.750 --> 00:08:07.541
Instead, what we're gonna do is we're gonna go to style,
202
00:08:07.541 --> 00:08:11.541
and we're gonna say, I want to wrap this up in an array.
203
00:08:11.541 --> 00:08:15.000
'Cause remember, we can pass style in an array of items.
204
00:08:15.000 --> 00:08:17.820
And the first one is just gonna be size.
205
00:08:17.820 --> 00:08:20.311
So, size, comma, justifyContent,
206
00:08:20.311 --> 00:08:21.484
alignItems,
207
00:08:21.484 --> 00:08:23.140
hit Save,
208
00:08:23.140 --> 00:08:25.670
and that's still working perfect.
209
00:08:25.670 --> 00:08:28.683
So I like the way all of that is going along.
210
00:08:28.683 --> 00:08:31.877
Now, the last thing that I wanna do is
211
00:08:31.877 --> 00:08:34.486
notice here that we have this ternary operator.
212
00:08:34.486 --> 00:08:37.100
I wanted to show you how it would look
213
00:08:37.100 --> 00:08:40.090
if you wanted to turn that into a function.
214
00:08:40.090 --> 00:08:43.826
So I'm gonna create a function up here called const,
215
00:08:43.826 --> 00:08:45.451
and then we can just say,
216
00:08:45.451 --> 00:08:48.810
we can just call this the contentRenderer.
217
00:08:48.810 --> 00:08:50.560
Something like that.
218
00:08:50.560 --> 00:08:53.360
And I'm gonna make this an actual function,
219
00:08:53.360 --> 00:08:54.611
so we have to call it.
220
00:08:54.611 --> 00:08:57.330
And now, what we can say is,
221
00:08:57.330 --> 00:08:59.143
if there is an image,
222
00:09:00.146 --> 00:09:05.146
then I want you to return this image,
223
00:09:08.020 --> 00:09:09.583
and if not,
224
00:09:10.908 --> 00:09:15.843
I want you to return this EvilIcon.
225
00:09:17.726 --> 00:09:19.090
There we go.
226
00:09:19.090 --> 00:09:23.996
And now, if you go down to this entire ternary operator,
227
00:09:23.996 --> 00:09:26.908
you can just paste in contentRenderer
228
00:09:26.908 --> 00:09:29.400
and call it as a function,
229
00:09:29.400 --> 00:09:30.233
hit Save,
230
00:09:30.233 --> 00:09:32.701
and you will see this works exactly the same way.
231
00:09:32.701 --> 00:09:34.619
Now it's perfectly fine,
232
00:09:34.619 --> 00:09:36.547
either option are perfectly fine.
233
00:09:36.547 --> 00:09:39.852
If you feel like your ternary operators are starting
234
00:09:39.852 --> 00:09:41.861
to get a little bit messy,
235
00:09:41.861 --> 00:09:43.440
then there's no reason
236
00:09:43.440 --> 00:09:46.971
why you shouldn't just convert it into a function.
237
00:09:46.971 --> 00:09:48.092
Just make sure,
238
00:09:48.092 --> 00:09:49.015
one thing to remember,
239
00:09:49.015 --> 00:09:52.481
always make sure you use the return key word,
240
00:09:52.481 --> 00:09:54.536
because if you did not do that,
241
00:09:54.536 --> 00:09:57.610
then contentRenderer wouldn't actually show anything,
242
00:09:57.610 --> 00:09:59.646
and that can lead to some confusing bugs.
243
00:09:59.646 --> 00:10:01.566
But I think this is looking really nice,
244
00:10:01.566 --> 00:10:03.805
it's a clean component,
245
00:10:03.805 --> 00:10:05.574
it's doing everything that we want,
246
00:10:05.574 --> 00:10:08.179
now it's showing an icon or an image,
247
00:10:08.179 --> 00:10:10.090
and the image is clickable.
248
00:10:10.090 --> 00:10:10.923
So let's go through,
249
00:10:10.923 --> 00:10:12.377
let's actually create a post
250
00:10:12.377 --> 00:10:13.590
and test this out.
251
00:10:13.590 --> 00:10:18.142
And I'll say new post with some type of content,
252
00:10:18.142 --> 00:10:20.028
I'm gonna click on our icon,
253
00:10:20.028 --> 00:10:21.846
click on all photos,
254
00:10:21.846 --> 00:10:26.237
pick out one of these beautiful waterfall photos,
255
00:10:26.237 --> 00:10:27.547
you can see that worked,
256
00:10:27.547 --> 00:10:28.955
if I click on it again,
257
00:10:28.955 --> 00:10:32.142
we're able to pick out a different one
258
00:10:32.142 --> 00:10:34.420
and hit choose once again,
259
00:10:34.420 --> 00:10:35.339
and it gets replaced.
260
00:10:35.339 --> 00:10:36.172
So that's working.
261
00:10:36.172 --> 00:10:37.005
Now if I hit Submit, it posted up,
262
00:10:37.005 --> 00:10:40.542
and there you go.
263
00:10:40.542 --> 00:10:44.204
We have our new image, our new post and our content,
264
00:10:44.204 --> 00:10:45.467
we've been redirected,
265
00:10:45.467 --> 00:10:46.844
and now we have all the styles
266
00:10:46.844 --> 00:10:49.535
we need in our PostImagePicker.
267
00:10:49.535 --> 00:10:51.168
So great job if you went through that,
268
00:10:51.168 --> 00:10:54.266
you learned hopefully a little bit more about some options
269
00:10:54.266 --> 00:10:55.975
when it comes to conditionals
270
00:10:55.975 --> 00:10:58.245
how you can refactor your styles
271
00:10:58.245 --> 00:11:01.143
and how you can work with the PostImagePicker.