Expo

Documentation

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.

Usage example

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}
          />
        }
        ...
      />
    );
  }
  ...
}
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.

Props

Reference

Props

refreshing

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

onRefresh

Called when the view starts refreshing.
TypeRequired
functionNo

colors

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

enabled

Whether the pull to refresh functionality is enabled.
TypeRequiredPlatform
boolNoAndroid

progressBackgroundColor

The background color of the refresh indicator.
TypeRequiredPlatform
colorNoAndroid

progressViewOffset

Progress view top offset
TypeRequiredPlatform
numberNoAndroid

size

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

tintColor

The color of the refresh indicator.
TypeRequiredPlatform
colorNoiOS

title

The title displayed under the refresh indicator.
TypeRequiredPlatform
stringNoiOS

titleColor

Title color.
TypeRequiredPlatform
colorNoiOS