CODEWITHSUNDEEP
react-nativeanimationlayout-animation
Sampo
Sampo

Reputation: 5068

How should LayoutAnimation be activated on component property change?

React Native LayoutAnimation allows automatically animating views to new positions when the next layout occurs.

I have items stored in Redux which are passed as properties into a component that renders them. When the properties change I want the component contents to animate accordingly. However, I'm unsure where in the component to call LayoutAnimation.configureNext().

The componentWillUpdate method would seem to be the correct place as it is called before rendering, but the method is deprecated and going to be removed. componentDidUpdate is too late, as the render/layout has already taken place.

I got it working by copying the properties into the component state and calling LayoutAnimation.configureNext() in componentDidUpdate, which forces a second re-render using the animations. This may have the added benefit of somewhat isolating the update of this component from the previous render cycle which may have other component updates, but it seems cumbersome.

Where in the lifecycle methods should LayoutAnimation.configureNext() be called?

Upvotes: 1

Views: 1941

Answers (1)

Sampo
Sampo

Reputation: 5068

It turns out calling LayoutAnimation.configureNext() in componentDidUpdate or useEffect does produce the animation when properties change. While those methods are called after render(), they are evidently called before the actual layout and rendering on screen.

I was unable to find any documentation on the callback/layout/render lifecycle that would separate these phases, but empirically it works.

Upvotes: 3

Related Questions