React Native
About Lesson

In this React Native lesson we are going to learn about React Native Pull to Refresh, one of the best thing about rendering your data inside a FlatList is this, that it has Pull to Refresh feature, so Pull-to-refresh is a touchscreen gesture that consists of touching the screen of a computing device with a finger or pressing a button on a pointing device, dragging the screen downward with the finger or pointing device, and then releasing it, as a signal to the application to refresh the contents of the screen.

 

 

 

We are going to use our previous lesson example that was fetching data from an api, this is my Pullrefresh.js file.

 

 

In here i have created some useState hooks for state management.

 

 

This is my function for fetching the data from an api, we are going to use axios, make sure that you have already installed axios, after fetching the data we need to make the setLoading to false.

 

 

 

In here we are going to add our fetching method inside useEffect hooks, because i have already said that if you want to do some side effects than you can use useEffect() hooks.

 

 

This is our FlatList, and we want to show our data using react native flatlist, you can see that we have added two more options in our FlatList, the first one is onRefresh and in here we need to add our fetching method in our case it is loadData(), the second one is refreshing, in here you need to add the loading state.

 

 

 

This is my App.js file and i have added my component in here.

 

 

 

Run your application and this is the result.

React Native Pull to Refresh
React Native Pull to Refresh

 

Thank you for visiting my website! If you enjoyed the free courses, please consider supporting my works on Patreon.
Exercise Files
No Attachment Found
No Attachment Found