[ios][bug] views are not unmounting / deallocating when closing/popping/removing screens

[hirbod]

Description

I think there is a deeper problem with nested navigators and react native screens. Before I invest too much effort in an example, I would like to describe the problem in the hope that my explanations will trigger a sparking idea.

I have noticed that with deeply nested navigators (bottom tabs in a navigator and other navigators in the upper and lower hierarchy), it seems that for individual screens or stacks that are above the tabs in the hierarchy, screens that have actually been unmounted (goBack/pop) are still active somehow.

This can be detected with react-native-vision-camera, react-native-video and expo-av.

For example, I did several tests with card, modal, fullScreenModal etc (single screen, but which opens above my bottom tabs navigator) and when I go back (with back button, with goBack() or pop()), the allocated memory is not freed, the camera remains active (green light indicator) and with react-native-video and expo-av even the sound continues to play.

I have tried for several hours to fix the problem. At first I thought the problem might be with enableFreeze, but it wasn't. As soon as native-stack or js-stack is used with enableScreens(true), this phenomenon occurs that unmounted components like expo-av or the camera remain active.

I have already done various tests with useEffects cleanup methods, I also get the feedback that my screen has been unmounted, but it is not true as it seems to still remain in native land. Not sure if your attach/detach logic has a flaw here.

What could be the problem? Any ideas?

Screenshots

Please watch this video. Have a look at RAM + AUDIO (music keeps playing even though the screen is gone)
After that, I am opening the camera. Please have a look at the green light indicator at the top and the RAM. Neither RAM is freed nor does the music stop nor does the camera unmount.

RPReplay_Final1648726480.mp4

Steps To Reproduce

1. Create a Navigation like in my example
2. Add a View above your bottom tabs
3. Open a that screen with a video
4. goBack/click on back/or pop

Expected behavior

Should remove element fully from the system and actually unmount that screen.

Actual behavior

Does somehow not fully unmount it. Cameras will be mounted (not always, but most of the times) and video players will keep playing audio, even when they have been unmounted.

Reproduction

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

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

I am using a custom dev client.

Package versions

package	version
react-native	0.64.3
@react-navigation/native	6.0.8
@react-navigation/native-stack	6.5.0
react-native-screens	3.13.1
react-native-safe-area-context	4.2.1
react-native-gesture-handler	2.1.1
react-native-reanimated	2.5.0
expo	SDK 44

[hirbod]

I did some further checks and the issue is even happening without a bottom tab bar. Cameras and Videos keep running when you pop a screen. I will no try to downgrade RNS to check if the newly fabric update is causing some trouble here or not.

EDIT:
Downgrading did not solve the issue. So something else is the root issue for this.

[hirbod]

@WoLewicki @kacperkapusciak after 3 days of searching, I found the issue.
I also made a reproduction for it, you can find it here:

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

The issue is coming from react-native-reanimated's LayoutAnimation. You may ask why I still think this issue belongs here? I have seen code which imports REA and also has some stuff around LayoutAnimation integrated.

This issue has a big impact, since it prevents any unmounted screen from being deallocated (I've checked that with XCode breakpoints in certain packages, like expo-av).

A single Layout mounted ANYWHERE in the whole app is enough to break the whole unmounting system.

Here is also a demonstrative video. Please watch with Audio

Bildschirmaufnahme.2022-04-01.um.02.10.50.mp4

[hirbod]

Here is a cross-link to REA, since I am not sure what is causing the problem:
software-mansion/react-native-reanimated#3124

[Hady207]

Hope this bug gets solved.

[hirbod]

@Hady207 it looks like this issue is due to reanimated. There is already a draft PR for that, but lets see if there is really no connection between both issues

[WoLewicki]

Since this problem is caused exclusively by the bug in react-native-reanimated, not in react-native-screens (see the repro in draft PR), I will close this issue. Feel free to comment here if something is wrong and we can always reopen it.

[cjpete]

@WoLewicki Since react-native-screens relies upon react-native-reanimated (and not via a peer dependency), I think it's worth keeping this open to track. Looks like there's a new version of react-native-reanimated which may fix this issue, but what would be the upgrade path for react-native-screens?

[hirbod]

Reanimated v3 has indeed fixed this issue.

[WoLewicki]

I am not sure if there is anything to do in react-native-screens regarding this issue. Or am I missing something?

[batuhank4]

hi bro, I tried different versions of Reanimated but it didn't fix the problem. Switching from @react-navigation/native-stack to @react-navigation/stack solved my problem. Thank you for everything