Pull-to-Refresh and Load More
Implement onRefresh with RefreshControl to let users pull down to reload data, and use onEndReached to fetch the next page of results.
Why Pull-to-Refresh?
Pull-to-refresh is a mobile-native gesture where the user pulls the list downward to trigger a data reload. It signals to the app that new content should be fetched from the server. React Native's FlatList has built-in support for this gesture through the onRefresh and refreshing props.
The refreshing and onRefresh Props
FlatList's pull-to-refresh requires two props: refreshing (a boolean that shows or hides the spinner) and onRefresh (a callback that runs your data-fetch logic). Set refreshing to true when the fetch starts and back to false when it completes.
const [refreshing, setRefreshing] = useState(false);
const onRefresh = async () => {
setRefreshing(true);
await fetchData();
setRefreshing(false);
};
<FlatList
data={items}
renderItem={renderItem}
keyExtractor={(item) => item.id}
refreshing={refreshing}
onRefresh={onRefresh}
/>All lessons in this course
- FlatList Data, renderItem, and keyExtractor
- Pull-to-Refresh and Load More
- SectionList with Headers
- Building a Contacts List App