Repository navigation
Conversation
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
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
Context
Optional but intended follow-up to #59194.
#59194 fixed the documented behaviour of
ScrollView/FlatListcontentInsetAdjustmentBehaviorby handling safe area padding across the scrollable axis, such as the rail on iPhone Duo and the notch on a regular iPhone in landscape.This diff
Proposes a further update to
contentInsetAdjustmentBehaviorand how it interacts with padding set bycontentContainerStyle.The lowdown: This PR moves from an "add padding" approach to "use greatest of padding or safe area", per edge.
The aim is to make React Native's scroll views work intuitively:
Changes
Make the safe area a floor on the container's padding rather than an addition: an edge takes the larger of its
contentContainerStylepadding and the inset. This keeps content aligned with the safe area edge instead of leaving a second gutter under the rail or beside the notch.padding: 20container on a folded iPhone Duo keeps 20 pt on the open side and sits at the rail on the other, where it had the rail plus 20 pt.Android is untouched: its scroll view has no safe area handling across the scrollable axis to clamp.
Changelog:
[iOS][Breaking] - ScrollView:
contentInsetAdjustmentBehaviornow pads content by the larger of the safe area orcontentContainerStylepadding. Previously, it added the two.Test Plan
RNTester, ScrollView > Content Inset Adjustment Behavior, full screen modal under
automatic, withpadding: 20on the content container (added to the example in this PR). Before is the stack base #59194 with the same example change; after is this PR.