How to set Refresh Indicator of FlatList in react native?

Question

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)}

Answer 1

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)} />}
 />

Answer 2

The correct way is using a function to return the component, this way:

refreshControl={()=>
<RefreshControl
    colors={["#9Bd35A", "#689F38"]}
    refreshing={this.props.refreshing}
    onRefresh={this._onRefresh.bind(this)}
/>}

This solved the ' Object is not a function (evaluating 'this.props.renderScrollComponent(this.props)') 'Error.

Answer 3

You can pass in the renderScrollComponent to your FlatList component with the same RefreshControl component you have showed above. I have created a expo snack for this: https://snack.expo.io/rJ7a6BCvW

The FlatList is using VirtualizedList within itself, and for VirtualizedList component, it takes a renderScrollComponent : https://facebook.github.io/react-native/docs/virtualizedlist.html#renderscrollcomponent

Answer 4

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

Answer 5

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

this covers both ios and android

Answer 6

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!