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

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

[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.

[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.