Swiping back while header search input is focused breaks navigation options
Description
When you navigate back with a swipe gesture, while the header search bar input is focused
- the header on the given screen disappears during the back navigation
- the header options of the screen that we navigate back to are reset. E.g. in this case,
(tabs)hasheaderShownset 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
- Run the repro in Expo Go
- Press on "Go to search" on the first screen
- Focus the header search input
- While focused, apply the "go back" gesture by swiping right from the left edge of the screen
- During the swipe gesture, you'll notice that the header in the search screen disappears and the content jumps up
- Once the navigation is complete, you'll notice that the
(tabs)header title is shown, even though the(tabs)navigator options setheaderShownto 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
Hey! Thanks for the report, we'll look into this
Facing the same issue. Also, the search text is persisted on other screens having headerSearchOptions
@kkafar also worth mentioning that the screens in the repro are siblings in a native stack navigator. I believe this workaround only works if we navigate from a child to a parent screen.