Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set Refresh Indicator of FlatList in react native?

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)}
like image 431
AhmadReza Avatar asked Aug 13 '17 10:08

AhmadReza


People also ask

How do you use refresh control in FlatList React Native?

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.

How do you force refresh a FlatList in React Native?

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.

How do you add pull down refresh in React Native?

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.


1 Answers

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)} />}
 />
like image 125
AhmadReza Avatar answered Sep 27 '22 19:09

AhmadReza