Skip to content

Commit 7a4753d

Browse files
emilioicaifacebook-github-bot
authored andcommitted
tapping on iOS status bar should scroll inverted ScrollViews to their 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
1 parent 35dd2e0 commit 7a4753d

File tree

3 files changed

+8
-0
lines changed

3 files changed

+8
-0
lines changed

React/Views/ScrollView/RCTScrollView.h

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
@property (nonatomic, assign) BOOL snapToStart;
5252
@property (nonatomic, assign) BOOL snapToEnd;
5353
@property (nonatomic, copy) NSString *snapToAlignment;
54+
@property (nonatomic, assign) BOOL inverted;
5455

5556
// NOTE: currently these event props are only declared so we can export the
5657
// event names to JS - we don't call the blocks directly because scroll events

React/Views/ScrollView/RCTScrollView.m

+6
Original file line numberDiff line numberDiff line change
@@ -829,6 +829,12 @@ - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView
829829
return NO;
830830
}
831831
}
832+
833+
if (self.inverted) {
834+
[self scrollToEnd:YES];
835+
return NO;
836+
}
837+
832838
return YES;
833839
}
834840

React/Views/ScrollView/RCTScrollViewManager.m

+1
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ - (UIView *)view
9898
RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollBegin, RCTDirectEventBlock)
9999
RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollEnd, RCTDirectEventBlock)
100100
RCT_EXPORT_VIEW_PROPERTY(DEPRECATED_sendUpdatedChildFrames, BOOL)
101+
RCT_EXPORT_VIEW_PROPERTY(inverted, BOOL)
101102
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
102103
RCT_EXPORT_VIEW_PROPERTY(contentInsetAdjustmentBehavior, UIScrollViewContentInsetAdjustmentBehavior)
103104
#endif

0 commit comments

Comments
 (0)