How to Add Pull Down to Refresh Feature in React Native

Pull down to refresh is a cool feature we usually see in Android apps. It helps users to refresh a list or collection of data. In react native, you can use RefreshControl component to implement pull down to refresh feature.

RefreshControl works as a prop for components such as ScrollView, ListView and Flatlist. See the example given below to know how does the RefreshControl component work.

import { ScrollView, RefreshControl } from 'react-native';

class RefreshableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
        ...
      />
    );
  }
  ...
}

The example given above is taken from React Native official docs. In that, refreshcontrol is included for the ScrollView. When the user pull down the screen, refreshing will be set as true and the progress indicator will be shown. When the data fetch is finished, refreshing will be set as false and the progress indicator will disappear.