So that's our app here.
Now in this application, we added a lot of functionality but there's one more thing I want to add and
that's pull to refresh.
Let's say I went to be able to fetch all the products from inside this page,
so without leaving it and coming back which will fetch the latest products
but from inside this page by simply using this pull to refresh pattern where you drag down and then
it reloads. Thankfully that's really easy to do in React Native
if you're using flat list or a scroll view because it's built into these components. Here in the products
overview screen on flat list, you can implement it by simply adding to props to the flat list. The first
prop is on refresh,
you need to add and this should point at a function which is executed when the user pulls down,
so when the user starts this pull to refresh action
ad here in the products overview screen, we can of course simply point at load products because that
is in the end the function that loads our product,
so this is perfect.
So here we can just point at load products. Now by adding this, we automatically get this functionality
but here we go also get an error, that the refreshing prop must be set because that's the other thing
you always have to set when you add on refresh. Setting on refresh automatically unlocks all this behavior
and also this nice
spinner you get by default, React Native will do all of that for you but it only does so if you also
add the refreshing prop. The refreshing prop is required to let React Native know when you're done
and this should therefore point at variable, at a stateful variable, so at some state which indicates
whether you're currently loading or not
and of course that's great because we have our isLoading prop here,
so that does tell us whether we're loading or not. We'll just have one problem,
if we're loading, I replace the entire content of the screen and that's of course not what I want to
do for reloading. So we'll fix this and a simple fix could be that we remove the set isLoading part here
from load products, both setting it to true and to false and instead do that only for the initial load
here in use effect where we trigger load products when the component loads and then here, using this
then syntax, set this to false once we're done. We can do that because load products will return a
promise because it's having this async keyword, therefore it returns a promise and with that, we get the
loading spinner when this initially loads but not when it reloads and
that also means that when we visit this page, we don't see the spinner but that might be fine.
We have some content on there anyways
and if that then updates after visited this page, that might be okay. So now we're not setting is
loading here but we can now set a different state here,
let's name it isRefreshing maybe and set isRefreshing. Here
I want to manage a state which initially is false, just like isLoading and that's now what I want
to set here,
so set is refreshing to true here and also here after try catch, set it to false
once you're done. So of course, this works in the same way as isLoading but now I won't use isRefreshing
to replace the entire content of the screen but instead isRefreshing can now be fed back into the flat
list on this refreshing prop and therefore on initial load, this works as before but now here, we get
this nice Pull to Refresh functionality, you see it here. I can pull down, get that spinner and this will
automatically reload and I can prove this by editing this on this server. If I add an extra layer or
a couple of extra exclamation marks there, we can get those exclamation marks here by pulling and refreshing,
here you see that and the same of course on Android. There you also got that functionality out of the
box and this is how easy you can add Pull to Refresh functionality to your React Native application.