CODEWITHSUNDEEP
androidreact-nativereact-native-flatlist
Ahmadreza
Ahmadreza

Reputation: 1029

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

Upvotes: 28

Views: 52182

Answers (5)

Aman Kumar Gupta
Aman Kumar Gupta

Reputation: 3031

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!

Upvotes: 3

FaysalB
FaysalB

Reputation: 398

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

this covers both ios and android

Upvotes: 5

Muhammad Talha
Muhammad Talha

Reputation: 832

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

Upvotes: 1

Ahmadreza
Ahmadreza

Reputation: 1029

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

Upvotes: 54

dotcomXY
dotcomXY

Reputation: 1596

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

Upvotes: 0

Related Questions