Fix full-screen bottom sheet animations #34425
Closed
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
Focus of the URL text input caused animation stutter while the iOS keyboard visibility toggled from hide to show to hide. To address this, the Android-specific keyboard dismiss logic is now applied to iOS as well.
The `layout` conditional was removed in https://git.io/JEDdk, as it is no longer utilized. However, its prior presence was universally disabling the block it guarded. Removing the always falsey conditional caused the block to always run and break the Android animation. Specifically, when navigating from a full-screen bottom sheet to a non-full-screen bottom sheet, the `currentHeight` is always `1`. This results in setting the height without layout animations prior to this change.
dcalhoun
added
[Type] Regression
2 tasks
|
Size Change: 0 B Total Size: 1.04 MB ℹ️ View Unchanged
|
dcalhoun
commented
Aug 31, 2021
| if ( currentHeight === 1 ) { | ||
| setCurrentHeight( height ); | ||
| } else if ( animate ) { | ||
| if ( animate ) { |
There was a problem hiding this comment.
My interpretation of the original intent of this code is to avoid animating setting the height during the initial layout. However, it was erroneously applied when navigating away from full-screen bottom sheets. Removing it resolves this issue.
From my testing, the non-animation setting was used when a block settings is first opened, but I am unable to perceive a difference with or without its presence.
| <View onLayout={ onLayout }>{ children }</View> | ||
| <View | ||
| onLayout={ onLayout } | ||
| testID={ `navigation-screen-${ name }` } |
There was a problem hiding this comment.
As this is an element with no user-facing identifier, a testID was required to query the element.
Comment on lines
-23
to
-32
| if ( Platform.OS === 'android' ) { | ||
| Keyboard.dismiss(); | ||
| delay( () => { | ||
| navigation.navigate( linkSettingsScreens.settings, { | ||
| inputValue: url, | ||
| text: title, | ||
| } ); | ||
| }, 100 ); | ||
| return; | ||
| } |
There was a problem hiding this comment.
My presumption is that this conditional logic was placed to improve animations on Android at some point. It would appear similar logic is now beneficial for iOS as well.
dcalhoun
commented
Aug 31, 2021
...mponents/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js
Outdated
Show resolved
Hide resolved
7 tasks
|
Closing this PR as most of the changes in this PR were included in #36328 to resolve similar issues, e.g. 2a8d738, 134470f. We should likely retest at some point and further address wordpress-mobile/gutenberg-mobile#3883. |
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.
Related PRs
Description
Fixes wordpress-mobile/gutenberg-mobile#3883.
For iOS, the Link Picker now dismisses iOS keyboard to ensure smooth animation. Focus of the URL text input caused animation stutter while the iOS keyboard visibility toggled from hide to show to hide. To address this, the Android-specific keyboard dismiss logic is now applied to iOS as well.
For Android, animations have been reintroduced for full-screen bottom sheets. The
layoutconditional was removed in #28632, as it is no longer utilized. However, its prior presence was universally disabling the block it guarded. Removing the always falsey conditional caused the block to always run and break the Android animation.Specifically, when navigating from a full-screen bottom sheet to a non-full-screen bottom sheet, the
currentHeightis always1. This results in setting the height without layout animations prior to this change.How has this been tested?
Link Picker
Button Background
Screenshots
iOS Before
ios-before.MP4
iOS After
ios-after.MP4
Android Before
android-before.mp4
Android After
android-after.mp4
Types of changes
Bug fix
Checklist:
*.native.jsfiles for terms that need renaming or removal).