React-native: LayoutAnimation singleton generates "Warning: Overriding previous layout animation" when multiple components animate at once.

[peacechen]

Description

LayoutAnimation can not deal with multiple components animating at once. The console has the message:

Warning: Overriding previous layout animation with new one before the first began

Reproduction

Component A does

LayoutAnimation.configureNext(A_configurableAnimation);
this.setState ({ someState});

Component B also does similarly:

LayoutAnimation.configureNext(B_configurableAnimation);
this.setState ({ someOtherState});

If A and B's state change at the same time (or rather when React resolves their new states), the warning message appears and B's animation is overridden by A's configuration (or vice versa depending on timing).

Solution

LayoutAnimation would be more flexible as an instance instead of a singleton. For example:
myLayoutAnim = new LayoutAnimation(this.state);

This would allow each component's LayoutAnimation to operate independently of any others.

Additional Information

• React Native version: 0.34
• Platform: iOS
• Operating System: OSX

[hramos]

We're cutting down on the number of outstanding issues, in order to allow us to focus. I'm closing this issue because it has been open for over 60 days with no activity. If you think it should still be opened let us know why. PRs are always welcome.

[peacechen]

This would be a valuable enhancement. The ability to perform animations on more than one object at a time is common and necessary to rich UI. Vote to reopen this issue.

[henrikra]

@peacechen Is it possible for you to do PR of your solution? :) We have same issue when using KeyboardAvoidingView because it uses LayoutAnimation. We get the warning when keyboard is closing and at the same time we show Alert.

[giladno]

@henrikra same here (using KeyboardAvoidingView and displaying an Alert).

Any fix on this one?

[peacechen]

@henrikra Unfortunately I don't have a PR. This seems like it would be a major change deep in the RN code. I'm not familiar enough with the architecture of the animation engine and FB would not likely accept it (I've submitted PRs much smaller that haven't been accepted)

[ankur-sardar]

Any update on this issue? Please open this issue, I think it is an important issue, Or please suggest some workaround for this.

[Dexwell]

This is still a problem, +1 on reopen @hramos

[VicFrolov]

+1 on reopen, still getting tons of warnings for this.

[hramos]

Please submit a new issue, this has been closed for almost a year.