[ios][bug] Huge issue with LayoutAnimation - Single `Animated.View` with `layout` prop is enough to break un-mounting and de-allocation of any View which has been popped/swiped-back/closed/destroyed via navigation

Description

@piaskowyk @kmagiera

I have found a serious bug with LayoutAnimation. I have been trying to investigate the problem for several days, which is why videos that were in a screen or modal that I closed (goBack/pop/swipe to dismiss) still played even though everything was un-mounted and destroyed. The same is true for cameras (Green Light Indicator is no longer out).

It is sufficient to have a single Reanimated.View / createAnimatedComponent ANYWHERE in the app which uses layout, entering or exiting prop from Reanimated. Once a single View with that prop has been mounted (no matter where), no element that is in a navigation stack will be unmounted anymore, even if the layout hierarchy and lifecycle methods reports that it has been unmounted (eg cleanup function of useEffect). When you remove something conditionally on the screen (eg. with useState), un-mounting works fine. But it looks like a single use of LayoutAnimation is enough to break element un-mounting / de-allocation when closing Navigators, because (this is my guess) LayoutAnimation is still “watching all of them (or snapshotting?)” in order to be able to animate the layout, even when those views are in different screens. Maybe RNS is also an issue here?

I also did some tests, such as setting breakpoints at the deallocate function of expo-av. The methods were never called when layout, entering or exiting were present and mounted anywhere in the app. But if no Reanimated.View with layout was used the breakpoints triggered.

I have also created a video as well as a repro which can be tested with Expo Go.

Expected behavior

Views should correctly un-mount and deallocate once a Navigation screen has been dismissed / popped etc, even when using LayoutAnimation.

Actual behavior & steps to reproduce

To test my findings, simply grab my repro, spin it up, open Tab One and tap on the info icon at the top (headerRight) - as many times as you like. The video will start and stop as soon as the modal has been closed. But if you now switch to Tab two, which mounts a Reanimated.View with layout={Layout}, (imported from REA) and you now simply return to Tab one, you will notice that the video will continue to run as soon as you open and close the modal and it will start multiple videos until the App crashes eventually. If you remove layout from Tab two, you can open and close the modal 1000x and it will work fine. Please note that you need to restart the app when you add or remove layout, fast-refresh is not enough.

I provided a repro and all informations in my issue + in my repro App as Text. Here is also a Video showing the issue (watch with audio please)

Watch with audio

https://user-images.githubusercontent.com/504909/161172649-3d2b600d-41fb-47ec-87bd-89c69f55fe15.mp4

Snack or minimal code example

https://github.com/hirbod/react-reanimatad-layoutanimation-bug

And this single layout prop is enough to trigger the issue (once mounted): https://github.com/hirbod/react-reanimatad-layoutanimation-bug/blob/main/screens/TabTwoScreen.tsx#L7

Package versions

name	version
react-native	0.64.3
react-native-reanimated	2.5.0 (but breaks with any version that has LayoutAnimation)
Xcode	13.3
expo	SDK 44

Affected platforms

• Android
• iOS
• Web

Here is a cross link to RNS, since I am not sure if RNS or REA is the root issue: https://github.com/software-mansion/react-native-screens/issues/1379

[piaskowyk]

Good news, I found the cause of the issue today and I know how to resolve it.

[piaskowyk]

@hirbod Hey, I have just started to investigate it. This is a priority issue, I will notify you about progress.