-
Notifications
You must be signed in to change notification settings - Fork 23
Open
Labels
needs reproductionIssue needs a minimal reproduction before it can be worked onIssue needs a minimal reproduction before it can be worked on
Description
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
- Install dependencies
- Start the app
- On the home screen, toggle Phone/Email a few times (both buttons use
shadow-smandbg-white/30) - Tap Go to next screen
- 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
- Previous issue I opened: 🚨 CRITICAL: NativeWind CSS Interop Race Condition Breaks Navigation in Expo Router Apps nativewind#1536
- Similar Expo thread/comment: Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions. expo/expo#38191 (comment)
Thanks for taking a look 🙏.
ethan-krich, sajadghawami, FloFlorinsen, ryanbae94, MrPand-21 and 5 moreleouie28 and Burzo
Metadata
Metadata
Assignees
Labels
needs reproductionIssue needs a minimal reproduction before it can be worked onIssue needs a minimal reproduction before it can be worked on