[Android][Fabric] `LayoutAnimationConfig` `skipExiting` not working

[mozzius]

Description

LayoutAnimationConfig skipExiting does not work on Android on the New Architecture. The exit animation still plays even though it should be skipped.

Compare iOS and Android:

https://github.com/user-attachments/assets/c5f9c73c-a6b3-49ca-b581-814e95b4efab

I am fairly certain it's the root cause of https://github.com/bluesky-social/social-app/issues/8536

Steps to reproduce

1. Unmount a component with an exit animation that should be skipped using LayoutAnimationConfig
2. Observe animation playing

Snack or a link to a repository

https://github.com/mozzius/layoutanimconfig-repro

Reanimated version

3.17.5

React Native version

0.79.4

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

No response

Device

Android emulator

Host machine

macOS

Device model

Pixel 9 Pro (Android 15)

Acknowledgements

Yes

[MatiPl01]

Hey @mozzius!

Thanks for reporting the issue. I was able to track down the culprit - in short, we are disabling the exiting animation in CPP just before the component unmounts when the componentWillUnmount function on the React class component is called. It seems that for some reason it is called after we get removal mutation in CPP, which triggers the exiting animation. In the end, the exiting animation starts before we disable it in CPP.

I will work on a fix for this behavior and will let you know once it is ready.

[audrius-savickas]

Hey @mozzius!

Thanks for reporting the issue. I was able to track down the culprit - in short, we are disabling the exiting animation in CPP just before the component unmounts when the componentWillUnmount function on the React class component is called. It seems that for some reason it is called after we get removal mutation in CPP, which triggers the exiting animation. In the end, the exiting animation starts before we disable it in CPP.

I will work on a fix for this behavior and will let you know once it is ready.

Hey @MatiPl01, we are experiencing the same issue, is there any fix or progress yet?

[MatiPl01]

Hey @audrius-savickas!

I was experimenting with a few different approaches, but unfortunately none of them worked as expected. I think that something broke in recent React Native versions and lifecycle hooks in the component on the JS side are called too late on Android, which causes this issue, because we aren't able to disable the exiting layout animation before the component gets removed.

[Splanis]

+1 :( any update on this guys?

[yonitou]

+1

[piaskowyk]

Hey 👋 This issue was caused by a problem in React Native where the order of execution between JS and UI operations wasn't maintained correctly. The good news is that I've tested it, and the issue goes away once you upgrade React Native to version 0.82 🎉. Although 0.82 is still in the RC phase, it will become stable in a few weeks, so just upgrading should resolve the problem.

[mozzius]

Ok, thank you!

[brentvatne]

@piaskowyk - do you know which commits we'd need to cherrypick if we wanted to fix this in a project using 0.81?

[delphinebugner]

Very interested in the answer as well 🙃

[piaskowyk]

Hey @brentvatne @delphinebugner 👋 I found out that the issue was fixed in nightly version 0.82.0-nightly-20250730-0d3791ca0. Through further investigation, I discovered the PR that fixed the issue: commit link

Looking at the changes in ReactFabric-prod.js, these changes seem reasonable and likely to have fixed the issue