software-mansion / software-mansion/react-native-screens

[iOS] Large iOS header animation glitches when scrolling down

Open
#3,138 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

missing-repro platform:ios
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
  1. Enter a view that has the large style ios header
  2. Scroll down 80-90% of the large header's height
  3. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.