Skip to content

Commit

Permalink
ScrollView: contentOffset validatation now respects contentInset
Browse files Browse the repository at this point in the history 
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 @facebook-github-bot
shergin authored and facebook-github-bot committed Aug 22, 2017
1 parent f0f25c5 commit 950c2b2
Showing 1 changed file with 2 additions and 5 deletions.
7 changes: 2 additions & 5 deletions React/Views/RCTScrollView.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

3 comments on commit 950c2b2

@stage88
Copy link

@stage88 stage88 commented on 950c2b2 Oct 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

@shergin shergin commented on 950c2b2 Oct 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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
Copy link
Contributor Author

@shergin shergin commented on 950c2b2 Oct 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Please sign in to comment.