Skip to content

Repo: Navigation context error triggered by NativeWind shadow-* toggle in Expo Router (Expo 53) #264

@SammyTBrains

Description

@SammyTBrains

Summary

I’m providing a minimal, runnable reproduction for a navigation error that occurs intermittently when using NativeWind with Expo Router and React Navigation.

This follows up on my earlier report and community discussion; this time a clean repo is included.
nativewind/nativewind#1536

🔗 Repo link

Repo: https://github.com/SammyTBrains/nativewind-shadow-switch

Environment

  • expo: 53.0.20
  • expo-router: 5.1.4
  • react-native: 0.79.5
  • nativewind: ^4
  • react-native-gesture-handler: ~2.24.0
  • react-native-reanimated: 3.17.4
  • react-native-safe-area-context: 5.4.0
  • react-native-screens: 4.11.1

Steps to reproduce

  1. Install dependencies
  2. Start the app
  3. On the home screen, toggle Phone/Email a few times (both buttons use shadow-sm and bg-white/30)
  4. Tap Go to next screen
  5. Intermittently, navigation fails with:
Couldn’t find a navigation context

✅ Expected

Navigation should work consistently after toggling.

❌ Actual

After toggling the conditional className with shadow-* utilities, navigation occasionally breaks with the above error.

Notes and workaround

  • Removing shadow-* (e.g., shadow-sm) and opacity shorthand (bg-white/30) from the conditional toggle eliminates the issue.
  • Using equivalent inline styles for shadows/opacity avoids the crash.

Related links


Thanks for taking a look 🙏.

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs reproductionIssue needs a minimal reproduction before it can be worked on

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions