CODEWITHSUNDEEP
reactjsreact-native
Code Whisperer
Code Whisperer

Reputation: 23652

Difference Between Animation and LayoutAnimation API?

The documentation of React Native describes LayoutAnimation like so:

Automatically animates views to their new positions when the next layout happens.

I don't understand why this API is needed when the Animation API already can do this.

Why / when should I use the LayoutAnimation API?

Upvotes: 1

Views: 841

Answers (1)

William Brochensque junior
William Brochensque junior

Reputation: 2972

I read about it here, and it says that:

LayoutAnimation works by identifying views by their unique key, computing their expected position, and relying on the underlying native framework (CoreAnimation on iOS) to animate the change. Frame changes are animated as long as the view keeps the same key between state changes. Opacity and Scale are the only additional properties supported, but it is possible to add a few more such as backgroundColor and transformations.

ReactNative’s Animated API works similarly, but requires a state property for each desired animation. For complex views this gets messy fast.

As said here:

Use the Animated API and handle all the movements ( which in this case are simple to be fair ) between the two modes in a relatively complicated way by having one view move off screen when the other comes in and vica versa. ( I would explain how but this article is not about Animated ).

Use the LayoutAnimation API to essentially configure how changes in the layout are to be handled.

LayoutAnimation handles the way layout changes are handled every time the screen ( or part of it ) is re-rendered. What this means is that every time you call setState in your code and that results in your views changing position LayoutAnimation can be used to animate the way your views move to their new positions. For example in the Login/Logout scenario I have a simple function that toggles a flag that decides whether to show the login view or not.

Upvotes: 2

Related Questions