-
-
Notifications
You must be signed in to change notification settings - Fork 498
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Glitchy iOS search bar when using Section List #1730
Comments
I am looking into it now. I've tested the provided repro and allowed myself to simplify it a little.
Reproducer
[x] Paper
Reproducer
[x] Paper I think that |
Btw. It's related to a known issue: react-native-screens/README.md Line 208 in 5301d3f
|
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.
Simulator.Screen.Recording.-.iPhone.14.-.2023-03-03.at.15.26.51.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
The text was updated successfully, but these errors were encountered: