react-native-reanimated
react-native-reanimated copied to clipboard
software-mansion
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
- Create 2 screens, both containing
<Animated.View>that share the samesharedTransitionTagprop - 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
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.
I don't know why, but I had some problems with
react-native-reanimated: 2.7.1when I installed in a simple project with some drawer navigation that usesexpo: 50.0.8andreact-native: 0.73.4A solution that I found was to downgrade it to 3.6.2 and keep
react-native-gesture-handlerto 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.
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 usaexpo: 50.0.8yreact-native: 0.73.4Una solución que encontré fue degradarla a 3.6.2 y mantenerlareact-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?
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
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
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.
I've created an issue in the expo repo with a more robust explanation here :) https://github.com/expo/expo/issues/27606#issuecomment-1992715260
FWIW in Expo Go it just doesn't work, but in development builds it outright crashes the app for me
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.
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...
I can confirm that upgrading from 3.8.1 to 3.9.0 results in this issue. Downgrading resolves the issue.
