I'm trying to set the refresh indicator of flat list in react native but don't know how to do it. List View has this prop :
refreshControl={<RefreshControl
colors={["#9Bd35A", "#689F38"]}
refreshing={this.props.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
But Flat List has only these :
refreshing={this.props.loading}
onRefresh={this._onRefresh.bind(this)}
React Native RefreshControl If you're rendering a list of data using the ScrollView or FlatList component, you can use RefreshControl to add the pull-to-refresh capability. When you initiate the pull-to-refresh gesture, RefreshControl triggers an onRefresh event.
To implement pull to refresh FlatList with React Native, we can set the refreshing and onRefresh props. to set the refreshing prop to isFetching , which is true when we're getting data for the FlatList . And we set onRefresh to the onRefresh which sets refreshing to true and then set it back to false after 2 seconds.
Setup Pull to Refresh Pull to Refresh functionality is implemented using RefreshControl component in React Native. RefreshControl 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.
I found the solution! It might be the dummy but FlatList also has a prop called refreshControl like ListView but I just didn't test it! Just like this:
<FlatList
refreshControl={<RefreshControl
colors={["#9Bd35A", "#689F38"]}
refreshing={this.props.refreshing}
onRefresh={this._onRefresh.bind(this)} />}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With