react-navigation / react-navigation/react-navigation

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

Open
#11,635 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug platform:ios repro provided
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.