iosreact-nativereact-native-flatlistuirefreshcontrol

React Native RefreshControl iOS Takes up space after refresh completes


I am trying to use the RefreshControl component with a FlatList and I noticed three issues, but I am pretty sure they are related.

  1. When I pull down to refresh, it shows the icon. After, the refresh flag is set to false, the icon hides but the space it had occupied is still there. If you try to refresh again, it does the same thing and that space grows.
  2. When you pull down to refresh the first time, you can see a second refresh icon on the right side of the screen.
  3. I sometimes get this error locally. Expo doesn't throw this but it does seem to not load every so often and I have to refresh it a few times. Maybe it is suppressing this behind the scenes? Error message: Exception thrown while executing UI block: RCTRefreshControl was unable to find its associated scroll view

picture of ios crashing

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.

enter image description here

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.


Solution

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