App crashes using stack-navigation after upgrading from SDK 49 to 51 in react native expo

Question

I have upgraded my React Native Expo app from SDK 49 to SDK 51. Initially, everything seemed to be working fine. However, when I am attempting to navigate using my nested stack navigator, the app crashed without displaying any error messages.

I have tried to update package.json and and get error messages to display. packages are all up to date but no messages will display.

this is my package.json:

{
  "name": "friscohaar",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@expo/vector-icons": "^14.0.0",
    "@mui/icons-material": "^5.15.6",
    "@mui/material": "^5.14.19",
    "@react-native-community/checkbox": "^0.5.17",
    "@react-native-community/datetimepicker": "^7.7.0",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.20",
    "axios": "^1.6.7",
    "expo": "^51.0.1",
    "expo-blur": "^13.0.2",
    "expo-checkbox": "~3.0.0",
    "expo-image-picker": "~15.0.4",
    "expo-linear-gradient": "~13.0.2",
    "expo-location": "~17.0.1",
    "expo-status-bar": "~1.12.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-native": "0.74.1",
    "react-native-animatable": "^1.4.0",
    "react-native-calendars": "^1.1304.1",
    "react-native-datepicker": "^1.7.2",
    "react-native-dotenv": "^3.4.10",
    "react-native-elements": "^3.4.3",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-modern-datepicker": "^1.0.0-beta.91",
    "react-native-paper": "^5.11.6",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "~3.31.1",
    "react-native-size-matters": "^0.4.2",
    "react-native-status-bar-height": "^2.6.0",
    "typescript": "^5.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@types/react-native-modern-datepicker": "^1.0.5",
    "babel-plugin-inline-dotenv": "^1.7.0"
  },
  "private": true
}

Cimon

Answer 1

Thanks for posting~

I had the same issue after Expo Go automatically updated to 51, which caused the app to crash when using navigation.navigate.

To fix this, I added react-native-reanimated by running:

yarn add react-native-reanimated Make sure to install version 3.10.0

Then, I imported it into App.js or App.tsx:

import 'react-native-reanimated'

It appears this is a know issue with Expo, yet the update to Expo 51 was pushed to all Expo Go users anyway. The discussion is found at https://github.com/expo/expo/issues/28618

Leicester

not working with react-navigation, expo go crash – Arnone

Answer 2

This worked for me too. However, I merely ran npm i react-native-reanimated. I am using React Navigation and am not following the _layout.js pattern. Crazy to me they would push a breaking change like this to all users.

Chastise

Answer 3

Really, the problem occurs after the update exposdk v49.xx->50.00 . As the person above says, everything is quite simple:

• npm/yarl install react-native-reanimated, and:
• app.js -> import 'react-native-reanimated'; . Have a nice day everyone

Privy