Expo Docs

RefreshControl

This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event.


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 (
      <FlatList
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
        ...
      />
    );
  }
  ...
}

Note: refreshing is a controlled prop, this is why it needs to be set to true in the onRefresh function otherwise the refresh indicator will stop immediately.


Reference

Whether the view should be indicating an active refresh.
TypeRequired
boolYes

Called when the view starts refreshing.
TypeRequired
functionNo

The colors (at least one) that will be used to draw the refresh indicator.
TypeRequiredPlatform
array of colorNoAndroid

Whether the pull to refresh functionality is enabled.
TypeRequiredPlatform
boolNoAndroid

The background color of the refresh indicator.
TypeRequiredPlatform
colorNoAndroid

Progress view top offset
TypeRequiredPlatform
numberNoAndroid

Size of the refresh indicator, see RefreshControl.SIZE.
TypeRequiredPlatform
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)NoAndroid

The color of the refresh indicator.
TypeRequiredPlatform
colorNoiOS

The title displayed under the refresh indicator.
TypeRequiredPlatform
stringNoiOS

Title color.
TypeRequiredPlatform
colorNoiOS