react-navigation / react-navigation/react-navigation
Drawer navigation crashes in production build, dev build on simulator runs fine
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
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
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @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 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the complete reproduction repository and the App.tsx, package.json, and eas.json examples in the report. Reproduce the iOS preview or production build with Expo 49 and the drawer navigator, then compare it with the reported Expo 48 setup. Done means the release build launches without crashing while drawer navigation remains usable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100