Open KenanBouvier opened 1 year ago
I am looking into it now. I've tested the provided repro and allowed myself to simplify it a little. I found two separate problems:
headerTransparent
is set to false
in screen options. Maybe related to this issue: https://github.com/react-navigation/react-navigation/issues/11818[x] Paper [x] Fabric
marginTop
style set to a value within certain range (reproducible with headerHeight).[x] Paper [ ] Fabric
I think that headerTransparent: false
should be used in this kind of situation. The second problem is caused by a hacky workaround for the first one.
Btw. It's related to a known issue: https://github.com/software-mansion/react-native-screens/blob/5301d3f226a80ec7983e49209e8cee505d3a2ae7/README.md?plain=1#L208
Description
Hi, I wanted to report this issue I am having regarding a glitchy iOS search bar.
Please see the video below for a demonstration of the glitch.
https://user-images.githubusercontent.com/65245574/222759799-584c10a6-a0fb-4886-b14c-bcd14f50912c.mp4
Similarly, you can see the search bar glitch with these images:
Whereas it should be as such:
Overview
Ideal app desired functionality: have sticky headers (located correctly), search bar (Normal behaviour) and (Non-glitchy) pull to refresh.
Here is an overview of the problem:
About the search bar glitch, normal behaviour consists of "locking" in and out of view depending on if most of the search bar is show. When you pull to refresh (repository linked below), it initially shows the full search bar. However, it does not keep this behaviour when we scroll down then back up.
Refresh glitch replication
To demonstrate the glitchy pull to refresh, you can set the
headerTransparent
property to false within the useLayoutEffect hook in the App.tsx file. And if that is enabled then you can comment out the marginTop in the first View component as that is pushing the content the same as the headerHeight (for when it is transparent). E.g.And
Can you let me know if I'm doing anything wrong or advice with this issue?
Thanks!
Steps to reproduce
Snack or a link to a repository
https://github.com/KenanBouvier/ExampleRNScreenIssue
Screens version
^3.20.0
React Native version
0.71.3
Platforms
iOS
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
iOS simulator
Device model
iPhone 14 - iOS 16.1
Acknowledgements
Yes