RefreshControl does not work properly with NativeStackNavigator and headerLargeTitle=true

[davidruisinger]

"@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

[hirbod]

I can confirm this too. I played around with it a bit today and it’s not useable on large header

[WoLewicki]

Can you provide a repo with minimal configuration needed to reproduce the issue?

[CosmaTrix]

I 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

[WoLewicki]

I think it is an issue with how RCTScrollView and RCTRefreshControl works. Can you try and apply this: facebook/react-native#28236 and check if it fixes the issue?

[WoLewicki]

I tested it and it looks like applying this commit: facebook/react-native@1b0fb9b and setting the translucent header and contentInsetAdjustmentBehavior=“automatic” on your ScrollView (which are recommended options) makes the RefreshControl work correctly. Can someone check it too?

[WoLewicki]

I am closing this issue since there is nothing more to do from the side of react-native-screens. Feel free to comment if something is wrong to reopen it.

[rppld]

@WoLewicki looks like facebook/react-native@1b0fb9b has been merged, but I’m still seeing the same behaviour with the latest Expo SDK 39 (uses React Native 0.63 under the hood). Example here: https://snack.expo.io/CRaFk41At

[WoLewicki]

But is it available in the 0.63? I think the 0.63 branch was cut earlier and this commit is not included in there. You can check in the bare react-native project if this commit is available there, but IIRC it is not, unfortunately.

[rppld]

@WoLewicki ah, you’re absolutely right, was checking in master. Should be in the next release then. Thx for the hint.

[mistermadness87]

Hello, I downloaded *.zip file v0.64.0-rc.1.zip from here https://github.com/facebook/react-native/releases, unzip to folder, then copy all files from React\Views\ScrollView and React\Views\RefreshControl to same folders of my App myProject\node_modules\react-native\React\Views\RefreshControl and myProject\node_modules\react-native\React\Views\RefreshControl, but I'm still see the same behaviour. What else I should do to make changes affect?