Shared Element Transition Error on component dismount

[jslok]

Description

If I dismount a component (using setState for example instead of navigation goBack), the app crashes. I see either of the two errors using a minimum repro (github link below): Trying to remove a view index above child count... The specified child already has a parent. you must call removeView() on the child's parent first.

In my app with a flatlist and image pagination (video below), it seems reanimated tries (and fails) to animate the dismounted components.

https://github.com/software-mansion/react-native-reanimated/assets/22921326/3faa4bea-eed5-49f3-926c-a012f4f76007

Reanimated does not seem to accept changing or disabling the sharedTransitionTag dynamically once it is already set.

Steps to reproduce

1. Navigate forwards with an element with a shared element transition.
2. Dismount the component with the sharedElementTag
3. App crashes

Snack or a link to a repository

https://github.com/jslok/sharedElementErrorOnDismount

Reanimated version

3.5.2

React Native version

0.72.6

Platforms

Android

JavaScript runtime

JSC

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Pixel 7

Acknowledgements

Yes

[jslok]

The repo also showed another issue where the shared element component on screen2 did not end up in the correct position after navigation.

[jslok]

Not sure but maybe #5371 fixes this?

[jslok]

Still exists on 3.6.0

[TomWq]

It's true that even when I use the official example, there will be such problems that sometimes a few more shares will not work

[matt-dalton]

We are also experiencing this...any workarounds/fixes?