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

[alaughlin]

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

[eric183]

same issue... someone knows how this happened?

[pedrohamarques]

I don't know why, but I had some problems with react-native-reanimated: 2.7.1 when I installed in a simple project with some drawer navigation that uses expo: 50.0.8 and react-native: 0.73.4

A solution that I found was to downgrade it to 3.6.2 and keep react-native-gesture-handler to 2.14.0.

[alaughlin]

I don't know why, but I had some problems with react-native-reanimated: 2.7.1 when I installed in a simple project with some drawer navigation that uses expo: 50.0.8 and react-native: 0.73.4

A solution that I found was to downgrade it to 3.6.2 and keep react-native-gesture-handler to 2.14.0.

~so at reanimated 3.6.2 and react-native-gesture-handler 2.14.0, I'm no longer getting crashes, however the shared element is not animating~

I spoke too soon. I restarted the app in the simulator and it's back to crashing again.

[nicolassequera]

No sé por qué, pero tuve algunos problemas react-native-reanimated: 2.7.1cuando instalé en un proyecto simple con un cajón de navegación que usa expo: 50.0.8yreact-native: 0.73.4 Una solución que encontré fue degradarla a 3.6.2 y mantenerla react-native-gesture-handleren 2.14.0.

~entonces, en reanimated 3.6.2 y react-native-gesture-handler 2.14.0, ya no tengo fallas, sin embargo, el elemento compartido no se anima~

Hablé demasiado pronto. Reinicié la aplicación en el simulador y volvió a fallar.

Diste con la solucion?

[alaughlin]

I just tested spinning up a barebones react-native/expo app and while shared element transitions are not crashing, they also just aren't working at all.

I think something is just overall broken with reanimated 3.6/3.7 and react-native 0.73

[Mazafard]

same issue.

[TMaszko]

It's not crashing but ... I've got here a really weird behaviour indeed! react-native-reanimated: "~3.6.2" https://snack.expo.dev/@tmaszko/sharedtransitiontest

[juniorogaa]

im using version 3.6.2 and gesture in 2.14.0 because is the versions recommended by expo, but, not working too. The same behavior of @TMaszko example.

[TMaszko]

I've created an issue in the expo repo with a more robust explanation here :) https://github.com/expo/expo/issues/27606#issuecomment-1992715260

[alaughlin]

FWIW in Expo Go it just doesn't work, but in development builds it outright crashes the app for me

[joekendal]

I have the same crash logs from ios

[bmalin92]

Experiencing the same issues with Expo 50.0.14, Reanimated 3.6.2, and React Native 0.73.6. Spent roughly 12 hours trying various workarounds to no avail.

[shantanu-daisy]

Also am on Expo 50 and am having the same issue. Since upgrading, the transition does not work but we needed to upgrade for compliance and now have dependencies on it...

[anon-r-7]

I can confirm that upgrading from 3.8.1 to 3.9.0 results in this issue. Downgrading resolves the issue.

[joekendal]

@anon-r-7 strangely, I have this issue on 3.3.0