Shared Element Transition (Solution provided)

[aymather]

Description

It's really hard for me to know what's going on here, but I can sometimes reproduce this error by pressing a button in my app which leads to a crash. I used Claude to interpret the crash logs for me and it's saying that the error has to do with the Shared Element package. I've also attached the full crash logs in crash-logs.txt.

Exception Type: EXC_CRASH (SIGABRT)
Termination Reason: SIGNAL 6 Abort trap: 6

0   CoreFoundation                	__exceptionPreprocess + 160
1   libobjc.A.dylib               	objc_exception_throw + 56
2   CoreFoundation                	-[__NSArrayM removeAllObjects] + 0
3   alysium-dev                   	-[REASharedTransitionManager handleTabNavigatorChange:] + 128
4   alysium-dev                   	-[REASharedTransitionManager reanimated_viewDidLayoutSubviews] + 128

-[REASharedTransitionManager handleTabNavigatorChange:] + 128 (REASharedTransitionManager.m:579)
-[REASharedTransitionManager reanimated_viewDidLayoutSubviews] + 128 (REASharedTransitionManager.m:524)

0   CoreFoundation                	__exceptionPreprocess + 160
1   libobjc.A.dylib               	objc_exception_throw + 56
2   CoreFoundation                	-[__NSArrayM removeAllObjects] + 0

crash-logs.txt

Steps to reproduce

1. Mount a component that has a shared element tag
2. I have a button in my app that essentially unmounts the app and mounts a different "app". If i press that, it leads to this crash.

Snack or a link to a repository

unable to

Reanimated version

3.16.1

React Native version

0.74.3

Platforms

iOS

JavaScript runtime

None

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 15 Plus

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[aymather]

I found the issue and implemented a fix. It's just some null/array checks.

Lines 573-586:

if (_isAsyncSharedTransitionConfigured) {
    // this is a new screen, let wait until header will be attached to a screen to make a proper snapshots
    _isTabNavigator = YES;
    return;
  }

  REAUIView *navTabScreen = _disappearingScreens[0];
  REAUIView *sourceScreen = _disappearingScreens[[_disappearingScreens count] - 1];
  REAUIView *targetTabScreen = [REAScreensHelper getActiveTabForTabNavigator:navTabScreen.reactSuperview];
  REAUIView *targetScreen = [REAScreensHelper findTopScreenInChildren:targetTabScreen];
  if (!layoutedScreen && _isTabNavigator) {
    // just wait for the next layout computation for your screen
    return;
  }

Changes:

if (_isAsyncSharedTransitionConfigured) {
    // this is a new screen, let wait until header will be attached to a screen to make a proper snapshots
    _isTabNavigator = YES;
    return;
  }

  // Add safety check for disappearing screens
  if ([_disappearingScreens count] == 0) {
    return;
  }

  REAUIView *navTabScreen = _disappearingScreens[0];
  REAUIView *sourceScreen = _disappearingScreens[[_disappearingScreens count] - 1];
  
  // Add null checks
  if (!navTabScreen || !navTabScreen.reactSuperview) {
    return;
  }
  
  REAUIView *targetTabScreen = [REAScreensHelper getActiveTabForTabNavigator:navTabScreen.reactSuperview];
  REAUIView *targetScreen = [REAScreensHelper findTopScreenInChildren:targetTabScreen];
  
  if (!targetScreen) {
    return;
  }

  if (!layoutedScreen && _isTabNavigator) {
    // just wait for the next layout computation for your screen
    return;
  }

Is there any documentation on how to do a pull request here? I don't mind doing it.

[aymather]

Pull request open #6700