Removing items with LayoutAnimation causes adjacent views/texts to disappear on Android

[vinceyuan]

Description

When remove items with LayoutAnimation, the adjacent views/texts should not be impacted. But they disappear on Android.

In the following screenshot of the sample app, we can see some texts/buttons disappeared when we press Remove with opacity animation button and Remove with scaleXY animation button. I found this issue when I worked on #11769.

Reproduction

Reproduced on rnplay.org https://rnplay.org/apps/JbdOpQ
The sample project I created: https://github.com/vinceyuan/ReactNativeOpacityBugDemo

Solution

N/A

Update on Jan 18, 2017:
I figured out a solution. See below.

Additional Information

• React Native version: 0.33+
• Platform: Android
• Operating System: MacOS

[vinceyuan]

Cause

When LayoutAnimation is enabled, indices of to-be-removed items are incorrect (to reproduce it, we need to delete at least two items). So the adjacent items are removed. In uimanager/NativeViewHierarchyManager.java#L364-L373 because indexToRemove is wrong, we get wrong viewToRemove. arrayContains(tagsToDelete, viewToRemove.getId()) returns false. That view is removed immediately inviewManager.removeViewAt(viewToManage, indexToRemove);.

Essential Cause

The essential cause is in uimanager/NativeViewHierarchyOptimizer.java#L278-L285. It gets the index of a ReactShadowNode and adds a managing children operation into a queue.

Says we want to delete 2 items i0 and i2 from [i0, i1, i2, i3]. It creates two operations op0 and op1. op0 is created with index 0 for deleting i0, and op1 is created with index 1 for i2. op1's index is 1, instead of 2, because ReactShadowNode of i0 has been deleted.

When LayoutAnimation is not enabled, NativeViewHierarchyManager gets the view by index and deletes it in the same sequence. There is no problem in deleting i2 with index 1.

But when LayoutAnimation is enabled, the problem happens in deleting i2 with index 1. Because the animation is running, i0 still exists. i2's index is 2, instead of 1. So wrong item is deleted. [See Note below]

Solution

Skip deleting items by index when LayoutAnimation is enabled. These items will be deleted by correct tagsToDelete. PR: #11962

It's hard to correct index at uimanager/NativeViewHierarchyOptimizer.java#L278-L285, because we don't know if we are using LayoutAnimation.

Note

Actually it tries to skip deleting in the existing code uimanager/NativeViewHierarchyManager.java#L364-L373. But because the index is wrong, arrayContains(tagsToDelete, viewToRemove.getId()) is always false. viewManager.removeViewAt(viewToManage, indexToRemove); is always executed.

View viewToRemove = viewManager.getChildAt(viewToManage, indexToRemove);
if (mLayoutAnimationEnabled &&
    mLayoutAnimator.shouldAnimateLayout(viewToRemove) &&
    arrayContains(tagsToDelete, viewToRemove.getId())) {
  // The view will be removed and dropped by the 'delete' layout animation
  // instead, so do nothing
} else {
  viewManager.removeViewAt(viewToManage, indexToRemove);
}

Question

Why do we need to pass in both index and tag in uimanager/NativeViewHierarchyOptimizer.java#L278-L285? I tried simply using null in L283. Removing item with LayoutAnimation works well. But it does not work well without animation. Some views are not removed.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.