react-native-reanimated: Shared element transition crashing app after upgrading react-native-reanimated, react-native, and expo

Description

We’ve recently upgraded our Expo app from SDK 49 to 50, including upgrading react-native-reanimated from 3.3.x to 3.7.x. We also upgraded react-native from 0.72 to 0.73. Now anytime we navigate between screens that share an element, the entire app (not just React) crashes.

I’ve attempted to downgrade react-native-reanimated back to 3.3.x, but the app will no longer build with that older version, with Fastlane throwing errors about Yoga.h not being found. I’m guessing the older version of this library is no longer compatible with the more recent versions of expo and/or react-native?

I am unable to reproduce this issue with a new Expo app. Our app is large and it’s not possible to share the repo. It’s possible one of the deps inside package.json is causing issues? I am going to paste the beginning of the crash report here showing the thread running reanimated is the one that crashes (it’s from the iOS simulator, but it also happens on real hardware), as well as the contents of our package.json. Please let me know if there’s anything else I can provide to help debug this.

package.json deps:

{
    "dependencies": {
        "@awesome.me/kit-e00b2acf97": "^1.0.14",
        "@expo/config-plugins": "~7.8.0",
        "@expo/react-native-action-sheet": "^4.0.1",
        "@fortawesome/fontawesome-svg-core": "^6.4.2",
        "@fortawesome/pro-light-svg-icons": "^6.4.2",
        "@fortawesome/pro-regular-svg-icons": "^6.4.2",
        "@fortawesome/pro-solid-svg-icons": "^6.4.2",
        "@fortawesome/react-native-fontawesome": "^0.3.0",
        "@gorhom/bottom-sheet": "^4.6.1",
        "@hookform/resolvers": "^3.3.4",
        "@kanelloc/react-native-animated-header-scroll-view": "1.0.0",
        "@logrocket/react-native": "^1.22.0",
        "@moneykit/connect-react-native": "^1.0.0",
        "@react-native-async-storage/async-storage": "1.21.0",
        "@react-native-clipboard/clipboard": "^1.13.2",
        "@react-native-community/datetimepicker": "7.6.1",
        "@react-native-community/netinfo": "11.1.0",
        "@react-native-picker/picker": "2.6.1",
        "@react-navigation/elements": "^1.3.21",
        "@react-navigation/native": "^6.1.6",
        "@sendbird/chat": "^4.10.3",
        "@sendbird/uikit-chat-hooks": "3.3.0",
        "@sendbird/uikit-react-native": "3.3.0",
        "@sendbird/uikit-react-native-foundation": "3.3.0",
        "@sendbird/uikit-utils": "3.3.0",
        "@sentry/browser": "^7.101.0",
        "@sentry/react-native": "5.17.0",
        "@stytch/react": "^15.0.0",
        "@stytch/react-native": "^0.21.0",
        "@stytch/react-native-inappbrowser-reborn": "^3.7.2",
        "@stytch/vanilla-js": "^4.3.1",
        "@tamagui/animations-css": "1.86.6",
        "@tamagui/animations-moti": "1.86.6",
        "@tamagui/core": "1.86.6",
        "@tamagui/create-theme": "1.86.6",
        "@tamagui/lucide-icons": "1.86.6",
        "@tamagui/react-native-media-driver": "1.86.6",
        "@tamagui/shorthands": "1.86.6",
        "@tamagui/theme-builder": "1.86.6",
        "@tamagui/toast": "1.86.6",
        "@tanstack/react-query": "^5.4.3",
        "burnt": "^0.12.2",
        "date-fns": "^2.30.0",
        "date-fns-tz": "^2.0.0",
        "expo": "^50.0.7",
        "expo-application": "~5.8.3",
        "expo-av": "~13.10.5",
        "expo-blur": "~12.9.1",
        "expo-build-properties": "~0.11.1",
        "expo-clipboard": "~5.0.1",
        "expo-constants": "~15.4.5",
        "expo-dev-client": "~3.3.8",
        "expo-device": "~5.9.3",
        "expo-document-picker": "~11.10.1",
        "expo-file-system": "~16.0.6",
        "expo-font": "~11.10.2",
        "expo-image-manipulator": "~11.8.0",
        "expo-image-picker": "~14.7.1",
        "expo-linear-gradient": "~12.7.1",
        "expo-linking": "~6.2.2",
        "expo-local-authentication": "~13.8.0",
        "expo-media-library": "~15.9.1",
        "expo-notifications": "~0.27.6",
        "expo-router": "~3.4.7",
        "expo-splash-screen": "~0.26.4",
        "expo-status-bar": "~1.11.1",
        "expo-updates": "~0.24.10",
        "expo-video-thumbnails": "~7.9.0",
        "jotai": "^2.5.1",
        "lodash": "^4.17.21",
        "logrocket": "^7.0.0",
        "lottie-react-native": "6.5.1",
        "mixpanel-browser": "^2.47.0",
        "mixpanel-react-native": "^2.3.1",
        "react": "18.2.0",
        "react-calendly": "^4.3.0",
        "react-dom": "18.2.0",
        "react-hook-form": "^7.49.3",
        "react-native": "0.73.4",
        "react-native-circular-progress-indicator": "^4.4.2",
        "react-native-confetti-cannon": "^1.5.2",
        "react-native-gesture-handler": "~2.14.0",
        "react-native-get-random-values": "~1.8.0",
        "react-native-mmkv": "^2.11.0",
        "react-native-pager-view": "6.2.3",
        "react-native-pkce-challenge": "^5.3.0",
        "react-native-reanimated": "^3.7.1",
        "react-native-safe-area-context": "4.8.2",
        "react-native-screens": "~3.29.0",
        "react-native-svg": "14.1.0",
        "react-native-tab-view": "^3.5.2",
        "react-native-web": "~0.19.6",
        "react-native-webview": "13.6.4",
        "statsig-react-native-expo": "^4.6.1",
        "tamagui": "1.86.6",
        "use-count-up": "^3.0.1",
        "use-debounce": "^10.0.0",
        "uuid": "^9.0.1",
        "zod": "^3.22.4"
    }
}

Crash report:

-------------------------------------
Translated Report (Full Report Below)
-------------------------------------

Incident Identifier: B9C94B80-F667-4BD1-957A-9E374F5802FF
CrashReporter Key:   3F6139E9-784B-3B25-B139-DAE2AF57B826
Hardware Model:      MacBookPro18,3
Process:             MyAppDev [95869]
Path:                /Users/USER/Library/Developer/CoreSimulator/Devices/E58DC44B-B581-4A0B-B05A-5AE891AE39CC/data/Containers/Bundle/Application/8AB2DD3D-6E14-4CF9-AC1A-085E4ECB255D/MyAppDev.app/MyAppDev
Identifier:          com.myapp.dev
Version:             24.02.6 (31)
Code Type:           ARM-64 (Native)
Role:                Foreground
Parent Process:      launchd_sim [43674]
Coalition:           com.apple.CoreSimulator.SimDevice.E58DC44B-B581-4A0B-B05A-5AE891AE39CC [83307]
Responsible Process: SimulatorTrampoline [4183]

Date/Time:           2024-02-22 16:14:00.2172 -0500
Launch Time:         2024-02-22 16:13:40.3277 -0500
OS Version:          macOS 14.3.1 (23D60)
Release Type:        User
Report Version:      104

Exception Type:  EXC_BAD_ACCESS (SIGSEGV)
Exception Subtype: KERN_INVALID_ADDRESS at 0x0000000000000000
Exception Codes: 0x0000000000000001, 0x0000000000000000
VM Region Info: 0 is not in any region.  Bytes before following region: 4339662848
      REGION TYPE                    START - END         [ VSIZE] PRT/MAX SHRMOD  REGION DETAIL
      UNUSED SPACE AT START
--->  
      __TEXT                      102aa0000-1040a4000    [ 22.0M] r-x/r-x SM=COW  ...p/MyAppDev
Termination Reason: SIGNAL 11 Segmentation fault: 11
Terminating Process: exc handler [95869]

Triggered by Thread:  0

Thread 0 Crashed::  Dispatch queue: com.apple.main-thread
0   MyAppDev                   	       0x102f37f3c reanimated::LayoutAnimationsManager::startLayoutAnimation(facebook::jsi::Runtime&, int, LayoutAnimationType, facebook::jsi::Object const&) + 352
1   MyAppDev                   	       0x102f45e78 invocation function for block in reanimated::createReanimatedModule(RCTBridge*, std::__1::shared_ptr<facebook::react::CallInvoker> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> const&) + 1264
2   MyAppDev                   	       0x102f8cd50 -[REAAnimationsManager startAnimationForTag:type:yogaValues:] + 116
3   MyAppDev                   	       0x102fc7c38 -[REASharedTransitionManager onViewTransition:before:after:type:] + 320
4   MyAppDev                   	       0x102fc7a38 -[REASharedTransitionManager startSharedTransition:] + 416
5   MyAppDev                   	       0x102fc7410 -[REASharedTransitionManager runAsyncSharedTransition] + 620
6   MyAppDev                   	       0x102fc62e4 -[REASharedTransitionManager screenAddedToStack:] + 100
7   MyAppDev                   	       0x102fc6228 -[REASharedTransitionManager reanimated_viewDidLayoutSubviews] + 92
8   UIKitCore                     	       0x11950ed54 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 2200
9   QuartzCore                    	       0x187dfd528 CA::Layer::layout_if_needed(CA::Transaction*) + 440
10  QuartzCore                    	       0x187e08288 CA::Layer::layout_and_display_if_needed(CA::Transaction*) + 128
11  QuartzCore                    	       0x187d32130 CA::Context::commit_transaction(CA::Transaction*, double, double*) + 440
12  QuartzCore                    	       0x187d5d0f4 CA::Transaction::commit() + 636
13  UIKitCore                     	       0x119093d64 _afterCACommitHandler + 80
14  CoreFoundation                	       0x180399c10 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 32
15  CoreFoundation                	       0x18039457c __CFRunLoopDoObservers + 512
16  CoreFoundation                	       0x180394a20 __CFRunLoopRun + 948
17  CoreFoundation                	       0x180394254 CFRunLoopRunSpecific + 584
18  GraphicsServices              	       0x188eb7c9c GSEventRunModal + 160
19  UIKitCore                     	       0x11906aff0 -[UIApplication _run] + 868
20  UIKitCore                     	       0x11906ef3c UIApplicationMain + 124
21  MyAppDev                   	       0x102aa4de0 main + 96
22  dyld_sim                      	       0x10811d514 start_sim + 20
23  dyld                          	       0x1083520e0 start + 2360

Steps to reproduce

1. Create 2 screens, both containing <Animated.View> that share the same sharedTransitionTag prop
2. Attempt to navigate between these 2 screens

Snack or a link to a repository

N/A

Reanimated version

3.7.1

React Native version

0.73.4

Platforms

iOS

JavaScript runtime

None

Workflow

Expo Dev Client

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes