React NativeRefreshControl #
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 (
<ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
...
>
...
</ListView>
);
}
...
}
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 #
onRefresh?: function #
Called when the view starts refreshing.
refreshing: bool #
Whether the view should be indicating an active refresh.
androidenabled?: bool #
Whether the pull to refresh functionality is enabled.
androidprogressViewOffset?: number #
Progress view top offset
androidsize?: enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) #
Size of the refresh indicator, see RefreshControl.SIZE.
iostitle?: string #
The title displayed under the refresh indicator.
Improve this page by sending a pull request!