- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.660 --> 00:00:02.580
This is gonna be a really fun guide,
2
00:00:02.580 --> 00:00:04.410
we're getting close to the end of the course.
3
00:00:04.410 --> 00:00:06.900
And so I wanted to end on a high note
4
00:00:06.900 --> 00:00:08.870
and really give you something fun
5
00:00:08.870 --> 00:00:11.610
that you can add your own applications.
6
00:00:11.610 --> 00:00:13.370
Now I'm going to say that
7
00:00:13.370 --> 00:00:15.330
there's gonna be a few parts of this that
8
00:00:15.330 --> 00:00:16.770
it's gonna feel a little bit tricky.
9
00:00:16.770 --> 00:00:20.980
But I want you to be able to work through each stage
10
00:00:20.980 --> 00:00:22.250
of what I'm gonna build out.
11
00:00:22.250 --> 00:00:25.010
Because we're gonna really bring together
12
00:00:25.010 --> 00:00:28.870
a lot of the core React and React Native functionality
13
00:00:28.870 --> 00:00:30.470
and core principles.
14
00:00:30.470 --> 00:00:32.260
We're gonna be working with props,
15
00:00:32.260 --> 00:00:35.070
we're gonna be configuring different shared components
16
00:00:35.070 --> 00:00:38.300
and see how the parent and child components
17
00:00:38.300 --> 00:00:40.100
can all communicate with each other.
18
00:00:40.100 --> 00:00:42.010
We're gonna do all of those things
19
00:00:42.010 --> 00:00:44.710
in order to build out a very fun feature,
20
00:00:44.710 --> 00:00:47.510
which is our Pull to Refresh feature.
21
00:00:47.510 --> 00:00:50.210
And we're also going to do one thing
22
00:00:50.210 --> 00:00:53.870
that is one of my very favorite things to do in development,
23
00:00:53.870 --> 00:00:56.820
which is we're gonna be able to refactor
24
00:00:56.820 --> 00:00:59.990
one of our components and delete a lot of code.
25
00:00:59.990 --> 00:01:01.211
And I love doing that.
26
00:01:01.211 --> 00:01:03.190
That's one of my favorite feelings
27
00:01:03.190 --> 00:01:05.600
to have when I'm building out an app.
28
00:01:05.600 --> 00:01:06.960
So let's get started.
29
00:01:06.960 --> 00:01:10.220
Let's see first what we really need to implement.
30
00:01:10.220 --> 00:01:14.890
So if we want the ability to on the feed screen,
31
00:01:14.890 --> 00:01:18.260
whenever a new post or imagine that you're on this,
32
00:01:18.260 --> 00:01:21.300
just like you're on Instagram or some type of app like that,
33
00:01:21.300 --> 00:01:24.050
and someone on some other side of the world
34
00:01:24.050 --> 00:01:25.750
has created a post,
35
00:01:25.750 --> 00:01:27.180
we wanna be able to see that
36
00:01:27.180 --> 00:01:31.440
without deleting the application and getting back into it.
37
00:01:31.440 --> 00:01:32.320
Then that's right now
38
00:01:32.320 --> 00:01:34.050
that's the only way that that would work.
39
00:01:34.050 --> 00:01:36.760
What we want is to be able to pull down
40
00:01:36.760 --> 00:01:39.540
on the feed screen and on the search screen
41
00:01:39.540 --> 00:01:43.060
and get any of the new posts that have been added
42
00:01:43.060 --> 00:01:45.920
since the last time that we ran the query.
43
00:01:45.920 --> 00:01:47.350
So how can we do that?
44
00:01:47.350 --> 00:01:49.360
Well, there's gonna be a few different things
45
00:01:49.360 --> 00:01:51.450
that we're going to implement here.
46
00:01:51.450 --> 00:01:53.870
We're gonna work with a tool called
47
00:01:53.870 --> 00:01:58.120
the RefreshControl component in React Native.
48
00:01:58.120 --> 00:02:02.670
We're also going to refactor our posts list,
49
00:02:02.670 --> 00:02:05.360
our search screen and our feed screen
50
00:02:05.360 --> 00:02:10.360
so that we can move the loading state into our post list
51
00:02:10.730 --> 00:02:14.240
and let that component handle everything for us.
52
00:02:14.240 --> 00:02:16.890
So by doing that, we're gonna be able to get rid of code
53
00:02:16.890 --> 00:02:19.640
in our search screen and our feed screen.
54
00:02:19.640 --> 00:02:21.200
So let's get started.
55
00:02:21.200 --> 00:02:23.620
The very first thing we're gonna do is we're gonna import
56
00:02:23.620 --> 00:02:26.880
a few more things that we need from React Native.
57
00:02:26.880 --> 00:02:31.000
The first one is gonna be what's called the RefreshControl.
58
00:02:31.000 --> 00:02:33.650
And then we're also gonna need the ActivityIndicator.
59
00:02:34.590 --> 00:02:36.960
So I'll bring in both of those items.
60
00:02:36.960 --> 00:02:40.140
And now let's update our props.
61
00:02:40.140 --> 00:02:43.500
So right now we just have posts and navigate.
62
00:02:43.500 --> 00:02:46.660
We're also going to add in a function
63
00:02:46.660 --> 00:02:48.480
and this is gonna be optional.
64
00:02:48.480 --> 00:02:50.897
So we're gonna add in, getPosts,
65
00:02:51.800 --> 00:02:54.510
and it's up to you if you wanna make this optional or not.
66
00:02:54.510 --> 00:02:57.850
I personally am but if you had,
67
00:02:57.850 --> 00:02:59.210
and the only reason I'm doing this is
68
00:02:59.210 --> 00:03:02.430
'cause I wanna show you some conditions.
69
00:03:02.430 --> 00:03:04.760
And I think that it will make sense.
70
00:03:04.760 --> 00:03:07.280
And then we can decide if we wanna make it optional
71
00:03:07.280 --> 00:03:08.780
or required later on.
72
00:03:08.780 --> 00:03:11.170
So getPosts is just a function
73
00:03:11.170 --> 00:03:14.350
that doesn't take any arguments and it returns void.
74
00:03:14.350 --> 00:03:16.260
Now, we could call this anything we want.
75
00:03:16.260 --> 00:03:19.610
I know this is the same name that I used here,
76
00:03:19.610 --> 00:03:21.160
inside the feed screen.
77
00:03:21.160 --> 00:03:24.230
But you could call this anything, you could say,
78
00:03:24.230 --> 00:03:26.920
I want to call this get data or anything like that.
79
00:03:26.920 --> 00:03:29.600
This is simply the name of the prop
80
00:03:29.600 --> 00:03:30.670
that we're gonna be using.
81
00:03:30.670 --> 00:03:33.090
But I am gonna call it getPosts.
82
00:03:33.090 --> 00:03:34.700
So that is one item
83
00:03:34.700 --> 00:03:36.560
and for right now I'm making it optional.
84
00:03:36.560 --> 00:03:39.700
I'll decide later on if I wanna make it required or not.
85
00:03:39.700 --> 00:03:42.290
And then I wanna add isLoading
86
00:03:42.290 --> 00:03:44.720
and this one definitely is going to be required.
87
00:03:44.720 --> 00:03:49.360
And for this, this is gonna be a boolean value.
88
00:03:49.360 --> 00:03:53.290
So this means that from now on our post list
89
00:03:53.290 --> 00:03:57.830
is gonna be in charge of not just managing the render state
90
00:03:57.830 --> 00:03:59.510
and showing all of the items.
91
00:03:59.510 --> 00:04:01.570
It also, is gonna be in charge
92
00:04:01.570 --> 00:04:04.130
on showing the little spinning indicator.
93
00:04:04.130 --> 00:04:06.930
So that is all we need to do there.
94
00:04:06.930 --> 00:04:11.090
Now let's come down into our postsRenderer.
95
00:04:11.090 --> 00:04:14.490
And let's add to this a little bit.
96
00:04:14.490 --> 00:04:16.217
So inside of postsRenderer,
97
00:04:16.217 --> 00:04:18.500
I'm gonna add a conditional right above this,
98
00:04:18.500 --> 00:04:21.613
that says, if props.isLoading,
99
00:04:23.440 --> 00:04:27.000
then I want to show the ActivityIndicator.
100
00:04:27.000 --> 00:04:31.130
So they're gonna say, I wanna return the ActivityIndicator.
101
00:04:31.130 --> 00:04:35.120
I'm also gonna show you in a minute how you can style this
102
00:04:35.120 --> 00:04:37.240
'cause right now we've just been using the default,
103
00:04:37.240 --> 00:04:39.730
which is kind of hard to see on a dark background.
104
00:04:39.730 --> 00:04:43.900
And then if props.isLoading is false,
105
00:04:43.900 --> 00:04:47.320
then we're gonna add a else/if condition.
106
00:04:47.320 --> 00:04:50.180
Which is just gonna be exactly what we already have there.
107
00:04:50.180 --> 00:04:54.050
Where it says else if, the post length is greater than zero,
108
00:04:54.050 --> 00:04:56.670
then render out each of those posts.
109
00:04:56.670 --> 00:04:58.810
So so far, so good.
110
00:04:58.810 --> 00:05:00.490
That's all we need to do there for right now.
111
00:05:00.490 --> 00:05:03.400
I'm gonna show you a little and this is, to me,
112
00:05:03.400 --> 00:05:06.120
the trickiest part of this entire build
113
00:05:06.120 --> 00:05:08.820
is what we're gonna have to do up here on line 19.
114
00:05:08.820 --> 00:05:10.760
So just kinda keep that in the back of your mind.
115
00:05:10.760 --> 00:05:13.780
Because if we left the code just like this,
116
00:05:13.780 --> 00:05:16.890
there would be kinda annoying bug
117
00:05:16.890 --> 00:05:19.330
that I do not wanna show our users.
118
00:05:19.330 --> 00:05:21.830
So that's all we need right there for now.
119
00:05:21.830 --> 00:05:23.900
Now, let's come down to the Scrollview.
120
00:05:23.900 --> 00:05:28.900
Now the Scrollview takes in a refreshControl prop.
121
00:05:28.980 --> 00:05:33.980
Now do not get this confused with the RefreshControl prop
122
00:05:34.180 --> 00:05:37.029
or component that we imported at the top.
123
00:05:37.029 --> 00:05:39.100
There're two separate things.
124
00:05:39.100 --> 00:05:44.100
We have to pass this component into our Scrollview.
125
00:05:44.410 --> 00:05:47.510
So coming down to Scrollview, I'm gonna put this
126
00:05:47.510 --> 00:05:49.900
on a different line to make it easier to read.
127
00:05:49.900 --> 00:05:53.420
Now I can call refreshControl.
128
00:05:53.420 --> 00:05:57.360
And I'll set this equal to our component.
129
00:05:57.360 --> 00:06:01.410
So I'm gonna use equals and then the curly brackets,
130
00:06:01.410 --> 00:06:04.720
and I'll call a component of RefreshControl.
131
00:06:04.720 --> 00:06:07.540
And now we need to pass it some data.
132
00:06:07.540 --> 00:06:10.190
So the first thing that we need to pass it
133
00:06:10.190 --> 00:06:12.860
is if it's refreshing or not.
134
00:06:12.860 --> 00:06:17.860
So I'm gonna say, refreshing equals props.isLoading.
135
00:06:19.790 --> 00:06:23.470
And then next, we have to pass in a function.
136
00:06:23.470 --> 00:06:27.920
So we're gonna say handleRefresh, that is the next property.
137
00:06:27.920 --> 00:06:29.343
So handleRefresh,
138
00:06:32.240 --> 00:06:34.420
and it's actually onRefresh, I believe.
139
00:06:34.420 --> 00:06:37.420
Yeah, there we go, onRefresh equals,
140
00:06:37.420 --> 00:06:39.650
and this is where we pass in a function.
141
00:06:39.650 --> 00:06:41.810
So the way it works, and you can definitely look
142
00:06:41.810 --> 00:06:44.980
and I encourage you to look this up in the documentation.
143
00:06:44.980 --> 00:06:48.620
The RefreshControl component is gonna be right up here,
144
00:06:48.620 --> 00:06:53.620
and when the trigger comes down, so when we pull that down,
145
00:06:54.200 --> 00:06:56.820
we need to tell it what to do.
146
00:06:56.820 --> 00:06:58.440
And so what it's gonna do is
147
00:06:58.440 --> 00:07:02.030
it is gonna call our getPostS function.
148
00:07:02.030 --> 00:07:05.250
But because I wanted to show this to you,
149
00:07:05.250 --> 00:07:06.332
this is a reason why I made this optional
150
00:07:06.332 --> 00:07:11.332
up here on line nine, where I said getPosts is optional.
151
00:07:11.630 --> 00:07:16.550
Imagine a scenario where we simply want to show the posts
152
00:07:16.550 --> 00:07:20.880
and we don't want a pull-to-refresh kind of function.
153
00:07:20.880 --> 00:07:22.150
Well, if that's the case,
154
00:07:22.150 --> 00:07:25.450
you don't really wannna lock your entire component into it.
155
00:07:25.450 --> 00:07:28.820
Even though our search and our feed
156
00:07:28.820 --> 00:07:30.860
both do want this feature.
157
00:07:30.860 --> 00:07:33.760
If you don't wanna have that piece of functionality,
158
00:07:33.760 --> 00:07:36.690
what you could do is create a different function.
159
00:07:36.690 --> 00:07:41.690
So here I can create kind of a, for lack of a better term,
160
00:07:42.090 --> 00:07:44.970
a function that's going to direct traffic.
161
00:07:44.970 --> 00:07:48.500
So here I'm gonna say, const handleRefresh.
162
00:07:51.050 --> 00:07:54.180
And then this is not gonna take any arguments.
163
00:07:54.180 --> 00:07:58.523
And here I can say if props.getPosts.
164
00:07:59.810 --> 00:08:03.160
So In other words, if somebody passed in this function,
165
00:08:03.160 --> 00:08:05.493
then I want you to call this function.
166
00:08:06.670 --> 00:08:09.890
And if not, then I don't want you to do anything.
167
00:08:09.890 --> 00:08:14.890
And so what we can do is pass handleRefresh to onRefresh.
168
00:08:16.480 --> 00:08:18.900
And then this is gonna work and it's also going
169
00:08:18.900 --> 00:08:21.850
to give us a little bit more flexibility.
170
00:08:21.850 --> 00:08:23.740
It's gonna be able to say, okay,
171
00:08:23.740 --> 00:08:27.220
if a component simply wants to list the post items,
172
00:08:27.220 --> 00:08:31.030
but not give the ability to go out and get new ones,
173
00:08:31.030 --> 00:08:33.760
then that's fine, we can simply ignore it,
174
00:08:33.760 --> 00:08:36.000
and it's not gonna be needed.
175
00:08:36.000 --> 00:08:38.550
So let me hit Save right here
176
00:08:38.550 --> 00:08:41.910
and see if there's anything else that is needed.
177
00:08:41.910 --> 00:08:44.140
If I pulled down now,
178
00:08:44.140 --> 00:08:46.400
it's kinda hard to see 'cause it's dark,
179
00:08:46.400 --> 00:08:49.520
but you can actually see that we have that, that's in place.
180
00:08:49.520 --> 00:08:53.120
You can see the little loading icon is right there.
181
00:08:53.120 --> 00:08:56.010
That's perfect, so that's looking good.
182
00:08:56.010 --> 00:08:58.420
It's not gonna work yet 'cause we haven't wired it up
183
00:08:58.420 --> 00:09:02.380
but so far it is actually functioning.
184
00:09:02.380 --> 00:09:05.700
So now let's make it so users can actually see it,
185
00:09:05.700 --> 00:09:07.260
I think that would be important.
186
00:09:07.260 --> 00:09:10.630
Thankfully, RefreshControl takes a few style props.
187
00:09:10.630 --> 00:09:13.890
And this is gonna be one of the few times in this course.
188
00:09:13.890 --> 00:09:16.240
And really one of the few times in React Native
189
00:09:16.240 --> 00:09:19.710
where your behavior and your code implementation
190
00:09:19.710 --> 00:09:23.260
is dependent on the operating system.
191
00:09:23.260 --> 00:09:26.240
So if you're on iOS, you're gonna use one of these props,
192
00:09:26.240 --> 00:09:28.880
and you need the other one on Android.
193
00:09:28.880 --> 00:09:31.130
So what we're gonna do is put both in there.
194
00:09:31.130 --> 00:09:33.303
So the first one is called tintColor,
195
00:09:34.181 --> 00:09:38.420
this is for iOS, and I want the tintColor to be white.
196
00:09:38.420 --> 00:09:42.260
If you're on Android, it takes a prop of colors.
197
00:09:42.260 --> 00:09:44.560
And that takes an array.
198
00:09:44.560 --> 00:09:46.850
For this, I'm simply going to say white
199
00:09:46.850 --> 00:09:49.130
as the only element in the array.
200
00:09:49.130 --> 00:09:52.120
Hit Save and let's see if it's working now.
201
00:09:52.120 --> 00:09:54.080
So I'm gonna pull down and there you go.
202
00:09:54.080 --> 00:09:57.670
You can see that the ActivityIndicator is now white.
203
00:09:57.670 --> 00:09:59.660
So that is looking good.
204
00:09:59.660 --> 00:10:01.500
Now Let's come up and let's make sure
205
00:10:01.500 --> 00:10:05.260
that our ActivityIndicator component here matches.
206
00:10:05.260 --> 00:10:07.170
Because I'm not sure if you noticed,
207
00:10:07.170 --> 00:10:11.600
but if,in a second I'll show you because right now,
208
00:10:11.600 --> 00:10:12.900
we're still not calling this,
209
00:10:12.900 --> 00:10:15.240
none of this is getting rendered from the feed screen.
210
00:10:15.240 --> 00:10:19.090
But if you notice when the page or screen loaded,
211
00:10:19.090 --> 00:10:22.100
it was still that tiny little dark loading icon.
212
00:10:22.100 --> 00:10:24.410
So we will remember to come back here
213
00:10:24.410 --> 00:10:26.430
and we're gonna add those styles.
214
00:10:26.430 --> 00:10:30.210
Let's go to our feed screen now.
215
00:10:30.210 --> 00:10:32.480
And let's update this 'cause if I scroll down now,
216
00:10:32.480 --> 00:10:34.950
you can see our post list has an error
217
00:10:34.950 --> 00:10:38.610
because we're not passing in all of the props that it needs.
218
00:10:38.610 --> 00:10:41.080
We need to pass in isLoading.
219
00:10:41.080 --> 00:10:45.217
So I'm going to say, isLoading and we'll pass in isLoading.
220
00:10:46.400 --> 00:10:47.960
And then for getPosts,
221
00:10:47.960 --> 00:10:50.103
we need to pass in the prop of getPosts.
222
00:10:50.980 --> 00:10:53.610
And we'll set that equal as you may have guessed
223
00:10:53.610 --> 00:10:55.700
to the function, getPosts.
224
00:10:55.700 --> 00:10:57.850
Okay, that is looking good.
225
00:10:57.850 --> 00:10:59.880
Now what we can do is very cool.
226
00:10:59.880 --> 00:11:00.990
We can actually get rid of
227
00:11:00.990 --> 00:11:03.610
this entire ternary operator right here.
228
00:11:03.610 --> 00:11:05.350
The only reason we had it in place
229
00:11:05.350 --> 00:11:08.460
was to check to see if we were in a loading state
230
00:11:08.460 --> 00:11:10.750
and then to show that ActivityIndicator.
231
00:11:10.750 --> 00:11:15.040
So what I can do is get rid of isLoading ActivityIndicator,
232
00:11:15.040 --> 00:11:17.240
and the full ternary operator,
233
00:11:17.240 --> 00:11:22.240
don't forget to delete the trailing paren and curly bracket.
234
00:11:22.550 --> 00:11:25.680
So I can delete all of that.
235
00:11:25.680 --> 00:11:27.290
And as you may have even seen,
236
00:11:27.290 --> 00:11:30.280
we still have that loading icon there.
237
00:11:30.280 --> 00:11:32.800
And that's coming now from the post list.
238
00:11:32.800 --> 00:11:34.720
So let's see if there's anything else
239
00:11:34.720 --> 00:11:37.310
that we can clean up in this feed screen.
240
00:11:37.310 --> 00:11:40.650
So so far, it looks good.
241
00:11:40.650 --> 00:11:42.760
And if you scroll all the way up the top,
242
00:11:42.760 --> 00:11:45.910
look at all of this code that's no longer being used.
243
00:11:45.910 --> 00:11:46.800
I love this.
244
00:11:46.800 --> 00:11:49.620
We get to get rid of the ActivityIndicator,
245
00:11:49.620 --> 00:11:52.160
the Scrollview, TouchableOpacity.
246
00:11:52.160 --> 00:11:55.600
We get rid of the PostItem and the baseStyles.
247
00:11:55.600 --> 00:11:57.840
So I'm loving how simple
248
00:11:57.840 --> 00:12:00.820
and straightforward this feed screen is looking.
249
00:12:00.820 --> 00:12:03.350
So I'm gonna hit save, and everything there
250
00:12:03.350 --> 00:12:05.210
is still is working properly.
251
00:12:05.210 --> 00:12:07.490
Now one thing that I do want to change
252
00:12:07.490 --> 00:12:11.970
is SetIsLoading by default is true, which is good.
253
00:12:11.970 --> 00:12:15.400
But we also need SetIsLoading to be triggered
254
00:12:15.400 --> 00:12:18.090
whenever the user pulls down.
255
00:12:18.090 --> 00:12:20.360
And so the way we can do that
256
00:12:20.360 --> 00:12:23.190
is by moving that into getPosts.
257
00:12:23.190 --> 00:12:25.580
So I can say inside a getPost,
258
00:12:25.580 --> 00:12:28.340
we wanna make sure that this is true,
259
00:12:28.340 --> 00:12:30.590
because the way RefreshControl works,
260
00:12:30.590 --> 00:12:33.010
if you remember, is when I pull this down,
261
00:12:33.010 --> 00:12:35.800
it's gonna call this getPosts function.
262
00:12:35.800 --> 00:12:39.500
So we need to reset SetIsLoading to true
263
00:12:39.500 --> 00:12:43.690
to make sure that our little spinning icon works.
264
00:12:43.690 --> 00:12:46.360
And then down below, everything here is looking good.
265
00:12:46.360 --> 00:12:49.290
I can get rid of this console.log statement here.
266
00:12:49.290 --> 00:12:51.953
And I think this is good.
267
00:12:53.210 --> 00:12:54.930
We're still seeing a little indicator there,
268
00:12:54.930 --> 00:12:56.470
which is excellent.
269
00:12:56.470 --> 00:12:58.850
Let's go and update the styles for it now.
270
00:12:58.850 --> 00:13:01.640
So ActivityIndicator, the prop
271
00:13:01.640 --> 00:13:04.259
that you can go in with this one.
272
00:13:04.259 --> 00:13:07.125
I'm trying to remember what that one is,
273
00:13:07.125 --> 00:13:09.810
let's actually just Google that 'cause
274
00:13:09.810 --> 00:13:12.830
that's exactly what I would do in a real life scenario.
275
00:13:12.830 --> 00:13:17.080
So I'm gonna open this up and just type in React Native.
276
00:13:17.080 --> 00:13:19.230
Oh, it looks like I've googled that before.
277
00:13:20.270 --> 00:13:22.460
ActivityIndicator, here we go.
278
00:13:22.460 --> 00:13:25.500
Let's look at the docs to see what props can be passed.
279
00:13:25.500 --> 00:13:28.010
And it looks like it actually has a color prop.
280
00:13:28.010 --> 00:13:29.270
So that's perfect.
281
00:13:29.270 --> 00:13:31.050
We can pass in a color Prop,
282
00:13:31.050 --> 00:13:35.490
and it looks like we can just pass in probably a string.
283
00:13:35.490 --> 00:13:38.930
Yap, there's no specific type or anything like that.
284
00:13:38.930 --> 00:13:39.763
So that's good.
285
00:13:39.763 --> 00:13:42.170
And then we can also pass in a custom size,
286
00:13:42.170 --> 00:13:46.280
that's either small or large or a number.
287
00:13:46.280 --> 00:13:49.730
So that is perfect because we're going to use both of those.
288
00:13:49.730 --> 00:13:53.346
Let's open up the Simulator and Visual Studio code again,
289
00:13:53.346 --> 00:13:55.554
and pass both of those in.
290
00:13:55.554 --> 00:13:59.035
Color, is gonna be white
291
00:13:59.035 --> 00:14:04.035
and size, let's see what large looks like.
292
00:14:04.200 --> 00:14:06.580
Okay, hit save. And there we go.
293
00:14:06.580 --> 00:14:07.940
You saw that pop open.
294
00:14:07.940 --> 00:14:11.830
So now you can see if you hit refresh that pops open
295
00:14:11.830 --> 00:14:14.950
and you see the little loading indicator there.
296
00:14:14.950 --> 00:14:16.730
It's white, and it's large.
297
00:14:16.730 --> 00:14:17.670
So that's good.
298
00:14:17.670 --> 00:14:19.460
Now you might have also seen though,
299
00:14:19.460 --> 00:14:21.890
that it kinda pops twice.
300
00:14:21.890 --> 00:14:23.840
That's what we're gonna fix.
301
00:14:23.840 --> 00:14:26.572
Let's also verify that this is working for a new posts.
302
00:14:26.572 --> 00:14:28.963
So I'm going to create a new one.
303
00:14:30.010 --> 00:14:34.890
Some new post and put some content there.
304
00:14:34.890 --> 00:14:39.727
Click on the icon, and let's add a nice waterfall,
305
00:14:40.630 --> 00:14:42.570
hit submit.
306
00:14:42.570 --> 00:14:45.250
This creates the new post everything there looks good.
307
00:14:45.250 --> 00:14:46.890
Now if I come to the feed screen,
308
00:14:46.890 --> 00:14:49.080
it doesn't trigger anything yet.
309
00:14:49.080 --> 00:14:52.450
But now watch if I pull down on this,
310
00:14:52.450 --> 00:14:54.320
some new posts and there we got it.
311
00:14:54.320 --> 00:14:56.920
So this is working very nicely.
312
00:14:56.920 --> 00:14:59.610
But did you notice the little bounce there?
313
00:14:59.610 --> 00:15:02.570
I don't like that at all, that's a horrible user experience.
314
00:15:02.570 --> 00:15:04.040
Why is that happening?
315
00:15:04.040 --> 00:15:06.370
It's happening because props isLoading is
316
00:15:07.920 --> 00:15:09.320
when this gets triggered,
317
00:15:09.320 --> 00:15:12.220
it's showing the ActivityIndicator and the RefreshControl.
318
00:15:14.830 --> 00:15:16.810
That is not what we want.
319
00:15:16.810 --> 00:15:19.720
So instead, what would be better is,
320
00:15:19.720 --> 00:15:21.610
there's a few ways of going about it,
321
00:15:21.610 --> 00:15:25.870
you could create a couple different types of loading states,
322
00:15:25.870 --> 00:15:29.970
you could create a isRefreshing loading state.
323
00:15:29.970 --> 00:15:33.359
And then from there, you could pass getPosts
324
00:15:33.359 --> 00:15:35.960
an argument this to say it's refreshing,
325
00:15:35.960 --> 00:15:38.350
and to use a different type of loading state,
326
00:15:38.350 --> 00:15:39.190
that'd be fine.
327
00:15:39.190 --> 00:15:42.260
In a giant application, then you probably break this up
328
00:15:42.260 --> 00:15:43.860
into a bunch of different pieces.
329
00:15:43.860 --> 00:15:47.890
And you can do something like that, at that point.
330
00:15:47.890 --> 00:15:51.260
For our needs, we can do something even easier.
331
00:15:51.260 --> 00:15:56.260
I can check to see here if the length is equal to zero.
332
00:15:56.670 --> 00:16:01.163
So I'm gonna say, if props isLoading and,
333
00:16:05.130 --> 00:16:10.120
props.posts.length is equal to zero,
334
00:16:10.120 --> 00:16:13.890
that means that we're at a true loading state.
335
00:16:13.890 --> 00:16:17.580
So that is not what we'd be using the RefreshControl,
336
00:16:17.580 --> 00:16:19.940
then show this ActivityIndicator.
337
00:16:19.940 --> 00:16:23.440
Because if we have more than one post,
338
00:16:23.440 --> 00:16:27.300
then we know that this is the state
339
00:16:27.300 --> 00:16:30.190
we're actually calling refreshing.
340
00:16:30.190 --> 00:16:32.350
And we're using RefreshControl.
341
00:16:32.350 --> 00:16:35.600
Like I said, there's gonna be a bunch of edge cases
342
00:16:35.600 --> 00:16:37.880
with a big gigantic application,
343
00:16:37.880 --> 00:16:40.100
you're gonna break this up into more pieces
344
00:16:40.100 --> 00:16:42.100
and catch each one of those edge cases.
345
00:16:42.100 --> 00:16:45.730
But for our purposes, this is going to work pretty well.
346
00:16:45.730 --> 00:16:47.293
So let's save.
347
00:16:48.340 --> 00:16:50.470
And now let's go and do the same thing.
348
00:16:50.470 --> 00:16:52.603
Let's go and create another post.
349
00:16:54.660 --> 00:16:55.943
Add an image.
350
00:17:00.310 --> 00:17:04.090
And then let's save it, and let's see what we get.
351
00:17:04.090 --> 00:17:07.660
So now if I come back here and pull down,
352
00:17:07.660 --> 00:17:09.070
you can see it just brings it up
353
00:17:09.070 --> 00:17:12.850
and it doesn't show twice or show them on top of each other
354
00:17:12.850 --> 00:17:14.110
or anything like that.
355
00:17:14.110 --> 00:17:16.030
So that's looking really nice.
356
00:17:16.030 --> 00:17:18.980
I think that that's giving us what we need.
357
00:17:18.980 --> 00:17:22.050
And you now have a full pull-to-refresh
358
00:17:22.050 --> 00:17:23.370
kind of system there.
359
00:17:23.370 --> 00:17:24.316
Now, if I go to our search screen,
360
00:17:24.316 --> 00:17:29.316
we're gonna have to replicate the new props
361
00:17:29.380 --> 00:17:31.480
that our post list requires.
362
00:17:31.480 --> 00:17:33.790
And we're also gonna be able to clean up some code.
363
00:17:33.790 --> 00:17:36.190
So in our queryRenderer here,
364
00:17:36.190 --> 00:17:38.890
now we can get rid of this isLoading state
365
00:17:38.890 --> 00:17:40.110
which is pretty awesome.
366
00:17:40.110 --> 00:17:41.980
So I'm going to get rid of that.
367
00:17:41.980 --> 00:17:46.270
And now to PostList we can pass in our functions.
368
00:17:46.270 --> 00:17:48.513
So we can pass in for getPosts.
369
00:17:50.335 --> 00:17:52.713
Our function I believe, is called handleSearch.
370
00:17:56.130 --> 00:18:00.090
And then for our isLoading, that one is the same.
371
00:18:00.090 --> 00:18:03.927
IsLoading is equal to isLoading.
372
00:18:05.630 --> 00:18:09.030
Let's save and see if it's working for searches.
373
00:18:09.030 --> 00:18:11.680
So for searches, I'll type in something
374
00:18:11.680 --> 00:18:14.230
that doesn't exist, still works.
375
00:18:14.230 --> 00:18:19.230
Type in another one, that works.
376
00:18:19.790 --> 00:18:24.290
If someone in some other part of the world creates
377
00:18:24.290 --> 00:18:27.550
a meme right now that has a keyword
378
00:18:27.550 --> 00:18:29.550
or content for programming,
379
00:18:29.550 --> 00:18:31.880
now I could pull down to refresh
380
00:18:31.880 --> 00:18:33.660
and it would pop up right there.
381
00:18:33.660 --> 00:18:36.580
And so that is a really neat way
382
00:18:36.580 --> 00:18:39.560
of updating our search functionality
383
00:18:39.560 --> 00:18:41.860
so that everything's happening live.
384
00:18:41.860 --> 00:18:44.670
So let's go and see if there's anything else
385
00:18:44.670 --> 00:18:48.420
in either of these components that we can clean up now.
386
00:18:48.420 --> 00:18:52.160
So looks like everything there is good,
387
00:18:52.160 --> 00:18:54.600
but we can remove our ActivityIndicator
388
00:18:54.600 --> 00:18:55.823
from the search screen.
389
00:18:56.787 --> 00:18:58.560
And that cleans that up nicely.
390
00:18:58.560 --> 00:19:02.290
And see if there's anything else in the feed screen,
391
00:19:02.290 --> 00:19:03.700
I think we're all good.
392
00:19:03.700 --> 00:19:04.970
We already clean that up.
393
00:19:04.970 --> 00:19:08.580
Look at this, all with everything that the feed screen does
394
00:19:08.580 --> 00:19:11.210
for the user and everything they get to see on it,
395
00:19:11.210 --> 00:19:12.541
it's pretty cool that
396
00:19:12.541 --> 00:19:17.530
that entire component only has 55 lines of code.
397
00:19:17.530 --> 00:19:18.700
That's pretty neat.
398
00:19:18.700 --> 00:19:21.040
That's definitely very different than the way
399
00:19:21.040 --> 00:19:25.320
that applications used to be built years and years ago.
400
00:19:25.320 --> 00:19:27.310
This is a really nice way of organizing
401
00:19:27.310 --> 00:19:29.270
the code in a way that makes sense,
402
00:19:29.270 --> 00:19:31.590
and it's a lot easier to maintain.
403
00:19:31.590 --> 00:19:33.350
So great job if you went through that.
404
00:19:33.350 --> 00:19:35.570
You now have the ability to create
405
00:19:35.570 --> 00:19:39.050
a full Pull to Refresh function
406
00:19:39.050 --> 00:19:41.413
in your own mobile applications.