fix(tabs): use background color for top safe area so status bar matches#108
Open
yashpatil27 wants to merge 1 commit into
Open
fix(tabs): use background color for top safe area so status bar matches#108yashpatil27 wants to merge 1 commit into
yashpatil27 wants to merge 1 commit into
Conversation
The tabs layout SafeAreaView filled the top safe-area (status bar) with colors.surface, while every tab screen below it uses colors.background for its content. That mismatch shows up as a grey bar over black content in dark mode, and a pure-white bar over off-white content in light mode. Switching the SafeAreaView background to colors.background makes the status bar area blend seamlessly with the page below. The bottom tab bar keeps its own colors.surface via tabBarStyle, so it is unaffected.
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
On tab screens, the status bar area appeared as a different color than the rest of the screen:
#1C1C1E) over black content (#000000)#FFFFFF) over off-white content (#F2F2F7)The cause was
app/(tabs)/_layout.tsx: the topSafeAreaViewwas filled withcolors.surface, while each tab screen renders its body withcolors.background.Fix
Set the tabs layout
SafeAreaViewbackground tocolors.backgroundso the status bar area blends seamlessly with the page below. Theedges={['top']}constraint means this only affects the top safe area; the bottom tab bar keeps its owncolors.surfacestyling viatabBarStyle.backgroundColorand is unaffected.Tested
colors.backgroundfor their own top safe area and are unchanged.