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

marklawlor · 2024-05-03T22:57:56Z

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. 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. If you don't have one already, you can use this as a template.

import { Slot } from 'expo-router';

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

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 is automatically configured in babel-preset-expo when you install the library.

3. Import `react-native-reanimated`

Import react-native-reanimated in the root _layout

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

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

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

// App.ts
import 'react-native-reanimated'

export function App() {
 // ...
}

The text was updated successfully, but these errors were encountered:

tomekzaw · 2024-05-05T13:30:58Z

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:

Fix EXC_BAD_ACCESS crash on iOS in [REAAnimationsManager clearSharedTransitionConfigForTag:] software-mansion/react-native-reanimated#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 · 2024-05-06T21:10:11Z

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 · 2024-05-07T20:15:42Z

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

Luke-Pisano · 2024-05-08T22:10:52Z

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 · 2024-05-09T05:25:06Z

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

tomekzaw · 2024-05-10T06:12:37Z

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';

marklawlor · 2024-05-12T23:47:13Z

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

FilipCorba · 2024-05-13T07:13:02Z

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 · 2024-05-13T13:57:36Z

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 · 2024-05-13T14:52:42Z

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 · 2024-05-13T15:35:58Z

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 · 2024-05-13T23:38:00Z

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 · 2024-05-14T00:28:09Z

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 · 2024-05-14T00:56:14Z

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 · 2024-05-14T05:57:35Z

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 · 2024-05-14T12:33:30Z

@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 · 2024-05-14T15:53:01Z

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 · 2024-05-14T17:14:05Z

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

Sheriff-Oladimeji · 2024-05-15T22:50:22Z

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 · 2024-05-15T22:58:47Z

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 · 2024-05-15T23:22:37Z

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!

marklawlor added the Router expo-router label May 3, 2024

marklawlor self-assigned this May 3, 2024

expo-bot added the incomplete issue: missing or invalid repro A minimal reproducible example is required for most issues label May 3, 2024

expo-bot closed this as completed May 3, 2024

expo deleted a comment from expo-bot May 3, 2024

marklawlor reopened this May 3, 2024

marklawlor removed the incomplete issue: missing or invalid repro A minimal reproducible example is required for most issues label May 3, 2024

marklawlor mentioned this issue May 3, 2024

[Expo 51 Beta][iOS] Expo Go app crashes when switching back to previous tab #28508

Closed

brentvatne changed the title ~~Expo Router crashes in SDK51 (clearSharedTransitionConfigForTag crash)~~ Known issue: Expo Router may crash in SDK 51 when switching tabs when used without Reanimated installed (clearSharedTransitionConfigForTag crash) May 4, 2024

brentvatne pinned this issue May 7, 2024

This comment was marked as off-topic.

Sign in to view

alfjesus mentioned this issue May 8, 2024

Typed routes not working in Expo 51 and Expo router #28680

Open

This comment was marked as resolved.

Sign in to view

This comment was marked as off-topic.

Sign in to view

brentvatne closed this as completed May 14, 2024

expo locked as resolved and limited conversation to collaborators May 15, 2024

brentvatne unpinned this issue May 15, 2024

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

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

Comments

marklawlor commented May 3, 2024 • edited

Issue Identification

Expo Router Workaround

1. Create a top level _layout file (if you don't have one yet).

2. Install react-native-reanimated

3. Import react-native-reanimated

React Navigation Workaround

tomekzaw commented May 5, 2024 • edited

marklawlor commented May 6, 2024 • edited

Development clients & production builds

Expo Go

jpdriver commented May 7, 2024 • edited

This comment was marked as off-topic.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

Luke-Pisano commented May 8, 2024

marklawlor commented May 9, 2024

This comment was marked as off-topic.

This comment was marked as off-topic.

tomekzaw commented May 10, 2024

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

marklawlor commented May 12, 2024

This comment was marked as off-topic.

FilipCorba commented May 13, 2024

saeid-elio commented May 13, 2024

Development clients & production builds

Expo Go

graniteroad commented May 13, 2024 • edited

ECKSTASYY commented May 13, 2024

ramnoah commented May 13, 2024

graniteroad commented May 14, 2024

ramnoah commented May 14, 2024 • edited

brentvatne commented May 14, 2024

xixixao commented May 14, 2024 • edited

graniteroad commented May 14, 2024

brentvatne commented May 14, 2024

Sheriff-Oladimeji commented May 15, 2024

ottosamatori commented May 15, 2024 • edited

brentvatne commented May 15, 2024 • edited

marklawlor commented May 3, 2024 •

edited

1. Create a top level `_layout` file (if you don't have one yet).

2. Install `react-native-reanimated`

3. Import `react-native-reanimated`

tomekzaw commented May 5, 2024 •

edited

marklawlor commented May 6, 2024 •

edited

jpdriver commented May 7, 2024 •

edited

graniteroad commented May 13, 2024 •

edited

ramnoah commented May 14, 2024 •

edited

xixixao commented May 14, 2024 •

edited

ottosamatori commented May 15, 2024 •

edited

brentvatne commented May 15, 2024 •

edited