software-mansion / software-mansion/react-native-screens
[iOS] Large iOS header animation glitches when scrolling down
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 714
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 71
Description
Description
Scrolling about 80% of the way down to where the large header would begin morphing into its smaller version, it makes this glitchy jump.
Current behavior
https://github.com/user-attachments/assets/637dbb76-bf36-41e3-ac1f-3893927b688a
I've noticed this fixes itself if you add a search bar to the large header. I also noticed this does not occur in simulator weirdly enough
Expected behavior
https://github.com/user-attachments/assets/d2c13361-12f1-415a-b9e8-720766896a15
No glitching out, smooth transitions.
Reproduction repo
https://github.com/react-navigation/react-navigation
Steps to reproduce
- Enter a view that has the large style ios header
- Scroll down 80-90% of the large header's height
- Let your finger go to let the animation finish itself
Snack or a link to a repository
https://github.com/EvanBacon/expo-router-forms-components
Screens version
4.11.1
React Native version
0.79.3
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo managed workflow
Architecture
Fabric (New Architecture)
Build type
Debug mode
Device
Real device
Device model
Iphone 15 Pro
Acknowledgements
Yes
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Expo reproduction repository and follow the listed steps on a real iPhone 15 Pro using iOS large-style headers. Compare scrolling without and with a search bar, focusing on the transition when the large header begins shrinking. Done means the header transitions smoothly without the reported jump on iOS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100