Skip to content

fix: status bar transparent with white background (#25)#27

Open
uri-ustrell wants to merge 1 commit into
masterfrom
feature/fix-status-bar-color
Open

fix: status bar transparent with white background (#25)#27
uri-ustrell wants to merge 1 commit into
masterfrom
feature/fix-status-bar-color

Conversation

@uri-ustrell
Copy link
Copy Markdown
Collaborator

Description

The Android status bar was appearing white when the app opened.

Root cause

The app has edgeToEdgeEnabled=true in android/gradle.properties (set by Expo prebuild), which forces the status bar to be fully transparent. Because the root JSX used a bare Fragment <> with no background color, the transparent status bar was showing the white window background behind it.

All previous approaches (statusBarColor in styles.xml, StatusBar.setBackgroundColor() at runtime) had no effect because edge-to-edge mode ignores them entirely.

Fix

Wrap the root JSX in a <View> with backgroundColor set to the app's brand color (#2797AF). The transparent status bar now shows the teal background through it instead of white. The existing marginTop: Constants.statusBarHeight on the WebView already ensured the content sat correctly below the status bar area.

Changes

  • App.js: wrap <> fragment with <View style={{ flex: 1, backgroundColor: '#2797AF' }}> and add corresponding appContainer style

Closes #25

@uri-ustrell uri-ustrell requested a review from sseerrggii May 27, 2026 12:58
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.

Status Bar color

1 participant