fix(mobile): dark mode error screen readability and splash flash#85
Open
GSTJ wants to merge 2 commits into
Open
fix(mobile): dark mode error screen readability and splash flash#85GSTJ wants to merge 2 commits into
GSTJ wants to merge 2 commits into
Conversation
The NetworkBoundary error screen (fire/flask illustration) had no background of its own, so it rendered directly over the native window. When the styled-components theme and the window appearance disagreed (forced theme vs system scheme), the light theme's navy text landed on a black backdrop and was unreadable in dark mode. Give the container an explicit theme background so text and backdrop always come from the same theme object: readable in every combination, light mode visually unchanged.
…s forced The in-app theme override only lived in AsyncStorage and was applied at JS runtime via Appearance.setColorScheme, so every cold start rendered the native splash and the first JS frames with the SYSTEM appearance and then flipped: users who forced dark mode on a light-mode device booted into ~2s of white splash slamming to black. Fixes, layered so every boot phase agrees on the theme: - New withInitialThemeOverride config plugin injects a snippet into AppDelegate.swift that reads the forced theme from UserDefaults (mirrored by ThemeProvider via RN Settings) and sets the window's overrideUserInterfaceStyle before the splash renders. The splash storyboard's color asset already has a dark variant, so the splash now resolves dark from the first in-process frame - and RN's Appearance reports the forced scheme immediately too. - ThemeProvider now derives the theme from the user's stored choice first (system scheme as fallback) instead of relying on the setColorScheme side effect, wraps children in React Navigation's ThemeProvider so screen containers stop defaulting to white, and syncs the window background via expo-system-ui on theme change. - The stored-theme read starts at module scope and _layout keeps the native splash visible until it has been applied, so the first visible JS frame is already themed. Version bumped to 1.4.1 (native change, per the app.config convention). Verified on the iPhone 17 Pro Max sim: forced-dark + system-light boots into a dark splash (only the OS-drawn pre-process launch image still follows the system, an iOS limit), system-dark boots fully dark, light mode boots clean with no dark flashes.
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
1 participant
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.
Summary
The generic error screen is readable in dark mode now, and cold starts no longer flash a white splash before going dark.
Details
Testing steps