How to refresh a list by pulling down in React Native? Code Example

Pull to Refresh is a common functionality which is provided in both Android and iOS. The same could be achieved in FlatList in React native using onRefresh and refreshing props.

refreshing prop is used to display loader. Set it to true to show the circular loader and false to hide it.

Use onRefresh to run the logic for refreshing the list. Pass a function to fetch data from server by making an async call or use any other logic to refresh your data. Also the value of refreshing prop is derived from this.

When the list is pulled, onRefresh is called. The first statement in this function should be to set refreshing prop to true. Then make async call to fetch new data. After receiving the data you can set refreshing prop to false and update data array.

Code Example

import React, { useState } from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, View, StatusBar } from "react-native";

const SUPERHERO_DATA = [
  {
    id: '1',
    title: 'Ironman',
  },
  {
    id: '2',
    title: 'Thor',
  },
  {
    id: '3',
    title: 'Captain America',
  },
  {
    id: '4',
    title: 'Hulk',
  },
  {
    id: '5',
    title: 'Hawkeye',
  },
  {
    id: '6',
    title: 'Spiderman',
  },
  {
    id: '7',
    title: 'Antman',
  },
];

const App = () => {
  const [isRefreshing, setIsRefreshing] = React.useState(false);
  
  const renderItem = ({ item, index, separators }) => (
    <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
  )

  const refreshList = () => {
    setIsRefreshing(true)
    // Do a network call here to
    // fetch updated data
    setTimeout(() => setIsRefreshing(false), 3000)
  }

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={SUPERHERO_DATA}
        renderItem={renderItem}
        refreshing={isRefreshing}
        onRefresh={refreshList}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
    flex:1,
    margin: 5,
  },
});

export default App;

The output will look like this –

In this code we have implemented the pull to refresh functionality. Here is the summary –

• Declared a state variable isRefreshing to hold the boolean value. It is set to true when refreshing starts and false when ends. By default, we are setting it to false.
• Defined a function refreshList() which is setting the value of isRefreshing variable to true. Then waiting for 3 seconds using timeout and resetting isRefreshing to false again.
• Lastly, onRefresh prop is set to refreshList() function and refreshing prop to isRefreshing variable.

Note: This functionality works in Android and iOS apps only. Not on web page.

Live Demo

Conclusion

In order to implement pull to refresh in React Native, we need to set refreshing and onRefresh props of flatlist. Together they display the loader, run logic for new data and later on hide the loader.