Skip to content

fix(theme): provide nav theme so expo-router 57 keeps glass transparent - #296

Closed
RonenMars wants to merge 1 commit into
mainfrom
fix/glass-nav-theme
Closed

fix(theme): provide nav theme so expo-router 57 keeps glass transparent#296
RonenMars wants to merge 1 commit into
mainfrom
fix/glass-nav-theme

Conversation

@RonenMars

Copy link
Copy Markdown
Owner

Problem

Selecting Apple Glass → Aurora renders a flat light-grey screen instead of the aurora gradient once expo-router is bumped past 57.0.2 (dependabot PR #293, currently open, reproduced on the 2026-07-11 integration branch).

expo-router 57.0.3 (upstream expo/expo#47121, an iOS swipe-back white-flash fix) started painting the native stack container with the react-navigation theme's colors.background:

  • build/react-navigation/native-stack/views/NativeStackView.native.js: <ScreenStack nativeContainerStyle={{ backgroundColor: colors.background }}>
  • → react-native-screens RNSScreenStack.mm: UINavigationController.view.backgroundColor (iOS-only)

The app never provided a react-navigation theme, so the container falls back to DefaultTheme's opaque rgb(242,242,242) — covering the glass gradient rendered behind the <Stack> in app/_layout.tsx.

Fix

Wrap the Stack in expo-router's re-exported ThemeProvider, based on DefaultTheme/DarkTheme per app color mode, overriding only colors.background:

  • glass → 'transparent' (the gradient shows through the native container)
  • non-glass → theme.bg.primary (also upgrades the iOS swipe-back gap from white/grey to the theme background)

This adopts the public react-navigation theming contract — the exact mechanism the upstream change was designed around. On expo-router 57.0.2 (current main) the container prop doesn't exist yet, so the provider is a behavioral no-op there: this PR can merge before #293 and glass never breaks.

Test

__tests__/unit/components/themed-stack-nav-theme.test.tsx renders ThemedStack (now a named export) and asserts the nav theme it provides, plus the Stack contentStyle, for glass / dark / light themes against the real vendored DefaultTheme/DarkTheme. Falsified against the regression: with the override removed it fails with the literal bug value (rgb(242, 242, 242)).

Support changes: \.css$ jest moduleNameMapper entry + __mocks__/style-mock.js, because the test imports app/_layout.tsx, which imports global.css.

Verification

  • New test 3/3 green; 3/3 red with the fix reverted (exact regression values)
  • Full unit suite green (54/54 suites, 513/513 tests on expo-router 57.0.2)
  • TypeScript clean

Merge order

Land this before (or together with) #293 — inert on 57.0.2, required on ≥57.0.3.

expo-router ≥57.0.3 paints the native stack container with the
react-navigation theme's colors.background. Without an app-provided theme,
it falls back to DefaultTheme's opaque rgb(242,242,242), covering the glass
gradient backdrop.

Wrap the Stack in expo-router's ThemeProvider with colors.background =
'transparent' under glass themes and theme.bg.primary otherwise, matching
the app's color mode. This adopts the public theming contract the upstream
change was designed around and is a no-op on expo-router 57.0.2 (current main).

Also adds regression test + jest CSS mapping.
@RonenMars

Copy link
Copy Markdown
Owner Author

Superseded by #297, which carries the identical nav-theme fix plus the synced ios/Podfile.lock for the 57.0.4 / camera 57.0.1 / worklets 0.10.2 bumps.

@RonenMars RonenMars closed this Jul 12, 2026
@RonenMars
RonenMars deleted the fix/glass-nav-theme branch July 15, 2026 15:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant