mirror of
https://github.com/status-im/react-native.git
synced 2025-01-09 17:15:54 +00:00
9dee696ed8
Summary: **Motivation** A basic task of making a React Native ScrollView or ListView scroll to the bottom is currently very hard to accomplish: - https://github.com/facebook/react-native/issues/8003 - https://github.com/facebook/react-native/issues/913 - http://stackoverflow.com/questions/29829375/how-to-scroll-to-bottom-in-react-native-listview **NOTE:** If you're building something like a chat app where you want a ListView to keep scrolling to the bottom at all times, it's easiest to use the [react-native-invertible-scrollview](https://github.com/exponent/react-native-invertible-scroll-view) component rather calling `scrollToEnd` manually when layout changes. The invertible-scrollview uses a clever trick to invert the direction of the ScrollView. This pull request adds a `scrollToEnd` method which scrolls to the bottom if the ScrollView is vertical, to the right if the ScrollView is horizontal. The implementation is based on this SO answer: http://stackoverflow.com/questions/952412/uiscrollview-scrol Closes https://github.com/facebook/react-native/pull/12088 Differential Revision: D4474974 Pulled By: mkonicek fbshipit-source-id: 6ecf8b3435f47dd3a31e2fd5be6859062711c233
183 lines
6.6 KiB
Objective-C
183 lines
6.6 KiB
Objective-C
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*/
|
|
|
|
#import "RCTScrollViewManager.h"
|
|
|
|
#import "RCTBridge.h"
|
|
#import "RCTScrollView.h"
|
|
#import "RCTShadowView.h"
|
|
#import "RCTUIManager.h"
|
|
|
|
@interface RCTScrollView (Private)
|
|
|
|
- (NSArray<NSDictionary *> *)calculateChildFramesData;
|
|
|
|
@end
|
|
|
|
@implementation RCTConvert (UIScrollView)
|
|
|
|
RCT_ENUM_CONVERTER(UIScrollViewKeyboardDismissMode, (@{
|
|
@"none": @(UIScrollViewKeyboardDismissModeNone),
|
|
@"on-drag": @(UIScrollViewKeyboardDismissModeOnDrag),
|
|
@"interactive": @(UIScrollViewKeyboardDismissModeInteractive),
|
|
// Backwards compatibility
|
|
@"onDrag": @(UIScrollViewKeyboardDismissModeOnDrag),
|
|
}), UIScrollViewKeyboardDismissModeNone, integerValue)
|
|
|
|
RCT_ENUM_CONVERTER(UIScrollViewIndicatorStyle, (@{
|
|
@"default": @(UIScrollViewIndicatorStyleDefault),
|
|
@"black": @(UIScrollViewIndicatorStyleBlack),
|
|
@"white": @(UIScrollViewIndicatorStyleWhite),
|
|
}), UIScrollViewIndicatorStyleDefault, integerValue)
|
|
|
|
@end
|
|
|
|
@implementation RCTScrollViewManager
|
|
|
|
RCT_EXPORT_MODULE()
|
|
|
|
- (UIView *)view
|
|
{
|
|
return [[RCTScrollView alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
|
|
}
|
|
|
|
RCT_EXPORT_VIEW_PROPERTY(alwaysBounceHorizontal, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(alwaysBounceVertical, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(bounces, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(bouncesZoom, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(canCancelContentTouches, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(centerContent, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(decelerationRate, CGFloat)
|
|
RCT_EXPORT_VIEW_PROPERTY(directionalLockEnabled, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(indicatorStyle, UIScrollViewIndicatorStyle)
|
|
RCT_EXPORT_VIEW_PROPERTY(keyboardDismissMode, UIScrollViewKeyboardDismissMode)
|
|
RCT_EXPORT_VIEW_PROPERTY(maximumZoomScale, CGFloat)
|
|
RCT_EXPORT_VIEW_PROPERTY(minimumZoomScale, CGFloat)
|
|
RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
|
|
#if !TARGET_OS_TV
|
|
RCT_EXPORT_VIEW_PROPERTY(pagingEnabled, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(scrollsToTop, BOOL)
|
|
#endif
|
|
RCT_EXPORT_VIEW_PROPERTY(showsHorizontalScrollIndicator, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(showsVerticalScrollIndicator, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(stickyHeaderIndices, NSIndexSet)
|
|
RCT_EXPORT_VIEW_PROPERTY(scrollEventThrottle, NSTimeInterval)
|
|
RCT_EXPORT_VIEW_PROPERTY(zoomScale, CGFloat)
|
|
RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
|
|
RCT_EXPORT_VIEW_PROPERTY(scrollIndicatorInsets, UIEdgeInsets)
|
|
RCT_EXPORT_VIEW_PROPERTY(snapToInterval, int)
|
|
RCT_EXPORT_VIEW_PROPERTY(snapToAlignment, NSString)
|
|
RCT_REMAP_VIEW_PROPERTY(contentOffset, scrollView.contentOffset, CGPoint)
|
|
RCT_EXPORT_VIEW_PROPERTY(onScrollBeginDrag, RCTDirectEventBlock)
|
|
RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
|
|
RCT_EXPORT_VIEW_PROPERTY(onScrollEndDrag, RCTDirectEventBlock)
|
|
RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollBegin, RCTDirectEventBlock)
|
|
RCT_EXPORT_VIEW_PROPERTY(onMomentumScrollEnd, RCTDirectEventBlock)
|
|
RCT_EXPORT_VIEW_PROPERTY(onScrollAnimationEnd, RCTDirectEventBlock)
|
|
|
|
// overflow is used both in css-layout as well as by react-native. In css-layout
|
|
// we always want to treat overflow as scroll but depending on what the overflow
|
|
// is set to from js we want to clip drawing or not. This piece of code ensures
|
|
// that css-layout is always treating the contents of a scroll container as
|
|
// overflow: 'scroll'.
|
|
RCT_CUSTOM_SHADOW_PROPERTY(overflow, YGOverflow, RCTShadowView) {
|
|
#pragma unused (json)
|
|
view.overflow = YGOverflowScroll;
|
|
}
|
|
|
|
RCT_EXPORT_METHOD(getContentSize:(nonnull NSNumber *)reactTag
|
|
callback:(RCTResponseSenderBlock)callback)
|
|
{
|
|
[self.bridge.uiManager addUIBlock:
|
|
^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTScrollView *> *viewRegistry) {
|
|
|
|
RCTScrollView *view = viewRegistry[reactTag];
|
|
if (!view || ![view isKindOfClass:[RCTScrollView class]]) {
|
|
RCTLogError(@"Cannot find RCTScrollView with tag #%@", reactTag);
|
|
return;
|
|
}
|
|
|
|
CGSize size = view.scrollView.contentSize;
|
|
callback(@[@{
|
|
@"width" : @(size.width),
|
|
@"height" : @(size.height)
|
|
}]);
|
|
}];
|
|
}
|
|
|
|
RCT_EXPORT_METHOD(calculateChildFrames:(nonnull NSNumber *)reactTag
|
|
callback:(RCTResponseSenderBlock)callback)
|
|
{
|
|
[self.bridge.uiManager addUIBlock:
|
|
^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTScrollView *> *viewRegistry) {
|
|
|
|
RCTScrollView *view = viewRegistry[reactTag];
|
|
if (!view || ![view isKindOfClass:[RCTScrollView class]]) {
|
|
RCTLogError(@"Cannot find RCTScrollView with tag #%@", reactTag);
|
|
return;
|
|
}
|
|
|
|
NSArray<NSDictionary *> *childFrames = [view calculateChildFramesData];
|
|
if (childFrames) {
|
|
callback(@[childFrames]);
|
|
}
|
|
}];
|
|
}
|
|
|
|
RCT_EXPORT_METHOD(scrollTo:(nonnull NSNumber *)reactTag
|
|
offsetX:(CGFloat)x
|
|
offsetY:(CGFloat)y
|
|
animated:(BOOL)animated)
|
|
{
|
|
[self.bridge.uiManager addUIBlock:
|
|
^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry){
|
|
UIView *view = viewRegistry[reactTag];
|
|
if ([view conformsToProtocol:@protocol(RCTScrollableProtocol)]) {
|
|
[(id<RCTScrollableProtocol>)view scrollToOffset:(CGPoint){x, y} animated:animated];
|
|
} else {
|
|
RCTLogError(@"tried to scrollTo: on non-RCTScrollableProtocol view %@ "
|
|
"with tag #%@", view, reactTag);
|
|
}
|
|
}];
|
|
}
|
|
|
|
RCT_EXPORT_METHOD(scrollToEnd:(nonnull NSNumber *)reactTag
|
|
animated:(BOOL)animated)
|
|
{
|
|
[self.bridge.uiManager addUIBlock:
|
|
^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry){
|
|
UIView *view = viewRegistry[reactTag];
|
|
if ([view conformsToProtocol:@protocol(RCTScrollableProtocol)]) {
|
|
[(id<RCTScrollableProtocol>)view scrollToEnd:animated];
|
|
} else {
|
|
RCTLogError(@"tried to scrollTo: on non-RCTScrollableProtocol view %@ "
|
|
"with tag #%@", view, reactTag);
|
|
}
|
|
}];
|
|
}
|
|
|
|
RCT_EXPORT_METHOD(zoomToRect:(nonnull NSNumber *)reactTag
|
|
withRect:(CGRect)rect
|
|
animated:(BOOL)animated)
|
|
{
|
|
[self.bridge.uiManager addUIBlock:
|
|
^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry){
|
|
UIView *view = viewRegistry[reactTag];
|
|
if ([view conformsToProtocol:@protocol(RCTScrollableProtocol)]) {
|
|
[(id<RCTScrollableProtocol>)view zoomToRect:rect animated:animated];
|
|
} else {
|
|
RCTLogError(@"tried to zoomToRect: on non-RCTScrollableProtocol view %@ "
|
|
"with tag #%@", view, reactTag);
|
|
}
|
|
}];
|
|
}
|
|
|
|
@end
|