Repository navigation
Conversation
…eArea on iOS react-native-safe-area-context's SafeAreaView pads every edge from the nearest SafeAreaProvider's insets regardless of where the view sits, so a header with useSafeArea gets bottom padding whenever the provider extends under a translucent tab bar (iOS 26 Liquid Glass). React Native's SafeAreaView insets only the edges the view actually touches, which is what useSafeArea means. Other platforms keep the safe-area-context SafeAreaView when it is installed.
Contributor
✅ PR Description Validation PassedAll required sections are properly filled out:
Your PR is good for review! 🚀 This validation ensures all sections from the PR template are properly filled. |
This branch has not been deployed
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.
Description
ViewwithuseSafeArearendersreact-native-safe-area-context'sSafeAreaViewwhenever that package is installed. That component pads every edge from the nearestSafeAreaProvider's insets regardless of where the view sits, so a header or spacer at the top of a screen gets bottom padding whenever the provider's view extends under a translucent bottom bar. This shows up on iOS 26 with the Liquid Glass tab bar (content is drawn behind the bar, provider bottom inset = tab bar + home indicator): auseSafeAreaheader grows by the tab bar height and<View useSafeArea/>spacers become visible bands.On iOS,
useSafeAreanow renders React Native'sSafeAreaView, which UIKit insets only on the edges the view actually touches (a top header gets the status bar, a bottom footer gets the bar, a view in the middle gets nothing). Android and web keep thereact-native-safe-area-contextSafeAreaViewwhen it is installed, as before. The prop doc describes the behaviour.No new props. Behaviour difference on iOS: a
useSafeAreaview that does not touch an edge no longer gets padding for that edge. Explicitedgespassed throughuseSafeAreaviews on iOS are no longer consumed (React Native'sSafeAreaViewhas no such prop).Validated with
yarn build:dev,yarn lintandyarn test(955 passed).Changelog
View - on iOS,
useSafeAreanow insets only the edges the view touches (React NativeSafeAreaView), so headers and spacers no longer pick up the bottom inset under translucent tab bars.Additional info
Needed for iOS 26 Liquid Glass tab bars in Wix apps; consumed by wix-react-native-ui-lib.