fix(theme): provide nav theme so expo-router 57 keeps glass transparent - #296
Closed
RonenMars wants to merge 1 commit into
Closed
fix(theme): provide nav theme so expo-router 57 keeps glass transparent#296RonenMars wants to merge 1 commit into
RonenMars wants to merge 1 commit into
Conversation
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.
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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 }}>RNSScreenStack.mm:UINavigationController.view.backgroundColor(iOS-only)The app never provided a react-navigation theme, so the container falls back to
DefaultTheme's opaquergb(242,242,242)— covering the glass gradient rendered behind the<Stack>inapp/_layout.tsx.Fix
Wrap the Stack in expo-router's re-exported
ThemeProvider, based onDefaultTheme/DarkThemeper app color mode, overriding onlycolors.background:'transparent'(the gradient shows through the native container)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.tsxrendersThemedStack(now a named export) and asserts the nav theme it provides, plus the StackcontentStyle, for glass / dark / light themes against the real vendoredDefaultTheme/DarkTheme. Falsified against the regression: with the override removed it fails with the literal bug value (rgb(242, 242, 242)).Support changes:
\.css$jestmoduleNameMapperentry +__mocks__/style-mock.js, because the test importsapp/_layout.tsx, which importsglobal.css.Verification
Merge order
Land this before (or together with) #293 — inert on 57.0.2, required on ≥57.0.3.