Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refine Bottom Sheets in/out transition #14831

Merged
merged 4 commits into from
Apr 16, 2019
Merged

Conversation

koke
Copy link
Contributor

@koke koke commented Apr 4, 2019

As specified in wordpress-mobile/gutenberg-mobile#595
I did my best to adjust to the specs there, and for the most part the animations
matches what was requested.

One limitation is that due to how react-native-modal is implemented, we don't
know the view's height when it's about to be presented, and so it starts the
"slide in" animation not from the bottom edge, but from a lower point, since it
uses the window height to displace the view and not the view's height. The
result is an animation that appears slower than specified, since the view has
to traverse a longer distance in the same time, and there is a delay before the
view starts appearing.

This is mildly annoying, but I could not find a way to make it work without
rewriting react-native-modal.

2019-29

gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#820

As specified in wordpress-mobile/gutenberg-mobile#595
I did my best to adjust to the specs there, and for the most part the animations
matches what was requested.

One limitation is that due to how react-native-modal is implemented, we don't
know the view's height when it's about to be presented, and so it starts the
"slide in" animation not from the bottom edge, but from a lower point, since it
uses the window height to displace the view and not the view's height. The
result is an animation that appears slower than specified, since the view has
to traverse a longer distance in the same time, and there is a delay before the
view starts appearing.

This is mildly annoying, but I could not find a way to make it work without
rewriting react-native-modal.
@koke koke added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Apr 4, 2019
@koke koke requested a review from etoledom April 4, 2019 21:32
Copy link
Contributor

@etoledom etoledom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Thank you @koke 🎉
I came across that same problem before, but it wasn't important at the time so I ignored it.

At some point it would be nice to solve it to be able to fully control the animations. 👍
(Unless we replace this modal for something else in the future 😛)

@koke koke merged commit 626778e into master Apr 16, 2019
@koke koke deleted the rnmobile/595-bottom-sheet-animation branch April 16, 2019 13:14
@youknowriad youknowriad added this to the 5.6 (Gutenberg) milestone May 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants