Pull to Refresh

[00:00:00]
>> Let's talk about pull to refresh. You might have, you've probably seen this and it might be an action that you've been do without thinking. But to refresh a list, you kind of pull down and then use a spinner and then things happen and then you get a new data.

[00:00:14]
Well, you might be surprised to know or not, that is actually built into react Native which is really cool. Any element that is scrollable. So a scroll view, flat list or a section list has this refresh control prop, where you can pass in a special refresh control element.

[00:00:32]
That's displays loading, so it's built exactly for that. And it also adapts itself based on the environment that it's in. So it looks different on Android than it does on iOS. So the refresh control component has a link to it here and it doesn't have a lot of properties.

[00:00:51]
The main ones that we care about are refreshing, which is a Boolean for whether the view should be indicating that the refresh is active. And on refresh, which is basically called when the view starts refreshing. So if the user pulls down, then this gets triggered. So let's go into our home.

[00:01:12]
Which is where we have the main FlatList. And let's import RefreshControl from React Native. And now let's go into our FlatList and let's pass in Refresh control in our refresh control probe, refreshControl, refresh Control. We just passed a component into the self closing components. And then let's just do refreshing true, so we could see what it looks like.

[00:01:48]
And, was it handle refresh? OnRefresh, and onRefresh, let's just pass in an empty function for now. Alright, so this is what it looks like. So it looks like on IOS, and this is what it looks like on Android. So you can see that they look a little bit different because there's platform specific, differences.

[00:02:13]
Now currently, it's set to always be refreshing because we added this as true. And we wanna make this dynamic.
>> I have a question do you know why they wouldn't make refreshing and unrefresh, just props of the Flatlist component, it seems a little bit indirect to import a refresh control component.

[00:02:39]
>> That's because you might want to customize this component. And because some people you might want to have like a custom refresh spinner, so this actually inherits the props. You can wrap it in anything you want. So if you want a completely custom one, you can just swap it out.

[00:02:56]
>> So you could build your own refresh controllers.
>> Yeah.
>> From using the provided one. I think when we did it, we we kind of forgot what it is. I feel like we kind of wrapped around it, I think it has some. Yeah, I think we wrapped around it.

[00:03:15]
So you can replace it with your custom one [INAUDIBLE].
>> Flat list does have those two props, actually that's what I did first before understanding you could do refresh control. So you can do that if you don't wanna pass in a refresh control. That might be a new feature, but I didn't.

[00:03:31]
>> That was probably not I'm learning all kinds of things today. Yes, so it has refreshing unrefreshed. So thank you for that. And you can pass them directly. I think I always had to have a customized one. So I'm just used to doing this. That's a good shout outs.

[00:03:53]
Yeah, so let's actually try this. So refreshing=true onRefresh. Yeah and it works the same. That's great, let's just use this. All right, now let's make this dynamic. Well, the first thing you wanna do is we want a state parameter to store when we are doing a refresh. So we're going to use, useSate for this again.

[00:04:31]
So let's do refreshing, refreshing set. Well I always actually make my booleans with an is, is refreshing. And sets is refreshing, useState. And let's default to false, because we want to only trigger the refresh once a user does the pull action and now we I want to write the code for actually doing the production.

[00:05:05]
So what do we wanna do we want to set refreshing to true. You wanna do the refresh, I want to set refreshing into false. So I want to use a use callback for this again. Refresh that's to handleRefresh and we useCallback. Let's pass in the empty array again.

[00:05:43]
And now, we use set this to set to refreshing to true, so setIsRefreshing, true and then we want to call this fetch color palettes. I want to await this, which means that we actually have to make this async to use the await keyword. And then finally, what we wanna do is just use the set is setRefreshing and set it to false.

[00:06:21]
And now we want to pass these parameters into refreshing and onRefresh. So isRefreshing and so this ends up being on refresh, handleRefresh. So as a shorthand, we can just pass in the function handleRefresh. We don't need to pass in any arguments. So now when you pull to refresh, it kind of displays there and it disappears when the call is done.

[00:06:58]
But the thing is we actually have the problem that we don't usually have, which is our network request. It's so quick, we don't really see the refresh the way you would normally see it on the web. So just to emulate a bit of a timeout, I'm gonna add an actual timeout.

[00:07:20]
So if you never use setTimeOut before the first argument is the function that you want to execute after the timeout is completed. And then a second argument is the amount of time that you want to wait in milliseconds. So I'm just gonna do one second. So now when I pull to refresh, you notice that even when of release it, the loading spinner kinda stays there for a bit before disappearing.

[00:07:46]
And it's kind of a weird thing cause normally we don't want to make our app slower. We're kind of chasing the opposite, but sometimes from a user experience point of view, users just wanna know that something's going on. And when you have a super short spinning cycle, the thing that they were trying to do didn't happen.

[00:08:03]
So sometimes this is handy to do. So one thing to note that the API that I used, it's actually public on my GitHub. Let's see, I think it's is called the color palette API. It's just a tiny Express app, but I added some more functionality. For example, you can fetch an individual palettes and these are commented out but you can also add a new pallet actually, this was when I was doing the recipe.

[00:08:34]
I'm gonna update this to work on palettes. So if you want to, maybe try on your own to extend it and actually push to an API or something like that, feel free to fork this code and edit it. I deployed it using now.sh, so if you clone it log into now.sh in your terminal you just do, now it will deploy it to your account.

[00:08:55]
So you can do it as well if you want to.