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

Swiping back while header search input is focused breaks navigation options

Open
#2,979 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

platform:ios repro-provided
Dominant language
TypeScript
Stars
3.7k
Forks
713
Avg merge
2d 23h
Merged PRs (30d)
71

Description

Description

When you navigate back with a swipe gesture, while the header search bar input is focused

  1. the header on the given screen disappears during the back navigation
  2. the header options of the screen that we navigate back to are reset. E.g. in this case, (tabs) has headerShown set to false. However, if we navigate back from the search screen while the search input was focused, the header title is now incorrectly shown as "(tabs)".

Note that this issue only happens when the header search input is focused. If we navigate back using the native back button or if we swipe back when the input is not focused, the bug does not occur.

https://github.com/user-attachments/assets/fe3356eb-7a44-4357-8efd-8aeb3d2b7c19

Steps to reproduce
  1. Run the repro in Expo Go
  2. Press on "Go to search" on the first screen
  3. Focus the header search input
  4. While focused, apply the "go back" gesture by swiping right from the left edge of the screen
  5. During the swipe gesture, you'll notice that the header in the search screen disappears and the content jumps up
  6. Once the navigation is complete, you'll notice that the (tabs) header title is shown, even though the (tabs) navigator options set headerShown to false
Snack or a link to a repository

https://github.com/MaxAst/react-native-screens-search-repro

Screens version

4.11.1

React Native version

0.79.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

iPhone 16 Pro Max

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 by running the linked Expo repro on iOS and follow the listed steps to reproduce the focused-header swipe-back behavior. Trace the navigation and header transition involved, then verify that the search header remains stable during the gesture and that the destination screen keeps its configured header options afterward.

Written by the indexing model from the issue text.

Assessment

Tech stack
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.