- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.600 --> 00:00:02.050
This is gonna be a fun guide.
2
00:00:02.050 --> 00:00:05.020
In this guide, we're gonna be able to take everything
3
00:00:05.020 --> 00:00:07.740
that we've done so far and put it together,
4
00:00:07.740 --> 00:00:09.520
this is gonna be when the first times,
5
00:00:09.520 --> 00:00:13.210
you've been able to see all of the content for a post,
6
00:00:13.210 --> 00:00:16.650
the image, the title and then the content
7
00:00:16.650 --> 00:00:18.690
all on the same screen together.
8
00:00:18.690 --> 00:00:21.470
So let's build that out now.
9
00:00:21.470 --> 00:00:24.610
So I'm gonna close these files I have open here
10
00:00:24.610 --> 00:00:28.370
and I'm gonna open up the PostDetailScreen.
11
00:00:29.530 --> 00:00:33.270
Now we're gonna build this out quite a bit in this guide.
12
00:00:33.270 --> 00:00:35.340
Now the very first thing that I'm gonna do,
13
00:00:35.340 --> 00:00:39.350
is I noticed that I made one mistake
14
00:00:39.350 --> 00:00:41.670
when I built out the interface last time,
15
00:00:41.670 --> 00:00:43.860
I called it post image
16
00:00:43.860 --> 00:00:46.010
and it's actually post_image_url
17
00:00:47.083 --> 00:00:49.450
and that is a string, so I'm gonna update that.
18
00:00:49.450 --> 00:00:54.450
Now technically, we do not need to list out anything
19
00:00:54.810 --> 00:00:57.470
except the content in our interface.
20
00:00:57.470 --> 00:00:59.780
And the reason for that is because we're simply
21
00:00:59.780 --> 00:01:03.210
gonna be calling our PostItem component
22
00:01:03.210 --> 00:01:05.200
and passing in the post.
23
00:01:05.200 --> 00:01:07.880
And then the only other thing we're gonna be grabbing
24
00:01:07.880 --> 00:01:09.940
is the content attribute.
25
00:01:09.940 --> 00:01:12.200
But I personally like to list out
26
00:01:12.200 --> 00:01:14.110
when I'm building an interface like this,
27
00:01:14.110 --> 00:01:16.690
I like to list out the other data points,
28
00:01:16.690 --> 00:01:19.960
so that I can see exactly what I have access to.
29
00:01:19.960 --> 00:01:22.120
That's a personal preference thing for me,
30
00:01:22.120 --> 00:01:24.990
you may find something that works different for you
31
00:01:24.990 --> 00:01:26.530
and that's perfectly fine.
32
00:01:26.530 --> 00:01:29.840
Okay, so let's go and let's actually see
33
00:01:29.840 --> 00:01:33.000
what we're gonna have to do to build this out.
34
00:01:33.000 --> 00:01:34.780
So in the PostDetailScreen,
35
00:01:34.780 --> 00:01:37.910
we wanna have the big image right up here.
36
00:01:37.910 --> 00:01:39.970
First and foremost, we know we want that,
37
00:01:39.970 --> 00:01:42.490
we also know we want our base styles.
38
00:01:42.490 --> 00:01:45.430
And then lastly, we wanna have our bottom Tab bar,
39
00:01:45.430 --> 00:01:46.810
'cause as you can see right here,
40
00:01:46.810 --> 00:01:48.580
because we don't have the Back button,
41
00:01:48.580 --> 00:01:50.730
there's no way for a user to navigate
42
00:01:50.730 --> 00:01:52.370
away from the screen right now.
43
00:01:52.370 --> 00:01:55.840
So let's get all of that in place.
44
00:01:55.840 --> 00:01:59.900
And then one last thing because this may have,
45
00:01:59.900 --> 00:02:02.130
there may be some people that wanna type
46
00:02:02.130 --> 00:02:05.620
paragraphs of content in, then it might be a good idea
47
00:02:05.620 --> 00:02:06.940
to make this a scroll view.
48
00:02:06.940 --> 00:02:08.740
Because for smaller screens,
49
00:02:08.740 --> 00:02:10.360
you wanna make sure that users
50
00:02:10.360 --> 00:02:13.390
would be able to navigate to see all of the content.
51
00:02:13.390 --> 00:02:17.000
So let's get started with everything here.
52
00:02:17.000 --> 00:02:19.980
I'm gonna start by getting rid of
53
00:02:19.980 --> 00:02:22.230
this PostDetailScreen right here,
54
00:02:22.230 --> 00:02:26.280
and I'm gonna call inside of it our PostItem.
55
00:02:26.280 --> 00:02:27.833
So we'll say PostItem,
56
00:02:28.850 --> 00:02:30.890
and we know that PostItem simply needs
57
00:02:30.890 --> 00:02:33.700
to have a post for the prop.
58
00:02:33.700 --> 00:02:36.670
And then let's see how we can access that.
59
00:02:36.670 --> 00:02:39.133
So, we know that we can call props.
60
00:02:40.280 --> 00:02:43.590
and then we have access to let's see,
61
00:02:43.590 --> 00:02:45.660
we have access to state.
62
00:02:45.660 --> 00:02:49.550
Yes, so and we have access to state
63
00:02:49.550 --> 00:02:51.450
or actually am I missing one?
64
00:02:51.450 --> 00:02:53.140
Yes, so sorry, that's my mistake.
65
00:02:53.140 --> 00:02:55.860
It's props, navigation, then state.
66
00:02:55.860 --> 00:02:58.730
That's why it's nice to have that interface right there,
67
00:02:58.730 --> 00:03:01.650
and hopefully things like that when you see me
68
00:03:01.650 --> 00:03:04.120
who works on these all day, every day
69
00:03:04.120 --> 00:03:06.610
and you see where all make a mistake
70
00:03:06.610 --> 00:03:09.650
and make a reference.error,
71
00:03:09.650 --> 00:03:11.680
you can see that all you have to do,
72
00:03:11.680 --> 00:03:13.310
is look at the interface.
73
00:03:13.310 --> 00:03:16.440
And instead of me having to do something,
74
00:03:16.440 --> 00:03:18.490
like say I wasn't using TypeScript
75
00:03:18.490 --> 00:03:20.750
and I'd no idea what the data look like,
76
00:03:20.750 --> 00:03:24.170
I'd have to go back and I'd have to go do a console log
77
00:03:24.170 --> 00:03:26.190
or I'd have to go reference the documentation
78
00:03:26.190 --> 00:03:27.410
or something like that.
79
00:03:27.410 --> 00:03:30.720
But instead, I was simply able to look at the interface
80
00:03:30.720 --> 00:03:33.970
and I essentially gave myself instructions
81
00:03:33.970 --> 00:03:37.920
for how I could work with this entire piece of data.
82
00:03:37.920 --> 00:03:40.710
And that's really helpful, that's part of the reason
83
00:03:40.710 --> 00:03:43.670
why all of my JavaScript applications now,
84
00:03:43.670 --> 00:03:46.780
whether they're React native, React, View,
85
00:03:46.780 --> 00:03:47.960
anything like that.
86
00:03:47.960 --> 00:03:50.140
They're all built in TypeScript
87
00:03:50.140 --> 00:03:52.000
and it's for reasons like this.
88
00:03:52.000 --> 00:03:56.020
So, we have props and then we access navigation,
89
00:03:56.020 --> 00:03:59.750
and then from there, we're gonna access state
90
00:03:59.750 --> 00:04:02.930
and then from state, we're gonna get the params,
91
00:04:02.930 --> 00:04:05.680
and then from the params, we're gonna get the post.
92
00:04:05.680 --> 00:04:08.720
Okay, that took quite a bit of time,
93
00:04:08.720 --> 00:04:10.530
so what I think is a good idea
94
00:04:10.530 --> 00:04:14.230
is we're actually going to extract all of this out.
95
00:04:14.230 --> 00:04:17.850
And let's put this in a way where we can grab it,
96
00:04:17.850 --> 00:04:18.870
because we're also gonna have
97
00:04:18.870 --> 00:04:21.120
to work with that post content too.
98
00:04:21.120 --> 00:04:24.240
So let me cut this really quick.
99
00:04:24.240 --> 00:04:28.330
And at the very top, I'm gonna say const, post
100
00:04:28.330 --> 00:04:30.570
and then I'm gonna set that equal
101
00:04:30.570 --> 00:04:34.260
to everything that I just grabbed here.
102
00:04:34.260 --> 00:04:36.240
So I can just say params,
103
00:04:36.240 --> 00:04:39.260
and then now all have performed D-structuring
104
00:04:39.260 --> 00:04:41.470
and we'll have access to that post.
105
00:04:41.470 --> 00:04:45.060
So I'm gonna get the post here and paste that in.
106
00:04:45.060 --> 00:04:46.960
Now it looks like we have a little TypeScript error here.
107
00:04:46.960 --> 00:04:48.850
Let's see what the issue is, okay?
108
00:04:48.850 --> 00:04:50.410
And this is helpful too.
109
00:04:50.410 --> 00:04:53.220
So the property ID is missing.
110
00:04:53.220 --> 00:04:56.710
So that means that we need to add ID
111
00:04:57.810 --> 00:05:01.050
of type number and that fixes that error.
112
00:05:01.050 --> 00:05:03.910
Once again, it's TypeScript kinda helping us along
113
00:05:03.910 --> 00:05:07.140
to make sure that we're not missing any data.
114
00:05:07.140 --> 00:05:11.690
So let's hit Save, and see if this is working,
115
00:05:11.690 --> 00:05:13.650
and look at that, that is perfect.
116
00:05:13.650 --> 00:05:17.657
And as you notice, because we didn't wrap PostItem up
117
00:05:17.657 --> 00:05:20.180
and we didn't make posts item clickable,
118
00:05:20.180 --> 00:05:22.800
we made it clickable from our Feed Screen.
119
00:05:22.800 --> 00:05:25.280
If you click on the post itself,
120
00:05:25.280 --> 00:05:27.080
nothing happens just like we want,
121
00:05:27.080 --> 00:05:29.930
we're only getting the image and the title.
122
00:05:29.930 --> 00:05:33.130
So, so far, so good, I'm liking the way that's working,
123
00:05:33.130 --> 00:05:35.330
and we've also really cleaned up
124
00:05:35.330 --> 00:05:38.140
how we're extracting out the post data.
125
00:05:38.140 --> 00:05:39.640
So that's our PostItem.
126
00:05:39.640 --> 00:05:41.570
Now, we also know we're gonna need
127
00:05:41.570 --> 00:05:44.770
to have our description or content.
128
00:05:44.770 --> 00:05:46.710
So I'm just gonna add a ViewTag,
129
00:05:46.710 --> 00:05:50.140
we may update this structure in a second, but for right now,
130
00:05:50.140 --> 00:05:51.380
I'm just gonna add a ViewTag
131
00:05:51.380 --> 00:05:54.473
and then I'm also gonna wrap it up with a TextTag.
132
00:05:56.310 --> 00:06:00.930
And then inside of curly brackets, if I can fix my typos,
133
00:06:00.930 --> 00:06:05.930
inside of curly brackets, I can just call post.content.
134
00:06:05.970 --> 00:06:08.883
Hit Save and as you can see right here,
135
00:06:09.962 --> 00:06:11.410
we have everything out.
136
00:06:11.410 --> 00:06:15.180
And these warnings, don't worry about these warnings
137
00:06:15.180 --> 00:06:16.270
or these errors.
138
00:06:16.270 --> 00:06:20.450
This is simply because of how the hot reloading works
139
00:06:20.450 --> 00:06:21.540
in the simulator.
140
00:06:21.540 --> 00:06:25.440
It had the image before, but when we did the reload again,
141
00:06:25.440 --> 00:06:27.950
it wasn't able to access that image.
142
00:06:27.950 --> 00:06:29.823
So you can just hit Refresh,
143
00:06:30.830 --> 00:06:34.040
navigate to it again and now you can see we have the image,
144
00:06:34.040 --> 00:06:36.640
the title and then all the content.
145
00:06:36.640 --> 00:06:38.440
That's gonna be something we're probably gonna have to do
146
00:06:38.440 --> 00:06:40.960
quite a bit as we're building out this layout.
147
00:06:40.960 --> 00:06:42.500
It's not something with the users,
148
00:06:42.500 --> 00:06:44.840
it's not an issue that users would run into
149
00:06:44.840 --> 00:06:46.030
or anything like that.
150
00:06:46.030 --> 00:06:47.840
So don't worry about that part of it.
151
00:06:47.840 --> 00:06:49.510
Okay, so this is looking good,
152
00:06:49.510 --> 00:06:52.400
we have our image, we have our title
153
00:06:52.400 --> 00:06:53.690
and then we have our content,
154
00:06:53.690 --> 00:06:56.520
we have all of the key things that we're needing,
155
00:06:56.520 --> 00:06:58.670
so now let's just make it look pretty.
156
00:06:58.670 --> 00:07:00.100
So, we have our ViewTag,
157
00:07:00.100 --> 00:07:02.350
we're gonna be able to get rid of this,
158
00:07:02.350 --> 00:07:04.870
because we already have our container component.
159
00:07:04.870 --> 00:07:06.600
That's part of the reason why we built it
160
00:07:06.600 --> 00:07:07.770
in the first place.
161
00:07:07.770 --> 00:07:11.600
So I'm gonna import our container component,
162
00:07:11.600 --> 00:07:15.070
so I'm gonna go right after where it says return.
163
00:07:15.070 --> 00:07:17.320
And I'm gonna just start typing out container
164
00:07:18.240 --> 00:07:22.170
and then I'm going to get rid of this ViewTag,
165
00:07:22.170 --> 00:07:25.560
and then I'm gonna wrap everything up
166
00:07:25.560 --> 00:07:28.010
in the closing container tag.
167
00:07:28.010 --> 00:07:30.690
Also make sure you get rid of that last ViewTag.
168
00:07:30.690 --> 00:07:32.530
And as you can see, we have an error here
169
00:07:32.530 --> 00:07:34.320
because remember container,
170
00:07:34.320 --> 00:07:36.040
because it has the bottom Tab bar,
171
00:07:36.040 --> 00:07:40.240
it needs to have access to that navigate prop.
172
00:07:40.240 --> 00:07:43.340
So in order to do that, we already brought that in
173
00:07:43.340 --> 00:07:45.630
and that's a reason why we added it here.
174
00:07:45.630 --> 00:07:49.490
So in order to do that, I can just pass into container
175
00:07:49.490 --> 00:07:51.590
and I can say navigate,
176
00:07:51.590 --> 00:07:56.590
and then pass in props.navigation.navigate.
177
00:07:59.380 --> 00:08:03.330
Okay, let's hit Save here, and there you go.
178
00:08:03.330 --> 00:08:06.480
Now you can see we have our image, our title,
179
00:08:06.480 --> 00:08:07.740
and then our content.
180
00:08:07.740 --> 00:08:11.460
And now we have the ability to navigate back
181
00:08:11.460 --> 00:08:13.530
because we have our bottom tab bars.
182
00:08:13.530 --> 00:08:16.080
So that's all looking really good.
183
00:08:16.080 --> 00:08:19.110
I like the way this is shaping up.
184
00:08:19.110 --> 00:08:22.780
Okay, so now let's see what else we want to do.
185
00:08:22.780 --> 00:08:26.460
Well, I think that we already have a contentWrapper,
186
00:08:26.460 --> 00:08:31.160
if you open up your PostItem styles.
187
00:08:31.160 --> 00:08:33.730
You can see we have this contentWrapper right here,
188
00:08:33.730 --> 00:08:36.420
we can import this and that's what we can wrap up
189
00:08:36.420 --> 00:08:38.890
our content here with.
190
00:08:38.890 --> 00:08:42.890
And while we're here, we might as well also add in
191
00:08:42.890 --> 00:08:44.960
the styles we want for that text.
192
00:08:44.960 --> 00:08:47.770
So here, I'm gonna say contentText
193
00:08:49.320 --> 00:08:53.590
and then let's say what we want to have happen here.
194
00:08:53.590 --> 00:08:57.800
We wanna have the color to be white
195
00:08:57.800 --> 00:09:00.140
and then let's add a font size.
196
00:09:00.140 --> 00:09:02.660
So we can reuse what we have here.
197
00:09:02.660 --> 00:09:05.330
So this font size is gonna be responsive,
198
00:09:05.330 --> 00:09:07.320
just like our name.
199
00:09:07.320 --> 00:09:08.600
So I'm gonna paste that in,
200
00:09:08.600 --> 00:09:11.720
we don't want it anywhere near as big as 20.
201
00:09:11.720 --> 00:09:15.010
So let's go, maybe let's try out 14,
202
00:09:15.010 --> 00:09:17.140
we can always change it if we want.
203
00:09:17.140 --> 00:09:20.820
So now we have our contentWrapper and our contentText,
204
00:09:20.820 --> 00:09:23.060
and this is in our PostItemStyles.
205
00:09:23.060 --> 00:09:24.800
So let's import that,
206
00:09:24.800 --> 00:09:28.000
and we're gonna wrap up our ViewTag with it.
207
00:09:28.000 --> 00:09:30.820
So let me go up to the very top
208
00:09:30.820 --> 00:09:33.420
and say import postItemStyles
209
00:09:35.040 --> 00:09:37.543
and we want this from
210
00:09:37.543 --> 00:09:40.270
../style/
211
00:09:41.320 --> 00:09:46.320
I believe I put this in stacks/sposts/postItemStyles.
212
00:09:47.370 --> 00:09:50.340
And then because we're only using two of the styles,
213
00:09:50.340 --> 00:09:53.280
let's do some destructuring here to make it nice
214
00:09:53.280 --> 00:09:54.640
and easy to work with them.
215
00:09:54.640 --> 00:09:55.870
So I'm gonna say, const
216
00:09:55.870 --> 00:09:59.971
and then pull in our contentWrapper
217
00:09:59.971 --> 00:10:00.804
and our contentText, so contentWrapper, contentText,
218
00:10:07.480 --> 00:10:12.013
and that's gonna be from our postItemStyles, okay?
219
00:10:13.880 --> 00:10:15.910
No errors everything there is working.
220
00:10:15.910 --> 00:10:17.440
So for our contentWrapper,
221
00:10:17.440 --> 00:10:20.910
we can use that for our ViewTag styles.
222
00:10:20.910 --> 00:10:25.030
So style contentWrapper and then for the text,
223
00:10:25.030 --> 00:10:29.080
we'll say style and then we'll set that equal to
224
00:10:29.080 --> 00:10:30.743
our contentText.
225
00:10:32.199 --> 00:10:35.350
Hit Save, and that's looking really good.
226
00:10:35.350 --> 00:10:36.890
Okay, we're really close.
227
00:10:36.890 --> 00:10:39.550
The only thing that I think we need to change
228
00:10:39.550 --> 00:10:41.290
is because as you can see right here,
229
00:10:41.290 --> 00:10:43.150
we're almost taking up the full screen.
230
00:10:43.150 --> 00:10:45.840
So on a very small screen,
231
00:10:45.840 --> 00:10:49.020
that user would might get cut off,
232
00:10:49.020 --> 00:10:51.770
like around this point of the phone,
233
00:10:51.770 --> 00:10:53.440
'cause there are some very small phone
234
00:10:53.440 --> 00:10:54.930
screen sizes out there.
235
00:10:54.930 --> 00:10:58.260
So we definitely need to make all of this,
236
00:10:58.260 --> 00:11:00.940
a ScrollView container.
237
00:11:00.940 --> 00:11:05.260
So scroll all the way up and in your list of React native
238
00:11:05.260 --> 00:11:08.330
imports, import ScrollView
239
00:11:08.330 --> 00:11:11.210
and then I'm gonna copy that,
240
00:11:11.210 --> 00:11:13.890
and then inside of the container,
241
00:11:13.890 --> 00:11:15.610
I'm gonna pull in that ScrollView
242
00:11:16.540 --> 00:11:20.120
and then hit Save and let's see if this works.
243
00:11:20.120 --> 00:11:22.620
Now that we didn't want anything to change in the styles,
244
00:11:22.620 --> 00:11:25.990
that all looks good, and now you can see that that works.
245
00:11:25.990 --> 00:11:28.500
So if we were on a really tiny screen,
246
00:11:28.500 --> 00:11:30.490
the user would still be able to scroll up
247
00:11:30.490 --> 00:11:32.810
and they'd be able to see all of the content.
248
00:11:32.810 --> 00:11:35.370
So, this looks fantastic,
249
00:11:35.370 --> 00:11:38.590
you can navigate throughout all of your posts,
250
00:11:38.590 --> 00:11:40.750
you can click on each one of them navigate
251
00:11:40.750 --> 00:11:45.390
and see the title, the content, everything is looking good
252
00:11:45.390 --> 00:11:47.500
and we also are even using our things
253
00:11:47.500 --> 00:11:49.290
like our responsive sizes.
254
00:11:49.290 --> 00:11:52.930
So this can work on all kinds of different screens.
255
00:11:52.930 --> 00:11:54.880
So great job if you went through that,
256
00:11:54.880 --> 00:11:59.190
we now have a fully functional PostDetailScreen.
257
00:11:59.190 --> 00:12:02.250
And with all of this in place, in the next guide,
258
00:12:02.250 --> 00:12:05.590
we're gonna go and reget back to our post form
259
00:12:05.590 --> 00:12:06.970
and we're gonna build it out.
260
00:12:06.970 --> 00:12:09.330
So when a user creates a post,
261
00:12:09.330 --> 00:12:12.430
we are gonna programmatically redirect them,
262
00:12:12.430 --> 00:12:15.870
to our new PostDetailScreen where they can see everything
263
00:12:15.870 --> 00:12:17.153
that they just published.