Drawer navigation crashes in production build, dev build on simulator runs fine

[ddehghan]

Current behavior

The preview or production build crash on load of the app. The development build works fine in simulator.

the complete repro :https://github.com/ddehghan/bug-nav The core of the code is below.

• After a lot of investigation I have narrowed this down to only crashing on drawer. The stack navigation works fine.
• including "import "react-native-gesture-handler";" at the top or removing it does not make a difference. it crashes again.
• "eas build --profile preview --platform ios --local --clear-cache" succeeds but it crashed on start.
• expo 48, after running expo fix to downgrade all the libs works correctly

App.tsx

import "react-native-gesture-handler";

import React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    <Text>Home Screen</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    <Text>Settings Screen</Text>
  </View>
);

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "update": "npx npm-check --skip-unused -u",
    "start": "expo start -c",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "setup": "npm run clean && rm -rf node_modules && rm package-lock.json || true && npm i && npm run install:ios",
    "clean": "watchman watch-del-all && rm -rf /Volumes/SSD2/build/*",
    "local:preview": "npm run clean && eas build --profile preview --platform ios --local --clear-cache",
    "fix": "npx expo install --fix",
    "pre": "npx expo prebuild --clean",
    "install:ios": "npm run pre && npx pod-install ios"
  },
  "dependencies": {
    "@react-navigation/drawer": "6.6.4",
    "@react-navigation/native": "6.1.8",
    "eas-cli": "5.4.0",
    "expo": "~49.0.13",
    "react": "18.2.0",
    "react-native": "0.72.5",
    "react-native-screens": "~3.22.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-reanimated": "3.5.4",
    "react-native-gesture-handler": "~2.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

eas.json:

{
  "cli": {
    "version": ">= 5.4.0",
    "promptToConfigurePushNotifications": false
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "ios": {
        "autoIncrement": "version"
      },
      "distribution": "internal"
    },
    "staging": {
      "ios": {
        "autoIncrement": "version"
      },
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "production": {
      "android": {
        "buildType": "apk"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

Expected behavior

No crash.

Reproduction

https://github.com/ddehghan/bug-nav

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [X] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [ ] @react-navigation/native-stack
• [ ] react-native-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.8
@react-navigation/drawer	6.6.4
react-native	0.72.5
expo	49.0.13
node	18.17.1
npm	9.8.1
EAS Client	5.4.0

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• react-native-tab-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[kpregmi1]

I am facing a similar issue. Drawer Navigator works fine when the app is run in an iOS simulator or a device using XCode, but crashes immediately on the prod version released from App Store Connect. I have drawerPosition set to right, the app crashes when I try to pull the drawer to the screen by dragging the right side of the screen. Any advice ??

"@react-navigation/drawer": "^6.6.6",
"@react-navigation/native": "^6.1.9",

[gaufranc]

I am facing a similar issue. Drawer Navigator works fine when the app is run in an iOS simulator or a device using XCode, but crashes immediately on the prod version released from App Store Connect. I have drawerPosition set to right, the app crashes when I try to pull the drawer to the screen by dragging the right side of the screen. Any advice ??

"@react-navigation/drawer": "^6.6.6",
"@react-navigation/native": "^6.1.9",

any luck fixing it? currently facing the same issue, only on production builds on android (both .apk and .aab)

[kpregmi1]

I have not been able to figure that out. I tried the navigation and drawer packages on a simple app, and it seems to work. But, in my app, it crashes as soon as I make contact on the edge of the screen where I pull the drawer from.

[gaufranc]

I have not been able to figure that out. I tried the navigation and drawer packages on a simple app, and it seems to work. But, in my app, it crashes as soon as I make contact on the edge of the screen where I pull the drawer from.

exactly the same scenario here. I did a button too to test instead of pulling, and still the same problem (app either frezzes or drawer glitches). Im thinking on just making my custom drawer at this point, been debugging this for 5 straight days now

[kapilcapitalmind]

Same for me, Works fine when run it as development on simulator and physical device. But crashes when i create a build a build with production variant.

[gaufranc]

For reference, im pretty sure this wont be the case of you guys, but my problem was related to icons/splash images for some weird reason that i cannot explain. If you have custom vars on images/splash, revert all the changes made in app.json and delete all the images (yes, it sounds weird) and try again. In my case, that was the issue. I spent over 4 days going from commit to commit to see where the problem was, and of course those commits were the last ones (since it seems to be totally unrelated).

[kpregmi1]

For reference, im pretty sure this wont be the case of you guys, but my problem was related to icons/splash images for some weird reason that i cannot explain. If you have custom vars on images/splash, revert all the changes made in app.json and delete all the images (yes, it sounds weird) and try again. In my case, that was the issue. I spent over 4 days going from commit to commit to see where the problem was, and of course those commits were the last ones (since it seems to be totally unrelated).

My app.json looks like this: { "name": "appName", "displayName": "appDisplayName" } Did your look any different? And, also what does vars mean? Thanks.

[neeleshyadav253]

Downgrade @react-navigation/drawer to version 6.6.3: You decided to downgrade the @react-navigation/drawer package to version 6.6.3 to ensure compatibility.

Upgrade react-native-reanimated to version 3.5.3: You upgraded the react-native-reanimated package to version 3.5.3 to take advantage of the latest bug fixes and improvements.

Steps to Implement Update package.json: Ensure your package.json includes the specific versions you want to use:

{ "dependencies": { "react-native-reanimated": "3.5.3", "@react-navigation/drawer": "6.6.3", // other dependencies } }

Install the specific versions: Run the following commands to install the specific versions of the packages:

npm install [email protected] @react-navigation/[email protected] or if you are using Yarn:

yarn add [email protected] @react-navigation/[email protected] Clear Metro Bundler cache: Clear the cache to avoid any stale data issues:

npx react-native start --reset-cache Rebuild the project:

For Android:

cd android ./gradlew clean cd .. npx react-native run-android For iOS:

cd ios pod install cd .. npx react-native run-ios Final package.json Here is an example of the final package.json with the updated versions:

json Copy code { "name": "YourProjectName", "version": "0.0.1", "private": true, "scripts": { "start": "react-native start", "android": "react-native run-android", "ios": "react-native run-ios", "test": "jest" }, "dependencies": { "react": "17.0.2", "react-native": "0.65.1", "react-native-reanimated": "3.5.3", "@react-navigation/drawer": "6.6.3", // other dependencies }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "eslint": "^7.14.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.64.0", "react-test-renderer": "17.0.2" }, "jest": { "preset": "react-native" } }