How to set Refresh Indicator of FlatList in react native?

user_5236829 0
Viewed 38177

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-flatlist react-native android
5 Answers

In official doc for RefreshControl component it is stated as - 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

So for FlatList don't use it directly because they provides the two special props named as refreshing and onRefresh - on which the standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop.

USAGE -

Step 1:

const wait = (timeout) => { // Defined the timeout function for testing purpose
    return new Promise(resolve => setTimeout(resolve, timeout));
}

const [isRefreshing, setIsRefreshing] = useState(false);

const onRefresh = useCallback(() => {
        setIsRefreshing(true);
        wait(2000).then(() => setIsRefreshing(false));
}, []);

Step 2:

Now use component as

<FlatList
     style={styles.flatListStyle}
     data={inProgressProjects.current}
     keyExtractor={item => item._id}
     renderItem={renderItem}
     showsVerticalScrollIndicator={false}
     refreshing={isRefreshing} // Added pull to refesh state
     onRefresh={onRefresh} // Added pull to refresh control
/>

For more information refer here -

https://reactnative.dev/docs/refreshcontrol

https://reactnative.dev/docs/flatlist#onrefresh

Hope this will help you or somebody else.

Thanks!

user_85681590

I was passing bounces={false} to my Flatlist which was causing problem. This will not allow you to refresh. Remove it if you want to use the above one solution mentioned. Thanks

user_123873910 
refreshControl={
          <RefreshControl
            isRefreshing={isRefreshing}
            onRefresh={loadProducts}
            colors={[Colors.GreenLight]} // for android
            tintColor={Colors.GreenLight} // for ios
          />
        }

this covers both ios and android

user_127334660
Related