W3cubDocs

/ReactNative

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

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.

Props

Reference

Props

refreshing

Whether the view should be indicating an active refresh.

Type Required
bool Yes

onRefresh

Called when the view starts refreshing.

Type Required
function No

colors

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

Type Required Platform
array of color No Android

enabled

Whether the pull to refresh functionality is enabled.

Type Required Platform
bool No Android

progressBackgroundColor

The background color of the refresh indicator.

Type Required Platform
color No Android

progressViewOffset

Progress view top offset

Type Required Platform
number No Android

size

Size of the refresh indicator, see RefreshControl.SIZE.

Type Required Platform
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) No Android

tintColor

The color of the refresh indicator.

Type Required Platform
color No iOS

title

The title displayed under the refresh indicator.

Type Required Platform
string No iOS

titleColor

Title color.

Type Required Platform
color No iOS

© 2015–2018 Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://facebook.github.io/react-native/docs/refreshcontrol.html