Minimal reproducible example

https://github.com/mazeincoding/expo-router-transparent-bg-bug

Which package manager are you using? (Yarn is recommended)

npm

If the issue is web-related, please select the bundler (web.bundler in the app.json)

metro

Summary

Expected Behavior

When setting contentStyle: { backgroundColor: "transparent" } on the Stack navigator, the Stack's background should be completely transparent, allowing the ImageBackground component to be fully visible underneath the Stack's content.

Actual Behavior

On iOS:

1. The Stack navigator adds a solid white background layer
2. This white layer appears between the ImageBackground and the Stack's content
3. The white background persists regardless of:
   • Setting contentStyle: { backgroundColor: "transparent" }
   • Setting presentation: "transparentModal"
   • Setting transparent backgrounds on all child components
   • Setting headerStyle: { backgroundColor: "transparent" }

The issue is consistently reproducible on:

• iOS with Expo Go (iPhone 11, iOS 18.1)

This makes it impossible to achieve a transparent Stack navigation over a background image.

Notice: I only verified the issue on iOS. I have not had a chance to test Android.

Environment

System:
  OS: Windows 11 10.0.22631
Binaries:
  Node: 22.11.0
  Yarn: 1.22.22
  npm: 10.8.1
IDEs:
  Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6200805
npmPackages:
  expo: ~52.0.7 => 52.0.7
  expo-router: ~4.0.6 => 4.0.6
  react: 18.3.1 => 18.3.1
  react-dom: 18.3.1 => 18.3.1
  react-native: 0.76.2 => 0.76.2
  react-native-web: ~0.19.13 => 0.19.13
Expo Workflow: managed