- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.610 --> 00:00:02.090
In this guide, we're going to see
2
00:00:02.090 --> 00:00:05.600
how we can make each one of our post items clickable.
3
00:00:05.600 --> 00:00:07.350
Now we're going to start on the post screen.
4
00:00:07.350 --> 00:00:10.180
And eventually, we're going to populate this
5
00:00:10.180 --> 00:00:12.730
to the search screen in the next section
6
00:00:12.730 --> 00:00:15.040
when we build out that functionality.
7
00:00:15.040 --> 00:00:17.500
Now the very first thing that we're going to do is
8
00:00:17.500 --> 00:00:19.830
we're going to wrap up our posts item
9
00:00:19.830 --> 00:00:22.960
in a TouchableOpacity component.
10
00:00:22.960 --> 00:00:26.210
That's going to make each one of the posts items clickable.
11
00:00:26.210 --> 00:00:28.611
And it's also going to provide us with
12
00:00:28.611 --> 00:00:31.580
the trickiest part of this entire feature,
13
00:00:31.580 --> 00:00:35.907
which is where we need to be able to pass in a post
14
00:00:35.907 --> 00:00:39.210
directly into the routing system.
15
00:00:39.210 --> 00:00:41.760
So we've talked about where especially
16
00:00:41.760 --> 00:00:44.160
when we built out our bottom tab bar,
17
00:00:44.160 --> 00:00:45.560
if you look at the bottom tab bar,
18
00:00:45.560 --> 00:00:49.440
you can see each of the ways that you can navigate.
19
00:00:49.440 --> 00:00:50.920
So you can use a router,
20
00:00:50.920 --> 00:00:53.360
you can click on one of those icons
21
00:00:53.360 --> 00:00:55.960
and you're navigated to that screen.
22
00:00:55.960 --> 00:00:58.760
But one thing we've not done before is,
23
00:00:58.760 --> 00:01:01.880
we've not pass data into the route.
24
00:01:01.880 --> 00:01:05.130
We haven't injected anything specific,
25
00:01:05.130 --> 00:01:06.067
we've just said,
26
00:01:06.067 --> 00:01:08.570
"Hey, send the user to this screen."
27
00:01:08.570 --> 00:01:10.600
What we need to do now is
28
00:01:10.600 --> 00:01:12.700
we need to send the user to a screen.
29
00:01:12.700 --> 00:01:16.770
But we also need to send that user along with some data.
30
00:01:16.770 --> 00:01:18.570
In this case, it's the post.
31
00:01:18.570 --> 00:01:20.650
So that's what we're going to do in this guide.
32
00:01:20.650 --> 00:01:22.940
So I'm going to come up to the top.
33
00:01:22.940 --> 00:01:25.500
And in my React Native imports,
34
00:01:25.500 --> 00:01:28.353
I'm going to pull in TouchableOpacity.
35
00:01:30.000 --> 00:01:32.090
And then you're going to see in a second,
36
00:01:32.090 --> 00:01:34.207
we're actually going to have to change our
37
00:01:34.207 --> 00:01:37.520
props or interface here just a little bit,
38
00:01:37.520 --> 00:01:40.809
because so far in this course, like I mentioned,
39
00:01:40.809 --> 00:01:44.140
every time we've used the navigate function,
40
00:01:44.140 --> 00:01:47.130
we've only passed in a string.
41
00:01:47.130 --> 00:01:51.396
But navigate actually takes in an optional second argument,
42
00:01:51.396 --> 00:01:54.960
and that's what we're going to do here in a little bit.
43
00:01:54.960 --> 00:01:59.017
And that's going to be how we can pass our post data end.
44
00:01:59.017 --> 00:02:00.550
But we're not going to worry about that now.
45
00:02:00.550 --> 00:02:02.080
We'll change that in a second.
46
00:02:02.080 --> 00:02:05.410
I'm going to let you see that TypeScript error first.
47
00:02:05.410 --> 00:02:09.270
So coming down, and right around the post item.
48
00:02:09.270 --> 00:02:10.230
This is where we're going to
49
00:02:10.230 --> 00:02:14.110
wrap up our TouchableOpacity component.
50
00:02:14.110 --> 00:02:16.093
So TouchableOpacity,
51
00:02:16.950 --> 00:02:20.530
and make sure that you wrap the entire component
52
00:02:20.530 --> 00:02:23.880
in the beginning and ending TouchableOpacity.
53
00:02:23.880 --> 00:02:27.069
So that post item is that child node.
54
00:02:27.069 --> 00:02:29.600
And I'm going to hit save right here.
55
00:02:29.600 --> 00:02:33.330
And if you look at each one of these post items now,
56
00:02:33.330 --> 00:02:34.730
now you'll see it's clickable.
57
00:02:34.730 --> 00:02:36.420
Now it's not doing anything yet because
58
00:02:36.420 --> 00:02:40.160
TouchableOpacity hasn't been passed the unpressed Prop,
59
00:02:40.160 --> 00:02:42.330
but this part is working.
60
00:02:42.330 --> 00:02:45.820
And as you can see, the entire element is clickable,
61
00:02:45.820 --> 00:02:47.410
which is what I'm wanting.
62
00:02:47.410 --> 00:02:48.920
So that's good.
63
00:02:48.920 --> 00:02:52.210
Now let's build a handler function.
64
00:02:52.210 --> 00:02:53.930
So I'm going to say const.
65
00:02:53.930 --> 00:02:57.663
And let's just call this handle itemPress.
66
00:02:59.550 --> 00:03:01.850
And this is going to take one argument,
67
00:03:01.850 --> 00:03:06.150
this is going to take the argument of a post record.
68
00:03:06.150 --> 00:03:10.420
So as each one of these posts is looped over
69
00:03:10.420 --> 00:03:12.180
and as we're mapping over it,
70
00:03:12.180 --> 00:03:14.530
we have access to that post element.
71
00:03:14.530 --> 00:03:16.490
We're going to pass this directly
72
00:03:16.490 --> 00:03:20.170
into this handle itemPress function.
73
00:03:20.170 --> 00:03:22.560
So for right now, let's just get it
74
00:03:22.560 --> 00:03:25.230
and let's see the data that we have access to.
75
00:03:25.230 --> 00:03:27.040
So I'm just going to console log this out.
76
00:03:27.040 --> 00:03:30.403
So console, log, the post.
77
00:03:31.410 --> 00:03:34.263
And then let's call handle itemPress.
78
00:03:34.263 --> 00:03:37.526
So inside of TouchableOpacity, and anytime,
79
00:03:37.526 --> 00:03:39.656
and this is something that's good to know,
80
00:03:39.656 --> 00:03:41.810
and I think we've done it before in this course,
81
00:03:41.810 --> 00:03:43.110
but it's good practice.
82
00:03:43.110 --> 00:03:45.884
Anytime you need to pass a argument
83
00:03:45.884 --> 00:03:50.161
into a function like this like a on press handler,
84
00:03:50.161 --> 00:03:53.020
we can't just call handle itemPress,
85
00:03:53.020 --> 00:03:54.988
and then pass in the post like this.
86
00:03:54.988 --> 00:03:57.010
And the reason for that, and look,
87
00:03:57.010 --> 00:03:59.600
you can see there's even an error here.
88
00:03:59.600 --> 00:04:03.620
The reason for that is because what would happen here is
89
00:04:03.620 --> 00:04:05.790
handle itemPress would actually be
90
00:04:05.790 --> 00:04:08.317
called as the elements rendering,
91
00:04:08.317 --> 00:04:10.916
because anytime you call a function in JavaScript,
92
00:04:10.916 --> 00:04:12.620
it's invoked immediately.
93
00:04:12.620 --> 00:04:14.900
So instead, what we need to do is,
94
00:04:14.900 --> 00:04:17.352
we need to pass an anonymous function in.
95
00:04:17.352 --> 00:04:21.670
So to on press, we have to inside of the curly brackets,
96
00:04:21.670 --> 00:04:24.210
say, we're not passing anything
97
00:04:24.210 --> 00:04:25.890
into the anonymous argument,
98
00:04:25.890 --> 00:04:27.640
and then a fat arrow function.
99
00:04:27.640 --> 00:04:30.590
And you can see that now the error is taken away.
100
00:04:30.590 --> 00:04:32.560
So what's going to happen here is
101
00:04:32.560 --> 00:04:35.147
when the user clicks on this post item,
102
00:04:35.147 --> 00:04:39.607
that is when handle itemPress is going to be triggered
103
00:04:39.607 --> 00:04:43.540
and that's when it's going to pass in this post record.
104
00:04:43.540 --> 00:04:45.730
So let's hit save here.
105
00:04:45.730 --> 00:04:50.730
And now, I'm going to open up the terminal.
106
00:04:50.800 --> 00:04:53.330
And see we have the terminal open here.
107
00:04:53.330 --> 00:04:55.930
Let me shrink it so that we can see it
108
00:04:55.930 --> 00:04:57.840
side by side with the simulator.
109
00:04:57.840 --> 00:05:01.830
And now you can see, if I click on these items,
110
00:05:01.830 --> 00:05:03.971
we're getting the post data.
111
00:05:03.971 --> 00:05:06.534
We get the content, we get the ID,
112
00:05:06.534 --> 00:05:09.771
we get if there is a user will get it,
113
00:05:09.771 --> 00:05:13.410
any of the demo records that you created on
114
00:05:13.410 --> 00:05:15.228
DevCamp Space won't have a user record.
115
00:05:15.228 --> 00:05:16.580
But that's fine.
116
00:05:16.580 --> 00:05:18.300
So we're not going to use that anyway.
117
00:05:18.300 --> 00:05:19.570
Then you have the name,
118
00:05:19.570 --> 00:05:22.100
and then you have the post image URL.
119
00:05:22.100 --> 00:05:24.740
So this is all the data that we're going to need
120
00:05:24.740 --> 00:05:26.870
for our detail component.
121
00:05:26.870 --> 00:05:28.770
So that's looking really good.
122
00:05:28.770 --> 00:05:32.930
Now let's come back to the code itself.
123
00:05:32.930 --> 00:05:35.450
And inside of handle itemPress,
124
00:05:35.450 --> 00:05:38.050
this is where we're going to perform that redirect.
125
00:05:38.050 --> 00:05:40.040
So the way it works is,
126
00:05:40.040 --> 00:05:41.657
we're going to say right here
127
00:05:41.657 --> 00:05:46.083
props.navigation.navigate.
128
00:05:47.960 --> 00:05:49.720
And, this is
129
00:05:50.940 --> 00:05:53.740
where my autocomplete isn't always my friend.
130
00:05:53.740 --> 00:05:54.573
There you go.
131
00:05:54.573 --> 00:05:58.830
Props, navigation.navigate.
132
00:05:58.830 --> 00:06:02.600
And now we're going to pass in where we want it to go.
133
00:06:02.600 --> 00:06:04.600
Now we know the first argument,
134
00:06:04.600 --> 00:06:08.620
we do know that it, we do want to go to post detail.
135
00:06:08.620 --> 00:06:12.050
But now we need to pass in that post data.
136
00:06:12.050 --> 00:06:15.070
This is where we're going to have to update our interface.
137
00:06:15.070 --> 00:06:17.853
Because if I just said, post detail here,
138
00:06:19.620 --> 00:06:21.220
and then said,
139
00:06:21.220 --> 00:06:23.820
my second argument is going to be the data,
140
00:06:23.820 --> 00:06:24.660
which in this case,
141
00:06:24.660 --> 00:06:26.200
the way we're going to structure this is,
142
00:06:26.200 --> 00:06:27.580
this is going to be an object.
143
00:06:27.580 --> 00:06:29.718
And then inside of the object,
144
00:06:29.718 --> 00:06:32.220
we're just going to say post.
145
00:06:32.220 --> 00:06:37.220
Which is the same as saying, post, post just like this.
146
00:06:37.550 --> 00:06:39.640
But we're going to get an error here.
147
00:06:39.640 --> 00:06:42.130
And the reason we're getting an error is remember,
148
00:06:42.130 --> 00:06:44.570
when we defined our interface up here,
149
00:06:44.570 --> 00:06:47.020
we said that this was always
150
00:06:47.020 --> 00:06:49.170
only going to have a single argument.
151
00:06:49.170 --> 00:06:51.500
That's the way TypeScript interfaces work.
152
00:06:51.500 --> 00:06:53.310
We created a contract
153
00:06:53.310 --> 00:06:56.292
that our entire component had to follow.
154
00:06:56.292 --> 00:06:58.507
So the way that we can update this,
155
00:06:58.507 --> 00:07:00.450
we can say arg one,
156
00:07:00.450 --> 00:07:03.720
we could even update this to make it a little more explicit.
157
00:07:03.720 --> 00:07:07.143
We could say screen name.
158
00:07:08.030 --> 00:07:09.910
And that one is always required.
159
00:07:09.910 --> 00:07:13.610
But the next thing is we could say something like data.
160
00:07:13.610 --> 00:07:16.870
And so, I'm going to make this be optional.
161
00:07:16.870 --> 00:07:18.500
And then it's going to be a colon,
162
00:07:18.500 --> 00:07:19.610
and then say any.
163
00:07:19.610 --> 00:07:21.960
Because we don't want to give any specific rules
164
00:07:21.960 --> 00:07:23.903
for what the data needs to look like.
165
00:07:23.903 --> 00:07:26.909
So now if we scroll all the way down here,
166
00:07:26.909 --> 00:07:30.030
you can see that now that resolved our error.
167
00:07:30.030 --> 00:07:31.530
So I'm going to hit save,
168
00:07:31.530 --> 00:07:33.690
and let's see if this is working.
169
00:07:33.690 --> 00:07:35.440
Click dismiss on that warning.
170
00:07:35.440 --> 00:07:37.020
Now if I click on this,
171
00:07:37.020 --> 00:07:39.127
look at that, that is working.
172
00:07:39.127 --> 00:07:40.610
That looks really good.
173
00:07:40.610 --> 00:07:42.380
So and there's a warning here,
174
00:07:42.380 --> 00:07:44.720
we'll take care of that in a future guide.
175
00:07:44.720 --> 00:07:46.220
Don't worry about that right now.
176
00:07:46.220 --> 00:07:50.680
So we have now enabled the ability to navigate
177
00:07:50.680 --> 00:07:53.975
from our posts detail or from our feed screen
178
00:07:53.975 --> 00:07:56.730
to the post detail screen.
179
00:07:56.730 --> 00:07:59.460
And we've also passed in the data.
180
00:07:59.460 --> 00:08:01.680
Now we're not rendering any of it right now.
181
00:08:01.680 --> 00:08:03.609
That we're going to save that for a future guide.
182
00:08:03.609 --> 00:08:06.915
But you've seen now that the routing system
183
00:08:06.915 --> 00:08:10.470
has the ability to not just take in
184
00:08:10.470 --> 00:08:12.500
the screen you want to navigate to,
185
00:08:12.500 --> 00:08:17.000
but also gives you the ability to pass data between screens,
186
00:08:17.000 --> 00:08:19.830
which is incredibly helpful for circumstances
187
00:08:19.830 --> 00:08:21.840
exactly like what we have right here.
188
00:08:21.840 --> 00:08:23.502
So great job if you went through that.
189
00:08:23.502 --> 00:08:26.780
You now know how to not only navigate between screens,
190
00:08:26.780 --> 00:08:28.890
but now you know how to pass the data
191
00:08:28.890 --> 00:08:30.563
from one screen to another.