As I attempt to implement the onScroll function for ListView to detect when a user has pulled the list down beyond a certain pixel value in order to trigger an AJAX call and refresh the list, I am facing an issue where it fires multiple times leading to a choppy animation of the Activity Indicator.
This seems to occur because the check
e.nativeEvent.contentOffset.y < -50 _handleScrollView(e) {
if (e.nativeEvent.contentOffset.y < -50 && !this.props.listingsLoading) {
// updates listingsLoading to false upon completion
this.props.fetchListings()
}
}
_renderLoadingView() {
if (this.props.listingsLoading) {
return (
<ActivityIndicatorIOS />
);
}
}
render() {
var listings = this.state.dataSource
return (
<View>
{this._renderLoadingView()}
<ListView
onScroll={this._handleScrollView}
dataSource={listings}
renderRow={this._renderRow} />
</View>
)
}
EDIT: To resolve the issue, I have added the following code snippet to utilize RefreshControl feature, my thanks to David!
<ListView
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh}
tintColor="#ff0000"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffff00"
/>
}
dataSource={listings}
renderRow={this._renderRow}/>
I also defined an onRefresh function as follows:
_onRefresh() {
this.setState({isRefreshing: true});
this.props.fetchListings(this.props.nextPage)
setTimeout(() => {
this.setState({
isRefreshing: false
});
}, 3000);
}