Search code examples
javascriptiosreact-nativereact-navigationreact-navigation-stack

How do I put the Pulll to refresh indicator above the header in iOS?


On iOS apps when the header is big pull to refresh brings down even the header and shows the refresh icon above the header. The Refresh Control puts it relative to the FlatList so if I pull to refresh the header goes down and the icon gets half rendered on a NativeStack the non-native stack will not do the big text effect.

I am trying to replicate the behaviour only on iOS and on Android it would still be under the header.

The way I had it before was to make the header as part of the flat list only on iOS but that seemed a bit overkill. Is there cleaner way of doing this?

https://snack.expo.dev/@trajano/multi-tab-navigation-with-refresh shows the issue

I am trying to replicate the same behaviour as shown in https://developer.apple.com/documentation/uikit/uirefreshcontrol

enter image description here


Solution

  • Apparently this is a bug in RN 0.63 and it is fixed on RN 0.64 which Expo is not using as of SDK 42

    https://github.com/software-mansion/react-native-screens/issues/395#issuecomment-884556932

    Just have to wait to get it done or pay extra.