search

software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.61k stars 1.27k forks source link

Shared Element Transition Error on component dismount #5375

Open jslok opened 7 months ago

jslok commented 7 months ago

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 commented 7 months ago

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

jslok commented 7 months ago

Not sure but maybe #5371 fixes this?

jslok commented 7 months ago

Still exists on 3.6.0

TomWq commented 3 months ago

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