RefreshControl does not work properly with NativeStackNavigator and headerLargeTitle=true
davidruisinger opened this issue · 29 comments
"@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
I can confirm this too. I played around with it a bit today and it’s not useable on large header
Can you provide a repo with minimal configuration needed to reproduce the issue?
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.
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?
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?
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 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
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 ah, you’re absolutely right, was checking in master. Should be in the next release then. Thx for the hint.
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?
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
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!
@pouyarezvani it is available in RN 0.64 since the fix was made RCTScrollView, not in our repo.
@WoLewicki I'm a bit confused. I am using 0.64. If there was a fix made, why does the refreshControl still trigger below the LargeHeader? Do you experience this same issue?
Do you have an example snack that has a large header and a refreshControl that doesn't have this issue, that I can try out, please?
Any help would be appreciated!
Did you apply translucency to the header and automatic behavior on the ScrollView like I mentioned here: #395 (comment) ?
@WoLewicki Yes sir.
I've put together this snack. Could you check it out, please?
When you pull down to Refresh, the Header Jumps and the refresh happens below the large header.
Oh so you are testing it in Expo managed workflow? Unfortunately, SDK 41 is using RN 0.63, so the change is not available there. After running it in bare RN project, it works just fine:
Simulator.Screen.Recording.-.iPhone.SE.2nd.generation.-.2021-05-05.at.19.22.47.mp4
Got it. That clears up a lot of things!
Looks like I just need to wait until SDK 42 (End of June), for refresh Control AND the iOS search Bar to be resolved/usable.
I assume that the searchBar will be part of react-native-screens guides/Documentation till then?
Again, thank you for your quick response and guidance!
It should!
@pouyarezvani using EAS could be helpful for you. Managed projects are supported by EAS now, even though I did not try to change the internal RN version with EAS (but in theory it should just work fine)
@hirbod Thanks for the suggestions. Any sources/links to this?
Will EAS fix those mentioned issues above?
@pouyarezvani EAS can build any React Project.
https://blog.expo.io/
Read the last 3 blog posts. Using any native package is very easy and straight forward with EAS and 10x smaller binaries, but I am not 100% sure how much effort it will take to change the underlaying RN Version.
@hirbod I tried to build it with EAS, however, I got this :
Your account doesn't have access to Expo Application Services (EAS) features. Enroll in EAS to give it a try: https://expo.io/eas
Do I need to have EAS Priority to build?
I am logged into EAS & Expo btw.
Yes, you need the EAS Priority Build. You can activate a 30 days trial
I am on SDK42 @pouyarezvani and I am still unable to get it working on Expo Go. https://snack.expo.dev/@trajano/multi-tab-navigation-with-refresh does it need to be in bare workflow for it to work?
@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.
@pouyarezvani noted, your comment at May 5 gave me a bit of hope and now taken away :)
Noted in my answer https://stackoverflow.com/a/68477530/242042
And hopefully it will fix this issue for me as well https://stackoverflow.com/questions/68477361/how-do-i-make-headerlargetitle-appear-as-large-title-when-the-component-is-a-fla
Sorry to reopen this issue, but I have the same issue when I use FlatList
I've put together here : https://snack.expo.dev/7WgS5NpO_ . Could you check it out, please?
I'm using expo 43, and I have not this issue with ScrollView
been a while but this issue still pops up when googling this problem.
react 69.1, still seeing this issue happen. not entirely sure how or when, but I noticed it's especially after a fresh restart of the simulator. Once I save a file and it refresh the entire router, the problem often disappears
What happens:
What should happen:
/EDIT: Resolved my issue in #649 (comment)