1
00:00:02,180 --> 00:00:03,960
So that's our app here.

2
00:00:04,190 --> 00:00:08,750
Now in this application, we added a lot of functionality but there's one more thing I want to add and

3
00:00:08,750 --> 00:00:10,910
that's pull to refresh.

4
00:00:10,910 --> 00:00:14,640
Let's say I went to be able to fetch all the products from inside this page,

5
00:00:14,720 --> 00:00:18,380
so without leaving it and coming back which will fetch the latest products

6
00:00:18,470 --> 00:00:23,450
but from inside this page by simply using this pull to refresh pattern where you drag down and then

7
00:00:23,450 --> 00:00:27,910
it reloads. Thankfully that's really easy to do in React Native

8
00:00:27,920 --> 00:00:33,960
if you're using flat list or a scroll view because it's built into these components. Here in the products

9
00:00:34,000 --> 00:00:40,430
overview screen on flat list, you can implement it by simply adding to props to the flat list. The first

10
00:00:40,430 --> 00:00:42,500
prop is on refresh,

11
00:00:42,500 --> 00:00:48,860
you need to add and this should point at a function which is executed when the user pulls down,

12
00:00:48,860 --> 00:00:51,900
so when the user starts this pull to refresh action

13
00:00:52,060 --> 00:00:57,290
ad here in the products overview screen, we can of course simply point at load products because that

14
00:00:57,320 --> 00:00:59,510
is in the end the function that loads our product,

15
00:00:59,510 --> 00:01:01,610
so this is perfect.

16
00:01:01,610 --> 00:01:09,620
So here we can just point at load products. Now by adding this, we automatically get this functionality

17
00:01:09,770 --> 00:01:15,260
but here we go also get an error, that the refreshing prop must be set because that's the other thing

18
00:01:15,260 --> 00:01:21,980
you always have to set when you add on refresh. Setting on refresh automatically unlocks all this behavior

19
00:01:22,010 --> 00:01:23,090
and also this nice

20
00:01:23,090 --> 00:01:28,850
spinner you get by default, React Native will do all of that for you but it only does so if you also

21
00:01:28,850 --> 00:01:36,700
add the refreshing prop. The refreshing prop is required to let React Native know when you're done

22
00:01:36,700 --> 00:01:43,270
and this should therefore point at variable, at a stateful variable, so at some state which indicates

23
00:01:43,270 --> 00:01:45,280
whether you're currently loading or not

24
00:01:45,340 --> 00:01:49,530
and of course that's great because we have our isLoading prop here,

25
00:01:49,840 --> 00:01:54,720
so that does tell us whether we're loading or not. We'll just have one problem,

26
00:01:55,030 --> 00:01:59,680
if we're loading, I replace the entire content of the screen and that's of course not what I want to

27
00:01:59,680 --> 00:02:08,260
do for reloading. So we'll fix this and a simple fix could be that we remove the set isLoading part here

28
00:02:08,260 --> 00:02:14,800
from load products, both setting it to true and to false and instead do that only for the initial load

29
00:02:14,800 --> 00:02:20,530
here in use effect where we trigger load products when the component loads and then here, using this

30
00:02:20,590 --> 00:02:26,530
then syntax, set this to false once we're done. We can do that because load products will return a

31
00:02:26,530 --> 00:02:32,720
promise because it's having this async keyword, therefore it returns a promise and with that, we get the

32
00:02:32,720 --> 00:02:36,050
loading spinner when this initially loads but not when it reloads and

33
00:02:36,050 --> 00:02:41,330
that also means that when we visit this page, we don't see the spinner but that might be fine.

34
00:02:41,340 --> 00:02:43,250
We have some content on there anyways

35
00:02:43,290 --> 00:02:50,190
and if that then updates after visited this page, that might be okay. So now we're not setting is

36
00:02:50,190 --> 00:02:53,480
loading here but we can now set a different state here,

37
00:02:53,550 --> 00:02:59,030
let's name it isRefreshing maybe and set isRefreshing. Here

38
00:02:59,100 --> 00:03:04,200
I want to manage a state which initially is false, just like isLoading and that's now what I want

39
00:03:04,200 --> 00:03:05,210
to set here,

40
00:03:05,220 --> 00:03:17,370
so set is refreshing to true here and also here after try catch, set it to false

41
00:03:17,380 --> 00:03:25,950
once you're done. So of course, this works in the same way as isLoading but now I won't use isRefreshing

42
00:03:26,100 --> 00:03:32,760
to replace the entire content of the screen but instead isRefreshing can now be fed back into the flat

43
00:03:32,760 --> 00:03:39,360
list on this refreshing prop and therefore on initial load, this works as before but now here, we get

44
00:03:39,360 --> 00:03:45,720
this nice Pull to Refresh functionality, you see it here. I can pull down, get that spinner and this will

45
00:03:45,780 --> 00:03:51,000
automatically reload and I can prove this by editing this on this server. If I add an extra layer or

46
00:03:51,000 --> 00:03:57,890
a couple of extra exclamation marks there, we can get those exclamation marks here by pulling and refreshing,

47
00:03:58,160 --> 00:04:03,530
here you see that and the same of course on Android. There you also got that functionality out of the

48
00:04:03,530 --> 00:04:10,280
box and this is how easy you can add Pull to Refresh functionality to your React Native application.