Permalink
Browse files

ScrollView: `contentOffset` validatation now respects `contentInset`

Summary:
> The property contentInset can change the maximum and minimum values of the content offset to allow scrolling outside of the scrollable area. Its type is UIEdgeInsets, which consists of 4 numbers: {top, left, bottom, right}. When you introduce an inset, you change the range of the content offset. For example, setting the content inset to have a value of 10 for its top value allows the content offset’s y value to reach -10. This introduces padding around the scrollable area.
( https://www.objc.io/issues/3-views/scroll-view/ )

See also: #15395

Reviewed By: mmmulani

Differential Revision: D5607192

fbshipit-source-id: 1acd6a84e2bcfefc6e82861cfbdfe6247d0e4264
  • Loading branch information...
shergin authored and facebook-github-bot committed Aug 22, 2017
1 parent f0f25c5 commit 950c2b2a731e3319051ab5b3e7eaabe6a7372b8e
Showing with 2 additions and 5 deletions.
  1. +2 −5 React/Views/RCTScrollView.m
@@ -315,15 +315,12 @@ - (void)setFrame:(CGRect)frame
UIEdgeInsets contentInset = self.contentInset;
CGSize contentSize = self.contentSize;
CGSize fullContentSize = CGSizeMake(
contentSize.width + contentInset.left + contentInset.right,
contentSize.height + contentInset.top + contentInset.bottom);
CGSize boundsSize = self.bounds.size;
self.contentOffset = CGPointMake(
MAX(0, MIN(originalOffset.x, fullContentSize.width - boundsSize.width)),
MAX(0, MIN(originalOffset.y, fullContentSize.height - boundsSize.height)));
MAX(-contentInset.top, MIN(contentSize.width - boundsSize.width + contentInset.bottom, originalOffset.x)),
MAX(-contentInset.left, MIN(contentSize.height - boundsSize.height + contentInset.right, originalOffset.y)));
}
#if !TARGET_OS_TV

3 comments on commit 950c2b2

@stage88

This comment has been minimized.

Show comment
Hide comment
@stage88

stage88 Oct 5, 2017

Hi @shergin, I've installed RN 0.49.1, on initial render the offset doesn't look right. There seems to be an offset on top and left that was unexpected when setting these properties on a FlatList:

contentInset={{top: 64, bottom: 49}}
contentOffset={{y: -64}}

image

Changing to this instead seems to fix the issue:

self.contentOffset = CGPointMake(
    MAX(-contentInset.left, MIN(contentSize.width - boundsSize.width + contentInset.bottom, originalOffset.x)),
    MAX(-contentInset.top, MIN(contentSize.height - boundsSize.height + contentInset.right, originalOffset.y)));

stage88 replied Oct 5, 2017

Hi @shergin, I've installed RN 0.49.1, on initial render the offset doesn't look right. There seems to be an offset on top and left that was unexpected when setting these properties on a FlatList:

contentInset={{top: 64, bottom: 49}}
contentOffset={{y: -64}}

image

Changing to this instead seems to fix the issue:

self.contentOffset = CGPointMake(
    MAX(-contentInset.left, MIN(contentSize.width - boundsSize.width + contentInset.bottom, originalOffset.x)),
    MAX(-contentInset.top, MIN(contentSize.height - boundsSize.height + contentInset.right, originalOffset.y)));
@shergin

This comment has been minimized.

Show comment
Hide comment
@shergin

shergin Oct 5, 2017

Contributor

@stage88 Oh my, shame on me. 😢 😢 😢
Thank you so much! I will fix it soon. Or you can create PR and I will land it asap.

Contributor

shergin replied Oct 5, 2017

@stage88 Oh my, shame on me. 😢 😢 😢
Thank you so much! I will fix it soon. Or you can create PR and I will land it asap.

@shergin

This comment has been minimized.

Show comment
Hide comment
@shergin

shergin Oct 5, 2017

Contributor

@stage88 Oh, that was already fixed in 64be883.

Contributor

shergin replied Oct 5, 2017

@stage88 Oh, that was already fixed in 64be883.

Please sign in to comment.