Known issue: Expo Router / React Navigation crash in SDK 51 when switching tabs (clearSharedTransitionConfigForTag crash)

[marklawlor]

[!TIP] This issue is now resolved. Please update to the latest version of the Expo SDK 51 / react-native-reanimated / react-navigation. You will also need to update your Expo Go (either from the App store or having the CLI update your simulator) or rebuild or development client.

[!CAUTION] If you are still having issues after upgrade & updating your app, please create a new issue.

An updated version of Expo Go is now available on the App Store, version 2.31.5. This includes react-native-reanimated@3.10.1 with the fix for this issue!

Previous issue description

Due to an upstream issue with `react-native-screens` (the library which powers Expo Router and React Navigation), Expo Router projects upgrading to SDK51 may experience an issue where the app quits unexceptionally when navigating between screens on iOS. We are aware of this issue and are working with Software Mansion with a fix. Unfortunately, a solution could not be deployed prior to the initial SDK51 release, but you can resolve the issue with a simple workaround. ## Issue Identification After upgrading to SDK51, your Expo Router app may crashes on iOS. This affects all Expo Go, Custom Development Clients and Production builds. When running your app in development you will receive the "Expo Go quit unexpectedly" error dialog. Clicking "report" will show the crashlog where you should see this line in the stack-trace ``` Thread 0 Crashed:: Dispatch queue: com.apple.main-thread 0 Expo Go 0x104772afc -[REAAnimationsManager clearSharedTransitionConfigForTag:] + 8 ``` ## Expo Router Workaround The workaround is to import `react-native-reanimated` in a top-level `_layout` file. > [!TIP] > Once `react-native-reanimated@3.11.0` is released, you can manually upgrade by adjusting the version in your package.json and switch to a [custom development client](https://docs.expo.dev/develop/development-builds/introduction/). An update for Expo Go will be released at a later stage. ### 1. Create a top level `_layout` file (if you don't have one yet). You will need a [top-level `_layout` file](https://docs.expo.dev/router/layouts/). If you don't have one already, you can use this as a template. ```tsx import { Slot } from 'expo-router'; export default function HomeLayout() { return ; } ``` ### 2. Install `react-native-reanimated` Run `npx expo install react-native-reanimated` to install `react-native-reanimated` > [!TIP] > No additional configuration is required. [Reanimated Babel plugin](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#reanimated-babel-plugin) is automatically configured in [babel-preset-expo](https://www.npmjs.com/package/babel-preset-expo) when you install the library. ### 3. Import `react-native-reanimated` Import `react-native-reanimated` in the root `_layout` ```diff import { Slot } from 'expo-router'; + import 'react-native-reanimated' export default function HomeLayout() { return ; } ``` ## React Navigation Workaround Is you are using just React Navigation, please upgrade to `react-native-reanimated@3.11.0`. If you are still experiencing the issue add `react-native-reanimated` to your `App.js` ```ts // App.ts import 'react-native-reanimated' export function App() { // ... } ```

[tomekzaw]

Hey @marklawlor, thanks for reporting this issue.

This one was tricky to reproduce as it happens only if react-native-reanimated is installed as a dependency but not used directly (i.e. not imported in app JS code). That's also the reason why the crash occurs in bare expo-router app but not in the Reanimated Example app.

I've submitted a proper fix to Reanimated repository:

• https://github.com/software-mansion/react-native-reanimated/pull/5975

The PR is already merged. It will be available in today's nightly release as well as published in next stable release (3.11.0).

We're sorry for inconvenience. Any chance this change will make it into SDK 51? 🙏

[marklawlor]

react-native-reanimated@3.10.1 and react-native-reanimated@3.11.0 has been published

Development clients & production builds

Please upgrade your version of react-native-reanimated and rebuild your application

Expo Go

We will need to publish a new version of Expo Go. In the meantime, please switch to using a custom development client.

[jpdriver]

for the record, also saw this crash when using an Expo Go + React Navigation app that

• doesn't use Expo Router
• doesn't have react-native-reanimated as a dependency

this App was started from the TypeScript template (SDK 51) and then added React Navigation.

---

as mentioned above

npx expo install react-native-reanimated

(installs v3.10.0)

and adding

import 'react-native-reanimated';

to the root App.tsx fixed it for me

[thearchitecturalauthority]

for the record, also saw this crash when using an Expo Go + React Navigation app that

• doesn't use Expo Router
• doesn't have react-native-reanimated as a dependency

this App was started from the TypeScript template (SDK 51) and then added React Navigation.

as mentioned above

npx expo install react-native-reanimated

(installs v3.10.0)

and adding

import 'react-native-reanimated';

to the root App.tsx fixed it for me

This fixes the issue. Thank you @jpdriver

[noeGitDev003]

I am having the same problem, but in my case, I use react navigation, what would be the solution? It would be very helpful if you could help me, thank you

[BRUT4LxD]

I'm using react native navigation and my iOS app was crashing during navigation.goBack(). I did what @jpdriver said and it works

[noeGitDev003]

Did you import the library in App.js?

[Luke-Pisano]

Using what @jpdriver said I was able to fix my react-navigation/native-stack navigation from going in-between screens and the navigation.goBack() method just by installing react-native-reanimated using:

npx expo install react-native-reanimated

Then I just imported the library to my App.tsx file using:

import 'react-native-reanimated';

This worked for me and I didn't have to do anything else. This is a really strange issue.

[marklawlor]

I've updated the issue description to include instructions for non-Expo Router projects.

[!IMPORTANT]
If the instructions in the first post do not fix your issue, please create a new issue. You may be experiencing a different issue - but we cannot tell / help unless its reported properly

[Antonymn0]

After upgrading to sdk 51, my app is crashing on android 7 devices. Any one experiencing a simaar issue?

[jaronfort]

This is happening on one of my apps. My other app crashes at startup before anything has a chance to load.

[tomekzaw]

If you're using Expo prebuild, please upgrade to Reanimated 3.10.1:

npx expo install react-native-reanimated@3.10.1

If you're using Expo Go, please apply the workaround:

import 'react-native-reanimated';

[SimonVillage]

Why won't this just get fixed? I feel like this affects a lot of users.

[cyanle1995]

This issue still exist

[Brahim-djiddi]

import 'react-native-reanimated', import it into the App.js file or into App.tsx especially those who use an expo project it works correctly.

[filterdo]

After importing 'react-native-reanimated' into my App.js, I cannot get rid of the following error:

[Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.11.0 vs 3.10.0)

Anyone else run into this?

[jhhayashi]

If you're using Expo Go, you'll have to pin the version of reanimated to the same version that's bundled into Expo Go (currently 3.10 for the version of Expo Go compatible with SDK51).

If you want to upgrade to 3.11, you'll want to build your own development client (or wait until the version in Expo Go is upgraded).

[filterdo]

@jhhayashi - So you are saying that the React Navigation Workaround that @marklawlor provided above is not correct because it only applies to building your own development client?

Based on your comment, you can't run Expo Go unless you are on SDK 51, and Expo Router and React Navigation crash when you upgrade to SDK 51. The fix is to install react-native-reanimated@3.11.0, but Expo Go requires 3.10.

So Expo Go is useless now if you are using Expo Router or React Navigation, and we don't know when it will be fixed?

[jhhayashi]

The workaround posted above should work now. The newer version of reanimated should work without the workaround, but the only way to install it now is to build your own development client. Otherwise you can wait for the fix to land in Expo Go (which is what I'm doing)

[jsndowns29]

I also noticed that after upgrading to expo 51, the icons on my tab navigation aren't showing anymore, they are replaced by question marks. Do you know if there is a fix for this?

[kriit24]

for the record, also saw this crash when using an Expo Go + React Navigation app that

• doesn't use Expo Router
• doesn't have react-native-reanimated as a dependency

this App was started from the TypeScript template (SDK 51) and then added React Navigation.

as mentioned above

npx expo install react-native-reanimated

(installs v3.10.0)

and adding

import 'react-native-reanimated';

to the root App.tsx fixed it for me

THANKS IT WORKED

[Vortes]

After importing 'react-native-reanimated' into my App.js, I cannot get rid of the following error:

[Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.11.0 vs 3.10.0)

Anyone else run into this?

having the same issue here

[kriit24]

npx expo install react-native-reanimated

use npx expo install react-native-reanimated, not npx expo install react-native-reanimated@3.11.0

[Dontag]

I have upgraded to SDK 51 with react-native-reanimated 3.10.1 but still the app crashes on launch in IOS devices, I have checked the issue - https://github.com/software-mansion/react-native-reanimated/pull/5975 App works fine in android

[navneet1990]

I started project using SDK 50, already running version of code with tab bar started from app/_layout.tsx, but after updating to expo SDK 51, now it started showing following image.

After updating to 51, I saw new file app/index.tsx been added, but now I am stuck here

[kriit24]

I have upgraded to SDK 51 with react-native-reanimated 3.10.1 but still the app crashes on launch in IOS devices, I have checked the issue - software-mansion/react-native-reanimated#5975 App works fine in android

try other dependencies to the same version, maybe this help

"dependencies": { "@expo/prebuild-config": "^7.0.3", "@react-native-async-storage/async-storage": "1.23.1", "@react-native-community/datetimepicker": "7.7.0", "@react-native-community/netinfo": "11.3.1", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "@shopify/flash-list": "1.6.4", "babel-plugin-module-resolver": "^5.0.2", "create-react-class": "^15.7.0", "crypto-js": "^4.1.1", "eas-cli": "^0.49.0", "expo": "^51.0.2", "expo-barcode-scanner": "~13.0.1", "expo-build-properties": "~0.12.1", "expo-camera": "^15.0.6", "expo-checkbox": "~3.0.0", "expo-constants": "~16.0.1", "expo-image-picker": "~15.0.4", "expo-linking": "~6.3.1", "expo-location": "~17.0.1", "expo-secure-store": "~13.0.1", "expo-status-bar": "~1.12.1", "metro-react-native-babel-preset": "^0.77.0", "project-can-json": "^1.0.1", "project-react-accordion": "^1.0.4", "project-react-mvc": "^1.5.1", "project-rest-client": "^1.2.7", "react": "18.2.0", "react-native": "0.74.1", "react-native-check-version": "^1.1.1", "react-native-device-info": "^10.13.1", "react-native-dotenv": "^3.4.9", "react-native-get-random-values": "~1.11.0", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-reanimated": "~3.10.1", "react-native-render-html": "^6.3.4", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", "react-native-store-version": "^1.4.1", "react-native-url-polyfill": "^2.0.0", "react-native-uuid": "^2.0.1", "react-native-webview": "13.8.6" },

[RCIStevo]

Hello everybody, since I have updated from SDK 50 - 51 I am getting error ERROR Error: Cannot find native module 'ExpoAsset', js engine: hermes .. I went to official doc : https://docs.expo.dev/versions/latest/sdk/asset/. did all the procedue - in app.json : "plugins": [ "expo-asset", "expo-localization", [ "expo-build-properties", { "ios": { "newArchEnabled": false, "flipper": false }, "android": { "newArchEnabled": false } } ], "expo-font" ], but i wont go away. Here is error that i get : ERROR Error: Cannot find native module 'ExpoAsset', js engine: hermes at App (http://127.0.0.1:8081/index.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:123194:33) at IgniteApp at withDevTools(IgniteApp) (http://127.0.0.1:8081/index.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:254132:27) at RCTView at View (http://127.0.0.1:8081/index.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40662:43) at RCTView at View (http://127.0.0.1:8081/index.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40662:43) at AppContainer (http://127.0.0.1:8081/index.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40505:25) at main(RootComponent) (http://127.0.0.1:8081/index.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:118585:28). Does anybody have same error. Thank you for any input, br

[marklawlor]

[!IMPORTANT]
If the instructions in the first post do not fix your issue, please create a new issue. You may be experiencing a different issue - but we cannot tell / help unless its reported properly

Please do not ask for support for other issues - your comment will be hidden as off-topic. Please follow the correct procedure and create a new issue

[mikecr123]

for the record, also saw this crash when using an Expo Go + React Navigation app that

• doesn't use Expo Router
• doesn't have react-native-reanimated as a dependency

this App was started from the TypeScript template (SDK 51) and then added React Navigation.

as mentioned above

npx expo install react-native-reanimated

(installs v3.10.0)

and adding

import 'react-native-reanimated';

to the root App.tsx fixed it for me

that works!

[FilipCorba]

If you're using Expo prebuild, please upgrade to Reanimated 3.10.1:

npx expo install react-native-reanimated@3.10.1

If you're using Expo Go, please apply the workaround:

import 'react-native-reanimated';

I did this but still my app crashes on real device is there any other known issues with this package or should I look into other packages if they are the reason? I’m not getting any error just when I boot my app on Expo Go on my phone it downloads data and when it’s time to boot up it crashes and expo closes.

[saeid-elio]

react-native-reanimated@3.11.0 has been published

Development clients & production builds

Please upgrade to react-native-reanimated@3.11.0 and rebuild your application

Expo Go

We will need to publish a new version of Expo Go. In the meantime, please switch to using a custom development client.

Using version 3.11.0 of react-native-reanimated keeps giving me the following error:

 ERROR  Error: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.11.0 vs 3.10.1).

I had to revert to 3.10.1 to avoid this error.

[graniteroad]

I'm seeing the same issue with using react navigation with expo 51. i've attempted every suggested work around in this thread but nothing works. In addition I ran a development build, but see the same results of the app freezing and installed expo version 51.0.4. Here's my pacakage.json config

  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "7.7.0",
    "@react-native-picker/picker": "2.7.5",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/material-top-tabs": "^6.6.13",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@reduxjs/toolkit": "^1.9.6",
    "axios": "^1.6.7",
    "core-js": "^3.35.1",
    "expo": "51.0.4",
    "expo-auth-session": "~5.5.2",
    "expo-checkbox": "~3.0.0",
    "expo-constants": "~16.0.1",
    "expo-crypto": "~13.0.2",
    "expo-device": "~6.0.2",
    "expo-image-picker": "~15.0.4",
    "expo-linear-gradient": "~13.0.2",
    "expo-linking": "~6.3.1",
    "expo-media-library": "~16.0.3",
    "expo-screen-orientation": "~7.0.4",
    "expo-secure-store": "~13.0.1",
    "expo-status-bar": "~1.12.1",
    "expo-web-browser": "~13.0.3",
    "jwt-decode": "^4.0.0",
    "lodash": "^4.17.21",
    "qs": "^6.11.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.1",
    "react-native-datepicker": "^1.7.2",
    "react-native-drawer-layout": "^3.3.0",
    "react-native-dropdown-menu": "*",
    "react-native-dropdown-select-list": "*",
    "react-native-elements": "*",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-modal-datetime-picker": "^17.1.0",
    "react-native-pager-view": "6.3.0",
    "react-native-paper": "*",
    "react-native-reanimated": "3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-select-dropdown": "*",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "*",
    "react-native-webview": "13.8.6",
    "react-redux": "^8.1.2",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0"
  },
  "private": true
}

[ECKSTASYY]

I'm seeing the same issue with using react navigation with expo 51. i've attempted every suggested work around in this thread but nothing works. In addition I ran a development build, but see the same results of the app freezing and installed expo version 51.0.4. Here's my pacakage.json config

  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "7.7.0",
    "@react-native-picker/picker": "2.7.5",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/material-top-tabs": "^6.6.13",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@reduxjs/toolkit": "^1.9.6",
    "axios": "^1.6.7",
    "core-js": "^3.35.1",
    "expo": "51.0.4",
    "expo-auth-session": "~5.5.2",
    "expo-checkbox": "~3.0.0",
    "expo-constants": "~16.0.1",
    "expo-crypto": "~13.0.2",
    "expo-device": "~6.0.2",
    "expo-image-picker": "~15.0.4",
    "expo-linear-gradient": "~13.0.2",
    "expo-linking": "~6.3.1",
    "expo-media-library": "~16.0.3",
    "expo-screen-orientation": "~7.0.4",
    "expo-secure-store": "~13.0.1",
    "expo-status-bar": "~1.12.1",
    "expo-web-browser": "~13.0.3",
    "jwt-decode": "^4.0.0",
    "lodash": "^4.17.21",
    "qs": "^6.11.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.1",
    "react-native-datepicker": "^1.7.2",
    "react-native-drawer-layout": "^3.3.0",
    "react-native-dropdown-menu": "*",
    "react-native-dropdown-select-list": "*",
    "react-native-elements": "*",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-modal-datetime-picker": "^17.1.0",
    "react-native-pager-view": "6.3.0",
    "react-native-paper": "*",
    "react-native-reanimated": "3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-select-dropdown": "*",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "*",
    "react-native-webview": "13.8.6",
    "react-redux": "^8.1.2",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0"
  },
  "private": true
}

+1, need to do company work, do we have an eta on fix?

[ramnoah]

I upgraded my project to SDK 51, and that's when the troubles began with the app's launch on iOS devices when i was using react navigation. This issue only occurred me on iOS, but I managed to solve it with the help of this guide. Works fine on other operating systems.

[graniteroad]

I upgraded my project to SDK 51, and that's when the troubles began with the app's launch on iOS devices when i was using react navigation. This issue only occurred me on iOS, but I managed to solve it with the help of this guide. Works fine on other operating systems.

Can you walk through the exact steps you took to solve the issue?

[ramnoah]

I upgraded my project to SDK 51, and that's when the troubles began with the app's launch on iOS devices when i was using react navigation. This issue only occurred me on iOS, but I managed to solve it with the help of this guide. Works fine on other operating systems.

Can you walk through the exact steps you took to solve the issue?

Of course, the steps is on the order that give us the user, my explanation is this:

1. Create a layout route

Create a layout route for a directory, for this create a file named _layout.js in the directory. Here type this:

import { Slot } from 'expo-router';

export default function HomeLayout() {
  return <Slot />;
}

2. Install react-native-reanimated In a terminal of your Project type this:

npx expo install react-native-reanimated

3 Add this line on the code of the layout that previously created:

import 'react-native-reanimated'

Should see like this:

import { Slot } from 'expo-router';
import 'react-native-reanimated'

export default function HomeLayout() {
  return <Slot />;
}

4 In the archive named App.js on your project add this line

import 'react-native-reanimated'

That's all 👌

[brentvatne]

An updated version of Expo Go is now available on the App Store, version 2.31.5. This includes react-native-reanimated@3.10.1 with the fix for this issue!

[xixixao]

@brentvatne after the update Expo Go on iOS crashes for me after the bundle is built and before the app starts (this app worked before the Expo Go update (but crashed on navigation)).

I also tried reinstalling Expo Go completely but it hasn't helped.

[graniteroad]

An updated version of Expo Go is now available on the App Store, version 2.31.5. This includes react-native-reanimated@3.10.1 with the fix for this issue!

@brentvatne that did not work.. still crashes on navigation

[brentvatne]

@xixixao @graniteroad - then those may be different issues. please create a new issue with a minimal reproducible example

[Sheriff-Oladimeji]

An updated version of Expo Go is now available on the App Store, version 2.31.5. This includes react-native-reanimated@3.10.1 with the fix for this issue!

@brentvatne that did not work.. still crashes on navigation

The same thing, I've tried everything said and I also updated my dependencies, everything works well in Expo Go but the Android app crashes whenever I try to access pages using @react-navigation/material-top-tabs

import "expo-dev-client";
import Navigation from "./navigation";
import "react-native-reanimated"

const App = () => {
  return <Navigation />;
};

export default App;

[ottosamatori]

not working, when i want navigate on the screen that contains a navigation to a modal react-navigation on device physical ios and simulator iOS, please patch it

[brentvatne]

hey folks, i'm locking this thread because the problem that we originally created this issue for is resolved as far as we can reproduce. if you are encountering crashes related to navigation, then please create a new issue with a minimal reproducible example as per the issue report template. thank you!