React-native-screens: RefreshControl does not work properly with NativeStackNavigator and headerLargeTitle=true

Created on 27 Feb 2020 · 24Comments · Source: software-mansion/react-native-screens

"@react-navigation/native": "5.0.8"
"react-native-screens": "2.1.0"

screenOptions={{
  headerLargeTitle: true,
}}

Current behavior: RefreshControl partially hidden under header
ijoa4BqQHS

Expected behavior (screenshot from iOS Mail app): RefreshControl is displayed on top of the header
IMG_40F0EC6E32A2-1

bug native-stack scrollView

Source

davidruisinger

👍10

Most helpful comment

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

rppld on 16 Nov 2020

👍2

All 24 comments

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

Hirbod on 23 Apr 2020

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

WoLewicki on 28 Apr 2020

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

CosmaTrix on 2 Jul 2020

👍1

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

WoLewicki on 15 Jul 2020

I tested it and it looks like applying this commit: https://github.com/facebook/react-native/commit/1b0fb9bead4d158d14df5a994423d06716b5e377 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 on 14 Aug 2020

👀2

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.

WoLewicki on 20 Aug 2020

@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.63 under the hood). Example here: https://snack.expo.io/CRaFk41At

refresh-control

rppld on 16 Nov 2020

😕1

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.

WoLewicki on 16 Nov 2020

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

rppld on 16 Nov 2020

👍2

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\ViewsRefreshControl to same folders of my App myProjectnode_modulesreact-native\React\ViewsRefreshControl and myProjectnode_modulesreact-native\React\ViewsRefreshControl, but I'm still see the same behaviour. What else I should do to make changes affect?

mistermadness87 on 4 Dec 2020

I think it would be better to use patch-package for this than manually coping files, since after e.g. using yarn command, the node_modules can be changed and patch-package ensures that the changes are applied. Also, did you check if these changes are available in rc.1? They should be, but it is always better to check.

WoLewicki on 7 Dec 2020

@WoLewicki
I am currently using a refreshControl on my FlatList, and I do have a Large Title, but I still experience the pull to refresh bug mentioned above.

It has been about 5 months since the last comment on this issue, would you know if this bug is fixed in the release? Any suggestions/Help on this would be appreciated!