6

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?

Code Whisperer
  • 22,959
  • 20
  • 67
  • 85
  • Yes, but I believe it's only iOS, maybe experimental for Android, but not for React Native for Web. – zero298 Oct 20 '20 at 18:17
  • Can you share what code you have tried to make work and on what platform you have tried it? – zero298 Oct 20 '20 at 18:25
  • @zero298 Thank you for sharing this key detail I will add it to the body of the question. Is there a source for this or are we just talking common knowledge? – Code Whisperer Oct 20 '20 at 18:26
  • @zero298 Here's the exmaple from the docs https://snack.expo.io/?&preview=true&platform=web&iframeId=juitkeqta0&supportedPlatforms=android,ios&name=LayoutAnimation&description=Example%20usage&waitForData=true – Code Whisperer Oct 20 '20 at 18:26
  • Yes, it's been a confusing point in React Native Web for a bit. This is the latest issue: https://github.com/necolas/react-native-web/issues/1613 The bit about Android comes from the very first paragraph of the docs that you linked and from personal experience. – zero298 Oct 20 '20 at 18:27
  • That helps clarify things. All I'd like to see at this point is a single functional example. – Code Whisperer Oct 20 '20 at 18:30
  • @CodeWhisperer when you say single function example, do you mean for web or for mobile device? I believe example for mobile device are already working from the link you mentioned, at least on android. – Dipen Shah Oct 23 '20 at 19:51
  • The given link in the post (Snack link) routes to an empty project. and What's the exact meaning of the post? Do you need a support on web? because I test it on the given Doc link and it works properly. What's your exact issue? –  Oct 24 '20 at 10:01
  • It does not appear to animate at all on any of my devices. Can you share a screencapture of the animation? – Code Whisperer Oct 26 '20 at 10:50
  • @CodeWhisperer, I upload a gif to [this address](https://i.stack.imgur.com/ZDUic.gif). For my device, Xiaomi note 8pro (Android 10), it works properly, If you want, tell me to test on an iPhone. –  Oct 28 '20 at 09:00

2 Answers2

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

tudor.gergely
  • 4,800
  • 1
  • 16
  • 22
1

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

my test on my android phone

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.