react-native-screens: RefreshControl does not work properly with NativeStackNavigator and headerLargeTitle=true
“@react-navigation/native”: “5.0.8” “react-native-screens”: “2.1.0”
screenOptions={{
headerLargeTitle: true,
}}
Current behavior: RefreshControl partially hidden under header
Expected behavior (screenshot from iOS Mail app): RefreshControl is displayed on top of the header
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 10
- Comments: 29 (15 by maintainers)
I tested it and it looks like applying this commit: https://github.com/facebook/react-native/commit/1b0fb9bead4d158d14df5a994423d06716b5e377 and setting the
translucentheader andcontentInsetAdjustmentBehavior=“automatic”on your ScrollView (which are recommended options) makes theRefreshControlwork correctly. Can someone check it too?@WoLewicki ah, you’re absolutely right, was checking in
master. Should be in the next release then. Thx for the hint.@trajano that’s because SDK 42 didn’t ship with React Native version 0.64. This issue is fixed in RN 0.64.
Expo is planning to upgrade their RN version by the next SDK release(43)
So you can either wait until end of September or use EAS build as mentioned above and you should be fine.
@WoLewicki looks like https://github.com/facebook/react-native/commit/1b0fb9bead4d158d14df5a994423d06716b5e377 has been merged, but I’m still seeing the same behaviour with the latest Expo SDK 39 (uses React Native
0.63under the hood). Example here: https://snack.expo.io/CRaFk41AtI have the same issue. I’ve created a Snack where you can see the bug in action. It isn’t pretty, but it does the job. 😄 Just try and pull-to-refresh on the Overview screen.
https://snack.expo.io/@dami-mollie/4cc07f