Does LayoutAnimation Work Under Any Circumstances?

Question

LayoutAnimation is a part of React Native that automatically animates components when the view is rendered.

The official documentation is here:

https://reactnative.dev/docs/layoutanimation

However, the examples in the docs do not work. Objects in the examples that are supposed to animate just jump from the starting position to the end position.

Here is an example of one of the Snacks in the documentation that does not appear to animate:

https://snack.expo.io/91MUQd5IH

This would lead one to the conclusion that this API is just not supported or no longer functional.

Is it the case that Layout Animation just does not work? Or if it does work under some circumstances, please share a link containing a working Snack / Gist with an extremely simple but working LayoutAnimation example.

UPDATE: LayoutAnimation possibly does not support web. Does anyone have any knowledge of this or who can refer the reader to an explanation in the docs?

Answer 1

LayoutAnimation is currently not supported properly in react-native-web. You can see that here: https://github.com/necolas/react-native-web#modules and here https://github.com/necolas/react-native-web/issues/1613, https://github.com/necolas/react-native-web/issues/1056. It doesn't seem to be a priority for the project at the moment so I wouldn't count on it being implemented.

On iOS/Android it's a different story. If we look here: https://reactnative.dev/docs/layoutanimation/ you can actually see this working properly by pressing play and selecting iOS for example.

On Android we have support as well but it might not work/crash. If you look over the issues open for react-native, you will see a lot of them mention issues with LayoutAnimation and Android. E.g. it crashes under certain conditions on Android: https://github.com/facebook/react-native/issues/27552 and https://github.com/facebook/react-native/issues/29919.

I don't recommend using LayoutAnimation, especially on Android, as it is highly experimental and might crash on some devices without warning.

If you want to try some more interesting animations with better performance, I recommend you try using the Animated API from ReactNative or the newer react-native-reanimated which is faster, more modern but still in alpha (I'm talking about the current, v2, version).

Answer 2

By my test the given link in the question post works properly:

Also, I test it on my friend's iPhone and it's worked properly too. But many of React Native features don't work properly on Web export. For example animations on RNW (React Native Web) works on Android/iOS exports but not on Web exports.

For such web situations, you should decouple the web component and make a separate file then write the desired animation on it.