I am trying to use the RefreshControl component with a FlatList and I noticed three issues, but I am pretty sure they are related.
I am using a plain React Native project without expo, but for the purpose of this post, I created an Expo Snack and was able to reproduce these issues there as well.
Anyone know why this happens, how to fix it, or have a work around? Is it some container styling issue or an issue where the FlatList loads before the data loads?
Here is a full demo of the issue.
My current React Native version is 0.71.6. I can only reproduce this issue on iOS. Android seems fine. I did search around for quite a bit trying to find some existing posts with related issues. The ones I could find are really old and usually just say some patch fixed it in version 0.2x.y.
I found my issue. I had initially added this line of code which is very incorrect and conflicted with the onRefresh
and refreshing
properties. I guess I forgot to remove it once I read the proper way to implement the RefreshControl
component.
ListHeaderComponent={() => <RefreshControl refreshing={!refreshing} />}