Skip to content

Commit

Permalink
tapping on iOS status bar should scroll inverted ScrollViews to their…
Browse files Browse the repository at this point in the history
… top (#27574)

Summary:
React Native ScrollViews are flipped upside down when the prop inverted is set to true. This is the root of a bug: tapping on the status bar in iOS should scroll the Flatlist up to the top but currently it does to the bottom.

The solution proposed is to detect natively if the ScrollView is inverted, on such case, prevent it from scrolling it to the beginning of the ScrollView (as a non-inverted ScrollView would do) and force a scroll to the end of it.

I've been careful enough not to force the scroll if the user explicitly selected not to do it or if it's happening in a nested ScrollView, as it is the default behaviour in iOS.

Fixes #21126

## Changelog

[iOS] [Fixed] - Inverted ScrollViews scroll to their bottom when the status bar is pressed
Pull Request resolved: #27574

Test Plan:
- on iOS, add a ScrollView and put enough content to overflow the screen size so it can be scrolled
- add the prop `inverted={true}` to the ScrollView
- go to the screen the Scrollview is in and press the status bar
- it should scroll to top (previously it scrolled to the bottom)

![v](https://user-images.githubusercontent.com/807710/71188640-a0ac6680-2281-11ea-91a7-d1e46aba8b14.gif)

Differential Revision: D19185270

Pulled By: hramos

fbshipit-source-id: 5445093ff38f4ba4082f1d883d8ed087e9565eaf
  • Loading branch information
emilioicai authored and facebook-github-bot committed Dec 19, 2019
1 parent 35dd2e0 commit 7a4753d
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 0 deletions.
1 change: 1 addition & 0 deletions React/Views/ScrollView/RCTScrollView.h
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
@property (nonatomic, assign) BOOL snapToStart;
@property (nonatomic, assign) BOOL snapToEnd;
@property (nonatomic, copy) NSString *snapToAlignment;
@property (nonatomic, assign) BOOL inverted;

// NOTE: currently these event props are only declared so we can export the
// event names to JS - we don't call the blocks directly because scroll events
Expand Down
6 changes: 6 additions & 0 deletions React/Views/ScrollView/RCTScrollView.m
Original file line number Diff line number Diff line change
Expand Up @@ -829,6 +829,12 @@ - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView
return NO;
}
}

if (self.inverted) {
[self scrollToEnd:YES];
return NO;
}

return YES;
}

Expand Down
1 change: 1 addition & 0 deletions React/Views/ScrollView/RCTScrollViewManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ - (UIView *)view
RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollBegin, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollEnd, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(DEPRECATED_sendUpdatedChildFrames, BOOL)
RCT_EXPORT_VIEW_PROPERTY(inverted, BOOL)
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
RCT_EXPORT_VIEW_PROPERTY(contentInsetAdjustmentBehavior, UIScrollViewContentInsetAdjustmentBehavior)
#endif
Expand Down

1 comment on commit 7a4753d

@hirbod
Copy link

@hirbod hirbod commented on 7a4753d Jun 25, 2020

Choose a reason for hiding this comment

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

@emilioicai sorry for commenting an "old" ticket, but Expo SDK just released with RN 0.62.2 and that fix is included there finally. Your change works fine so far, the direction works, but only when I scroll "up" at least 1px. If my chat scroll position is "0", the press on the StatusBar won't do anything for me now.

Please sign in to comment.