Header views flicker when navigating back on new arch #2243
Assignees
Labels
NewArch
Issues related only to new architecture
Platform: iOS
This issue is specific to iOS
Repro provided
A reproduction with a snack or repo is provided
Comments
github-actions
bot
added
Platform: iOS
1 task
kkafar
added a commit
that referenced
this issue
Jul 24, 2024
## Description This PR intents to fix flickering custom header items when going to a previous screen on `fabric` architecture. The items are unmounted before the transition happens when `POP` action is dispatched on navigation from JS causing the items to vanish for a moment. The adopted solution uses snapshots of the custom items to be used until the transition's done. Fixes #2243. ## Changes - added snapshots of the custom header items - modified `Test556` for repro ## Screenshots / GIFs ### Before https://github.com/user-attachments/assets/9da060ed-b65e-4b32-9ab1-debfc2bfd02d ### After https://github.com/user-attachments/assets/0413fab0-05f6-4e55-adab-f283e01bc551 ## Test code and steps to reproduce - Use `Test556` repro ## Checklist - [x] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <[email protected]>
ja1ns
pushed a commit
to WiseOwlTech/react-native-screens
that referenced
this issue
Oct 9, 2024
## Description This PR intents to fix flickering custom header items when going to a previous screen on `fabric` architecture. The items are unmounted before the transition happens when `POP` action is dispatched on navigation from JS causing the items to vanish for a moment. The adopted solution uses snapshots of the custom items to be used until the transition's done. Fixes software-mansion#2243. ## Changes - added snapshots of the custom header items - modified `Test556` for repro ## Screenshots / GIFs ### Before https://github.com/user-attachments/assets/9da060ed-b65e-4b32-9ab1-debfc2bfd02d ### After https://github.com/user-attachments/assets/0413fab0-05f6-4e55-adab-f283e01bc551 ## Test code and steps to reproduce - Use `Test556` repro ## Checklist - [x] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
When navigating back via
navigation.goBacktheheaderTitleview from the top screen disappears during the transition. Note this only happens when navigating from JS, not when navigating via the native back button. This also only happens on new arch.You can observe the behaviour in the following video:
Screen.Recording.2024-07-09.at.16.48.02.mov
When click "Go back" the header switches to fully blank view, then the previous screen headers fades in.
During the 2nd back navigation when using the native back button instead, you can see the flicker does not happen and the transition is smooth.
Steps to reproduce
Snack or a link to a repository
https://github.com/janicduplessis/react-native-screens/tree/%40janic/header-flick
Screens version
main@151c1c74cfcc4ae4e6cbf987b64472be8d17dc9c
React Native version
0.73
Platforms
iOS
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Fabric (New Architecture)
Build type
Debug mode
Device
iOS simulator
Device model
No response
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: