fix(iOS): restore old header animation to prevent content jump #2563
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jump **important**: however at the same time we restore v3 header animation!
kkafar
deleted the
@kkafar/fix-header-animation-revert-timing-curve-for-header
branch
kkafar
added a commit
that referenced
this pull request
Dec 16, 2024
## Description There is still some header animation noticeable for some reason. <-- This is because we use `fade` transition with duration 0 and do not override interruptible animator! To prevent the animation we could either return `nil` interruptible animator (but overriding the method comes with it's own set of problems, see #2563 and other related) or handle the `none` animation much earlier, when calling `showViewControllers:animated:` in `updateContainer` (pass `animated: NO`). PS: If we would want to pass `animated: NO` I wonder what would happen to dismiss prevention - we implemented it at the stage of the animation start... We need to think this through. Note: Must be implemented with old animation API, because `UIViewPropertyAnimator` does not allow for 0 duration (it uses default if the specified animation duration is below some undocumented treshold). This regression was introduced with #2477 ## Changes We now use old API for `animation: none` & still rely on fade animation to implement it. Note the points made above ☝🏻 - we should refactor this code to make advantage of `animated:` parameter of the `showViewControllers:animated:`. ## Test code and steps to reproduce `TestAnimation` - set stack presentation to `none` - it works as prior to v4. WIP VIDEO ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Updated documentation: <!-- For adding new props to native-stack --> - [ ] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [ ] Ensured that CI passes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes #2550
Empirical research shows that UIKit uses
interruptibleAnimatorForTransition:method onUIViewAnimatedTransitioning(ourRNSStackAnimator)for navigation item animation. This allowed us customizing navigation item timing curve & animation style, however it has caused unexpected content jumps (see #2550 or video below 👇).
Important
This PR reverts changes to navigation item animation introduced with v4. I guess it could be considered breaking unless it weren't a bit broken => I'm treating this as a necessary fix
& will try to bring back "new behaviour" soon, once we figure why
interruptibleAnimatorForTransition:causes such bugs.content-jump-with-new-animations.mov
After the changes this looks as follows:
current-state.mov
Changes
interruptibleAnimatorForTransition:preventing content jumpTest code and steps to reproduce
TestAnimationChecklist