- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.610 --> 00:00:01.920
Over the next few guides,
2
00:00:01.920 --> 00:00:05.690
we are gonna start building out the post detail screen.
3
00:00:05.690 --> 00:00:07.170
Now, the post detail screen
4
00:00:07.170 --> 00:00:10.150
is going to be accessed two different ways.
5
00:00:10.150 --> 00:00:12.690
One is that a user is gonna be able
6
00:00:12.690 --> 00:00:14.300
to be on their feed screen
7
00:00:14.300 --> 00:00:16.650
and click on one of these post items
8
00:00:16.650 --> 00:00:20.010
and then be redirected to that detail screen.
9
00:00:20.010 --> 00:00:22.300
That is where they're gonna be able to see
10
00:00:22.300 --> 00:00:24.930
the full content for that post.
11
00:00:24.930 --> 00:00:28.050
The other goal of the post detail screen
12
00:00:28.050 --> 00:00:30.810
is going to be that when a user goes
13
00:00:30.810 --> 00:00:33.950
to the form to post a new meme,
14
00:00:33.950 --> 00:00:37.720
they're gonna be redirected to the post detail screen
15
00:00:37.720 --> 00:00:39.860
so they'll see all of the content,
16
00:00:39.860 --> 00:00:43.410
the image, the title, and the full content,
17
00:00:43.410 --> 00:00:47.080
the paragraph that they wrote about that specific post.
18
00:00:47.080 --> 00:00:49.560
So we're gonna break this into a few different guides
19
00:00:49.560 --> 00:00:51.500
so that we don't spend too much time
20
00:00:51.500 --> 00:00:53.280
along the way on each one.
21
00:00:53.280 --> 00:00:57.640
And also, I'm going to show you a very cool way
22
00:00:57.640 --> 00:00:59.660
that you can pass data
23
00:00:59.660 --> 00:01:03.740
directly between two screens using the router.
24
00:01:03.740 --> 00:01:05.560
So let's get started with this.
25
00:01:05.560 --> 00:01:09.160
I'm gonna open up the file system on the left-hand side,
26
00:01:09.160 --> 00:01:11.580
and let's go to our screens directory.
27
00:01:11.580 --> 00:01:15.460
I'm going to create a new screen here, a new file,
28
00:01:15.460 --> 00:01:20.003
and for this, I'm just gonna call it PostDetailScreen.tsx.
29
00:01:22.770 --> 00:01:26.040
Let's make sure it's in the right directory, and it is,
30
00:01:26.040 --> 00:01:29.700
and let's add our first dependencies.
31
00:01:29.700 --> 00:01:32.070
So we're not gonna worry about styles in this guide.
32
00:01:32.070 --> 00:01:33.490
So for right now, I'm just gonna say
33
00:01:33.490 --> 00:01:37.350
I wanna import React from react.
34
00:01:37.350 --> 00:01:41.210
And then let's just pull in a few basic components
35
00:01:41.210 --> 00:01:44.530
just to make sure that this is working from React Native.
36
00:01:44.530 --> 00:01:46.150
So I'm gonna import
37
00:01:46.150 --> 00:01:49.470
the View tag and the Text tag
38
00:01:49.470 --> 00:01:52.393
from react-native.
39
00:01:53.570 --> 00:01:56.100
And then let's build out our interface.
40
00:01:56.100 --> 00:01:57.340
This is gonna be pretty cool
41
00:01:57.340 --> 00:02:00.300
because this is going to describe the shape
42
00:02:00.300 --> 00:02:03.640
of how this set of props is going to work,
43
00:02:03.640 --> 00:02:05.600
and this is gonna give you a hint
44
00:02:05.600 --> 00:02:07.890
on how you can pass data directly
45
00:02:07.890 --> 00:02:10.190
from one screen to another.
46
00:02:10.190 --> 00:02:13.090
So I'm gonna build out that interface,
47
00:02:13.090 --> 00:02:16.054
I'm gonna call it I, capital I,
48
00:02:16.054 --> 00:02:19.830
PostDetailScreenProps.
49
00:02:19.830 --> 00:02:22.610
And then inside of here,
50
00:02:22.610 --> 00:02:25.960
I'm going to show you what it's going to do
51
00:02:25.960 --> 00:02:27.760
and what that shape is going to be like,
52
00:02:27.760 --> 00:02:30.150
and then we're gonna kinda reverse engineer
53
00:02:30.150 --> 00:02:31.900
how it's actually going to work.
54
00:02:31.900 --> 00:02:35.610
So don't worry if this doesn't make sense right away.
55
00:02:35.610 --> 00:02:38.530
I'm gonna show you what the final result is gonna be
56
00:02:38.530 --> 00:02:40.620
as I'm building this interface
57
00:02:40.620 --> 00:02:43.360
and then we're gonna see how it all ties together.
58
00:02:43.360 --> 00:02:45.510
So the first prop we're gonna have
59
00:02:45.510 --> 00:02:47.130
is what we've seen before,
60
00:02:47.130 --> 00:02:49.920
which is that navigation prop.
61
00:02:49.920 --> 00:02:52.140
So the way that this works
62
00:02:52.140 --> 00:02:55.050
is that we are going to tie this directly
63
00:02:55.050 --> 00:02:58.140
into our routing engine, into React Navigation.
64
00:02:58.140 --> 00:02:59.510
And then from there,
65
00:02:59.510 --> 00:03:02.860
we know we're gonna have access to the navigation prop.
66
00:03:02.860 --> 00:03:04.010
We've used that before.
67
00:03:04.010 --> 00:03:06.430
That's how users have been able to navigate
68
00:03:06.430 --> 00:03:08.780
from one screen to the other.
69
00:03:08.780 --> 00:03:11.230
But now we're gonna extend it a little bit.
70
00:03:11.230 --> 00:03:13.900
So navigation, we know, takes an object,
71
00:03:13.900 --> 00:03:15.020
like we've seen before.
72
00:03:15.020 --> 00:03:18.620
And we're still gonna use our navigate object,
73
00:03:18.620 --> 00:03:21.380
and this is just gonna be of type any.
74
00:03:21.380 --> 00:03:23.790
And then there's another element
75
00:03:23.790 --> 00:03:25.690
that we've not used before.
76
00:03:25.690 --> 00:03:29.720
So React Navigation actually has state.
77
00:03:29.720 --> 00:03:31.610
It's a component just like so many
78
00:03:31.610 --> 00:03:33.290
other components in React.
79
00:03:33.290 --> 00:03:35.380
And so because it has state,
80
00:03:35.380 --> 00:03:38.530
we can actually reach in and grab data.
81
00:03:38.530 --> 00:03:42.190
We can set data and then we can access that data.
82
00:03:42.190 --> 00:03:45.200
So we are going to grab the state object
83
00:03:45.200 --> 00:03:47.060
from React Navigation.
84
00:03:47.060 --> 00:03:49.810
And the way this is gonna be shaped up
85
00:03:49.810 --> 00:03:53.480
is state is gonna have what are called params.
86
00:03:53.480 --> 00:03:55.410
Params is an object.
87
00:03:55.410 --> 00:03:59.480
And inside of params, that's gonna have a post.
88
00:03:59.480 --> 00:04:03.160
Now, that part is not baked into React Navigation.
89
00:04:03.160 --> 00:04:05.400
We're gonna do that part later on
90
00:04:05.400 --> 00:04:09.700
when we actually define how users can access that route,
91
00:04:09.700 --> 00:04:12.260
and we're gonna pass this post object.
92
00:04:12.260 --> 00:04:15.170
So we're going to access navigation,
93
00:04:15.170 --> 00:04:17.440
then state, then params,
94
00:04:17.440 --> 00:04:19.320
and then we're gonna set the post.
95
00:04:19.320 --> 00:04:21.840
And then for right now, for post,
96
00:04:21.840 --> 00:04:23.380
let's make this pretty simple.
97
00:04:23.380 --> 00:04:28.010
Our post is simply gonna have a name of type string
98
00:04:28.010 --> 00:04:30.640
and then it will have content,
99
00:04:30.640 --> 00:04:33.330
and that is also of type string.
100
00:04:33.330 --> 00:04:35.300
We have a few other things, as we know.
101
00:04:35.300 --> 00:04:38.320
We know that we're gonna have a post_image,
102
00:04:39.290 --> 00:04:40.860
and that will be a string.
103
00:04:40.860 --> 00:04:43.200
We have a user, but we're not gonna get into that right now.
104
00:04:43.200 --> 00:04:44.700
Let's just go with the elements
105
00:04:44.700 --> 00:04:47.360
that we've worked up with up to this point.
106
00:04:47.360 --> 00:04:49.300
So that's everything we're gonna add
107
00:04:49.300 --> 00:04:53.350
at this moment to our interface.
108
00:04:53.350 --> 00:04:54.870
Let me scroll down a little bit.
109
00:04:54.870 --> 00:04:57.600
And now let's actually create the component itself.
110
00:04:57.600 --> 00:05:00.540
So I'm gonna say export default,
111
00:05:00.540 --> 00:05:03.060
and this is gonna take props
112
00:05:03.060 --> 00:05:05.870
in the shape of IPostDetailScreenProps,
113
00:05:05.870 --> 00:05:07.460
which we just created,
114
00:05:07.460 --> 00:05:10.780
and then this will be a fat arrow function.
115
00:05:10.780 --> 00:05:12.240
And then for right now,
116
00:05:12.240 --> 00:05:15.000
all I'm gonna do is I'm just gonna return
117
00:05:15.000 --> 00:05:18.560
a View tag with a Text tag inside of it
118
00:05:18.560 --> 00:05:22.980
that says something like Post detail screen.
119
00:05:22.980 --> 00:05:25.500
This is just so when we actually connect this
120
00:05:25.500 --> 00:05:27.000
and we can link to it,
121
00:05:27.000 --> 00:05:28.970
this is just gonna give us something to see.
122
00:05:28.970 --> 00:05:31.390
Obviously, we'll be changing this soon.
123
00:05:31.390 --> 00:05:33.330
And then for this, just to make sure
124
00:05:33.330 --> 00:05:36.000
that the top navigation bar doesn't get in the way,
125
00:05:36.000 --> 00:05:41.000
I'm going to just add a basic style and say style,
126
00:05:41.180 --> 00:05:45.353
two sets of curly brackets, marginTop of 30.
127
00:05:46.310 --> 00:05:49.890
Okay, so that is our basic component right there.
128
00:05:49.890 --> 00:05:52.910
Now, let's add this to the router.
129
00:05:52.910 --> 00:05:56.210
So I'm gonna open up the router file here.
130
00:05:56.210 --> 00:05:58.290
And if I navigate up,
131
00:05:58.290 --> 00:06:01.400
this is gonna go inside of our AppStack.
132
00:06:01.400 --> 00:06:03.300
And I'm once again gonna give you
133
00:06:03.300 --> 00:06:06.460
a little bit of a different syntax
134
00:06:07.811 --> 00:06:09.310
for using React Navigation.
135
00:06:09.310 --> 00:06:12.350
I wanna show you as much as possible in this course
136
00:06:12.350 --> 00:06:14.690
so that when you're building your own apps,
137
00:06:14.690 --> 00:06:16.580
you can use this document,
138
00:06:16.580 --> 00:06:19.380
you can use this code base as a reference.
139
00:06:19.380 --> 00:06:21.800
So what I'm wanting to do here
140
00:06:21.800 --> 00:06:26.230
is I'm going to declare my post detail screen.
141
00:06:26.230 --> 00:06:28.500
So I'll say PostDetail.
142
00:06:28.500 --> 00:06:30.600
I'm gonna list it right after PostForm.
143
00:06:30.600 --> 00:06:32.930
But instead of just pointing it
144
00:06:32.930 --> 00:06:36.270
to the PostDetailScreen like we've done before,
145
00:06:36.270 --> 00:06:39.650
I'm actually going to do it a little bit differently.
146
00:06:39.650 --> 00:06:42.700
I'm going to pass in an object.
147
00:06:42.700 --> 00:06:46.210
So here, what you can do whenever you have the ability
148
00:06:46.210 --> 00:06:50.250
as a default to simply say here's a name of a route,
149
00:06:50.250 --> 00:06:54.610
and here's the component that I want that name to point to.
150
00:06:54.610 --> 00:06:58.610
But if you wanna have more customization,
151
00:06:58.610 --> 00:07:01.120
you can pass an actual object
152
00:07:01.120 --> 00:07:04.370
to this, whatever the name is.
153
00:07:04.370 --> 00:07:06.870
So the very first thing that we're gonna pass in
154
00:07:06.870 --> 00:07:09.160
is gonna be the screen name.
155
00:07:09.160 --> 00:07:12.820
So for that, I'll start typing PostDetailScreen.
156
00:07:12.820 --> 00:07:16.780
And if I hit Tab, auto-import automatically brought that in.
157
00:07:16.780 --> 00:07:18.220
Once again, you can type
158
00:07:18.220 --> 00:07:22.460
import PostDetailScreen from the screens directory,
159
00:07:22.460 --> 00:07:24.490
and it would do the exact same thing.
160
00:07:24.490 --> 00:07:27.160
And so the screen is the first element.
161
00:07:27.160 --> 00:07:29.090
Now, the next thing
162
00:07:29.090 --> 00:07:31.530
is gonna be I don't wanna have
163
00:07:31.530 --> 00:07:34.570
the navigation options
164
00:07:34.570 --> 00:07:36.750
in this PostDetailScreen.
165
00:07:36.750 --> 00:07:41.090
So this is a way that I can override those default values.
166
00:07:41.090 --> 00:07:42.970
And so I'm gonna show you right here.
167
00:07:42.970 --> 00:07:47.280
I can simply say navigationOptions, which we've seen before,
168
00:07:47.280 --> 00:07:49.840
and then that takes in an object.
169
00:07:49.840 --> 00:07:51.393
And the headerLeft,
170
00:07:53.500 --> 00:07:55.840
I want to be null.
171
00:07:55.840 --> 00:07:59.000
So what that's meaning, headerLeft means that,
172
00:07:59.000 --> 00:08:00.860
so let's go up and test this out
173
00:08:00.860 --> 00:08:03.010
and say our form screen right here.
174
00:08:03.010 --> 00:08:05.870
You see how we have this link going back?
175
00:08:05.870 --> 00:08:08.980
Well, I'm saying I don't want that to be there
176
00:08:08.980 --> 00:08:12.240
whenever we're going to this PostDetailScreen.
177
00:08:12.240 --> 00:08:14.220
So I'm gonna hit Save here,
178
00:08:14.220 --> 00:08:18.120
and we have our post detail screen built out.
179
00:08:18.120 --> 00:08:21.070
That's everything that I wanna cover in this guide
180
00:08:21.070 --> 00:08:23.360
'cause I know that we've covered quite a few things.
181
00:08:23.360 --> 00:08:27.430
We have walked through everything,
182
00:08:27.430 --> 00:08:28.380
the way the shape
183
00:08:28.380 --> 00:08:32.000
of our navigation option prop is going to work.
184
00:08:32.000 --> 00:08:35.640
And then we've also seen how we can customize
185
00:08:35.640 --> 00:08:38.560
how the navigation options are
186
00:08:38.560 --> 00:08:40.840
on a screen-by-screen basis.
187
00:08:40.840 --> 00:08:42.760
So that's already quite a bit right there.
188
00:08:42.760 --> 00:08:44.340
We've created a new screen.
189
00:08:44.340 --> 00:08:45.680
Let's pause right now.
190
00:08:45.680 --> 00:08:47.880
And in the next guide, I'm gonna show you
191
00:08:47.880 --> 00:08:51.590
how we can customize our post item component
192
00:08:51.590 --> 00:08:53.290
so that users are gonna be able
193
00:08:53.290 --> 00:08:55.840
to click on each one of these post items
194
00:08:55.840 --> 00:08:59.623
and be taken to our detail component screen.