React Navigate Drawer Button behaves differently when using eas build and eas update

[marvimarv]

Build/Submit details page URL

https://expo.dev/accounts/marvimarv93/projects/wedventure/builds/ba78649e-beee-4113-a9b5-2793f582d416

Summary

I have a super weird problem that I have been trying to solve for a few weeks now.

In both pictures you can see my app, with the difference, that the Button of the Drawer in the top left is invisible on the first picture. The only time it is invisible, is when having an app in production. It works in the no-dev minify version, the development build, but not in the production or preview build.
I tried so many things to figure out what is happening and now I came across my newest finding: When I install the production app and then do an eas update without any changes at all. The button reappears and stays. So basically after the OTA update has been published to my phone the button stays. However when I reinstall the app from TestFlight it is gone until I receive the OTA update again. It doesn't make any sense, as I have changed nothing.

Also today I tried to prebuild to see what happens inside Xcode and its own debugger and preview. The button is visible there as well.

I really don't know what else to try so maybe someone has any kind of idea. I am already thinking it might be a problem in the way JS is compiled or how the app is build, as it seems to be different in production and development.

Managed or bare?

Bare

Environment

[email protected]
Ok to proceed? (y) y

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.4.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.0 - /usr/local/bin/node
npm: 10.2.4 - /usr/local/bin/npm
Watchman: 2024.03.18.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.15.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode: 15.4/15F31d - /usr/bin/xcodebuild
npmPackages:
@expo/metro-config: ^0.18.1 => 0.18.4
expo: ~51.0.8 => 51.0.8
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.74.1 => 0.74.1
react-native-web: ~0.19.6 => 0.19.11
npmGlobalPackages:
eas-cli: 9.0.7
Expo Workflow: bare

++
marvinhackfort@Marvins-MacBook-Pro-2 wedventure % npx expo-doctor
Warning: Root-level "expo" object found. Ignoring extra keys in Expo config: "web", "plugins", "owner"
Learn more: https://expo.fyi/root-expo-object
✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check npm/ yarn versions
✔ Check for issues with metro config
✔ Check for common project setup issues
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check native tooling versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

Error output

No response

Reproducible demo or steps to reproduce from a blank project

I don't know what else to share exactly. Everything is written above.

[marvimarv]

For anyone else getting this error: I have added a manual Ionicons Icon and this one stays:

Before:
<Drawer.Navigator
initialRouteName="BrideGroomMain"
drawerContent={(props) => <CustomDrawerContent {...props} />}
screenOptions={({ navigation }) => ({
headerStyle: { backgroundColor: theme["color-info-200"] },
headerTintColor: "black",
headerShown: true,
swipeEnabled: false,
gestureEnabled: false,
drawerStyle: { backgroundColor: theme["color-info-200"] },
onDrawerOpen: () => {
if (!firstTimeSetupCompleted) {
console.log("Drawer will be closed because setup is not completed");
navigation.closeDrawer();
}
},
})}
>

After:
<Drawer.Navigator
initialRouteName="BrideGroomMain"
drawerContent={(props) => <CustomDrawerContent {...props} />}
screenOptions={({ navigation }) => ({
headerStyle: { backgroundColor: theme["color-info-200"] },
headerTintColor: "black",
headerShown: true,
swipeEnabled: false,
gestureEnabled: false,
drawerStyle: { backgroundColor: theme["color-info-200"] },
headerLeft: ({ tintColor }) => ( // Custom icon
<Ionicons
name="menu"
size={30}
color={tintColor}
style={{ marginLeft: 20 }}
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
),
onDrawerOpen: () => {
if (!firstTimeSetupCompleted) {
console.log("Drawer will be closed because setup is not completed");
navigation.closeDrawer();
}
},
})}
>