[New Architecture] LayoutAnimation Breaking

[ravindraguptacapgemini]

Description

After migrating to new architecture, the animation configured with LayoutAnimation are behaving differently, we can observe a kind of jerk in the animation. Attached the videos and repo for reproduction of the issue.

Also check in slow motion with simulator, eventually the views are not adopting the slow animation and breaking.

React Native Version

0.72.3

Output of npx react-native info

System: OS: macOS 13.4.1 CPU: (12) arm64 Apple M2 Pro Memory: 312.44 MB / 32.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 16.20.0 path: /usr/local/bin/node Yarn: version: 1.22.19 path: /opt/homebrew/bin/yarn npm: version: 8.19.4 path: /usr/local/bin/npm Watchman: version: 2023.06.26.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /Users/ravindragupta/.rbenv/shims/pod SDKs: iOS SDK: Platforms:

• DriverKit 22.4
• iOS 16.4
• macOS 13.3
• tvOS 16.4
• watchOS 9.4 Android SDK: Not Found IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.10121639 Xcode: version: 14.3.1/14E300c path: /usr/bin/xcodebuild Languages: Java: version: 11.0.19 path: /usr/bin/javac Ruby: version: 3.0.4 path: /Users/ravindragupta/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: ^18.2.0 react-native: installed: 0.72.3 wanted: 0.72.3 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: false newArchEnabled: true iOS: hermesEnabled: false newArchEnabled: true

Steps to reproduce

Use LayoutAnimation with New Architecture (Fabric) and observe issues with animation.

Snack, code example, screenshot, or link to a repository

Reproducible Demo App: https://github.com/ravindraguptacapgemini/reproducer-react-native-maps-events/tree/layout-animation-issue

Videos and Screenshot:

https://github.com/facebook/react-native/assets/97147467/d9e66cc5-0fd5-4881-91d9-dd9b684aba97

https://github.com/facebook/react-native/assets/97147467/b5b752b5-7d02-412d-a61d-7a8a82e6dbd2

[cortinico]

@ravindraguptacapgemini thanks for the reproducer. Could you re-upload the New Architecture video as it's not loading at the moment?

[ravindraguptacapgemini]

@cortinico PFA for new architecture video:

https://github.com/facebook/react-native/assets/97147467/de528acb-dd69-4fe0-8130-1e88e60335ea

[ravindraguptacapgemini]

@cortinico Just checking if you got a chance to check for the issue. Thanks

[pushpender30111992]

+1

[pushpender30111992]

@cortinico , with fabric enabled LayoutAnimation is not working android . When I logout from home page and navigate to login , Its showing faded login screen .

[cortinico]

This looks like a bug with LayoutAnimation on Fabric. We're happy to receive a PR or collaborate on a fix if someone is up for it.

[sammy-SC]

Hey @ravindraguptacapgemini,

I just tested LayoutAnimations on examples from reactnative.dev on the new architecture and it seems to work.

I tried to use your repo for a repro but ran into build errors in Xcode:

and

any idea what I'm doing wrong?

[ravindraguptacapgemini]

@sammy-SC can you please build for Rosetta, may be some issue with Xcode build settings.

[ravindraguptacapgemini]

@sammy-SC Also the animations do no adopt to the simulator setting 'Debug -> Slow Animations'.

[sammy-SC]

from the video it looks like the animation is not working at all and it only shows first and last frame.

Debug -> Slow Animation unfortunately won't work out of the box. The trouble is, the animation is not driven by CoreAnimation framework on iOS. The New Architecture has a cross-platform implementation and does not use animation primitives that host platforms offer.

[sammy-SC]

I have tried the Rosetta option but I got the build failure I mentioned above. It looks like the compiler can't see some symbols.

[ravindraguptacapgemini]

@sammy-SC checking for the issue.

[ravindraguptacapgemini]

@sammy-SC There was some issue with architecture, just pushed the fix. You can check it now.

[ravindraguptacapgemini]

@sammy-SC were you able to check it?

[sammy-SC]

Hello @ravindraguptacapgemini,

we are tracking this and incorporating resolving this into our planning.

[coado]

I've created a minimal reproducer for this one https://github.com/coado/react-native-layout-animation-fabric-issue. The animation is not working on both iOS and android on the new architecture. The animation stops working when the useNativeDriver is set to false on fadeIn and fadeOut animations on iOS. On android it seems like it doesn't work in both cases.

[coado]

The problem here is with mixing JS and native side animations and the view flattening on top of that. When there is an animation defined on JS side (like the one in the reproducer with useNativeDriver set to false) it sends properties updates to cpp which causes creation of update mutations for the corresponding animated view. In the provided repro there is also a LayoutAnimation configured to run on the next layout alongside the JS animation. It's registered as the inflightAnimation right before the first mutation update from the JS animation. So, when the update finally occurs, the algorithm will check for the potential conflict in the current layout animation with the mutation update in getAndEraseConflictingAnimations. One of the requirements for the conflict to happen is that the animated node (from the layout animation) is mutated directly. Even though in the above repro JS animations are updating background of the Animated.View and the layout animation update the bottom margin of its parent, the layout and JS animations are targeted at the same node, because of the view flattening, which causes those conflicts.

The solution to this problem is quite simple as we can set collapsable: false on the parent of the Animated.View to prevent the view flattening. In some cases the issue may not be registered at first, because some styles like: opacity, shadows or transforms prevent view flattening which sort of solves the problem, but changing these styles dynamically may reintroduce it.

[madflanderz]

I just discovered the same problem. It seems that the delete animation is not working anymore in the latests versions (75 and 74) in IOS. Here is a expo-snack where you can see the problem. Create and delete of the items should animate in the same way but the animation is only there when items are added. When item is removed the item disappears immediately instead of fading out.

I tested the same code example in an old project with react-native 0.68 and there the animation of deleted items works pretty well. Is this issue known and are there any plans to fix this?

[coado]

I just discovered the same problem. It seems that the delete animation is not working anymore in the latests versions (75 and 74). Here is a expo-snack where you can see the problem. Create and delete of the items should animate in the same way but the animation is only there when items are added. When item is removed the item disappears immediately instead of fading out.

I tested the same code example in an old project with react-native 0.68 and there the animation of deleted items works pretty well. Is this issue known and are there any plans to fix this?

It can be solved similarly to the above issue by setting collapsable={false} on the item component. Most of these types of issues occur, because of some conflict with the view flattening. The good thing is that they are relatively easy to solve, but sometimes it's hard to notice that flattening is the cause of the problem.

[shovel-kun]

Can't seem to repro your minimal producer on Android @coado . Layout Animations do not run.

[madflanderz]

@coado I forget to mention that my snack it is not working on IOS. On android the example works fine. collapsable prop is only available for android and does not help in my case.

[coado]

Can't seem to repro your minimal producer on Android @coado . Layout Animations do not run.

Hey, I've added the repro on iOS for now just to show the potential problem. I might add it on android as well 😅

[coado]

@coado I forget to mention that my snack it is not working on IOS. On android the example works fine. collapsable prop is only available for android and does not help in my case.

Hey, collapsable can be set on both android and iOS on the new architecture. If it doesn't work, then there has to be problem with something else 🤔