forked from facebook/react-native
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Handle layout updates during LayoutAnimation animations on Android
Summary: On Android, LayoutAnimation directly updates the layout since a generic scaling animation is more difficult to implement. This causes a problem if the layout is updated during an animation, as the previous layout is stored with the animation and is not updated. As a result the view gets the old layout instead once the animation completes. This commit fixes this issue by storing the layout handling animations while those animations are active, and updating the animations on the fly if one of the views receives a new layout. The resulting behaviour mirrors what iOS currently does. This bug has real world consequences, for example if a LayoutAnimation happens right after a VirtualizedList has mounted, it’s possible that some list rows are mounted while the animation is active, making the list content view bigger. If the content view is being animated, the new size will not take effect and it becomes impossible to scroll to the end of the list. I wrote a minimal test case to verify the bug, which I’ve also added to RNTester. You can find the standalone app here: <https://gist.github.com/lnikkila/18096c15b2fb99b232795ef59f8fb0cd> The app creates a 100x300 view that gets animated to 200x300 using LayoutAnimation. In the middle of that animation, the view’s dimensions are updated to 300x300. The expected result (which is currently exhibited by iOS) is that the view’s dimensions after the animation would be 300x300. On Android the view keeps the 200x300 dimensions since the animation overrides the layout update. The test app could probably be turned into an integration test by measuring the view through UIManager after the animation, however I don’t have time to do that right now... Here are some GIFs to compare, click to expand: <details> <summary><b>Current master (iOS vs Android)</b></summary> <p></p> <img src="https://user-images.githubusercontent.com/1291143/38191325-f1aeb3d4-3670-11e8-8aca-14e7b24e2946.gif" height="400" /><img src="https://user-images.githubusercontent.com/1291143/38191337-f643fd8c-3670-11e8-9aac-531a32cc0a67.gif" height="400" /> </details><p></p> <details> <summary><b>With this patch (iOS vs Android, fixed)</b></summary> <p></p> <img src="https://user-images.githubusercontent.com/1291143/38191325-f1aeb3d4-3670-11e8-8aca-14e7b24e2946.gif" height="400" /><img src="https://user-images.githubusercontent.com/1291143/38191355-07f6e972-3671-11e8-8ad2-130d06d0d64d.gif" height="400" /> </details><p></p> No documentation changes needed. [ANDROID] [BUGFIX] [LayoutAnimation] - View layout is updated correctly during an ongoing LayoutAnimation, mirroring iOS behaviour. Closes facebook#18651 Differential Revision: D7604698 Pulled By: hramos fbshipit-source-id: 4d114682fd540419b7447e999910e05726f42b39
- Loading branch information
Showing
5 changed files
with
133 additions
and
25 deletions.
There are no files selected for viewing
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
10 changes: 0 additions & 10 deletions
10
ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/HandlesLayout.java
This file was deleted.
Oops, something went wrong.
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
20 changes: 20 additions & 0 deletions
20
...d/src/main/java/com/facebook/react/uimanager/layoutanimation/LayoutHandlingAnimation.java
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
// Copyright 2004-present Facebook. All Rights Reserved. | ||
|
||
package com.facebook.react.uimanager.layoutanimation; | ||
|
||
/** | ||
* Interface for an animation type that takes care of updating the view layout. | ||
*/ | ||
/* package */ interface LayoutHandlingAnimation { | ||
/** | ||
* Notifies the animation of a layout update in case one occurs during the animation. This | ||
* avoids animating the view to the old layout since it's no longer correct; instead the | ||
* animation should update and do whatever it can so that the final layout is correct. | ||
* | ||
* @param x the new X position for the view | ||
* @param y the new Y position for the view | ||
* @param width the new width value for the view | ||
* @param height the new height value for the view | ||
*/ | ||
void onLayoutUpdate(int x, int y, int width, int height); | ||
} |
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