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
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,