fix(navigation): paint scene background to remove white flicker#912
Conversation
The NavigationContainer was rendered without a theme, so React Navigation fell back to its light DefaultTheme (background rgb(242,242,242)). Native Stack uses the theme's colors.background as each screen's default contentStyle background, so the light native scene container showed through during transitions — most visibly as a white flicker at the iOS modal's rounded corners while a screen slides in horizontally (e.g. the Send flow's slide_from_right push). Set a dark NAVIGATION_THEME (extends DarkTheme, overrides background/card with the app's #161616 surface token) on the NavigationContainer so the native scene background is dark everywhere. This is a central fix covering every navigator and screen rather than patching a single flow. NAVIGATION_THEME lives in its own config/navigationTheme module rather than config/theme so the design-token file stays free of the React Navigation dependency — config/theme is imported by nearly every component, and several component tests replace @react-navigation/native with an inline mock that omits DarkTheme. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
CassioMG
changed the title
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
There was a problem hiding this comment.
Pull request overview
Adds an explicit React Navigation theme at the app root so native stack scenes render with the app’s dark surface color during transitions, preventing the brief white “flash” that can appear (notably around iOS modal rounded corners) before JS layout paints.
Changes:
- Introduces a dedicated
NAVIGATION_THEMEthat extends React Navigation’sDarkThemebut uses the app’s design-token surface forcolors.background(andcolors.card). - Applies
NAVIGATION_THEMEto the top-level<NavigationContainer>inApp.tsx. - Adds a unit test asserting the navigation theme does not fall back to
DefaultTheme’s light background.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/config/navigationTheme.ts |
Defines NAVIGATION_THEME to force a dark native scene background consistent with app tokens. |
src/components/App.tsx |
Wires the navigation theme into the root NavigationContainer. |
__tests__/config/navigationTheme.test.ts |
Verifies the theme background/card match app surface tokens and differs from DefaultTheme. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
iOS Simulator preview build is ready: https://github.com/stellar/freighter-mobile/releases/tag/untagged-62c3c7740b60a820fbfe (SDF collaborators only — install instructions in the release description) |
What
Sets an explicit dark theme (
NAVIGATION_THEME) on the top-levelNavigationContainerso the native screen background is dark everywhere. Central fix for the white flicker reported in #899 (comment).Why
Without a
theme, React Navigation defaults to its light theme, which Native Stack uses as each screen's nativecontentStylebackground — briefly revealed (as a white flash at the corners) during transitions before the dark JS layout paints. See the JSDoc inconfig/navigationTheme.tsfor the full breakdown.Before fix
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-06-23.at.12.30.20.mov
Screen.Recording.2026-06-23.at.12.37.59.mov
After fix
after-fix.mov
Screen.Recording.2026-06-23.at.12.37.11.mov
Checklist
PR structure
Testing
Release
🤖 Generated with Claude Code