How to set Refresh Indicator of FlatList in react native?

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

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!