mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 09:35:48 +00:00
dcf245a9a2
Summary: This is an enhancement for ScrollView that adds the ability to paginate based on a width other than the width of the ScrollView itself. This is a fairly common pattern used on apps like Facebook, App Store, and Twitter to scroll through a horizontal set of cards or icons:    After trying to accomplish this only with JS, it appears that attempting to take over an in-progress native scroll animation with JS is always going to result in some amount of jankiness and jumping. This pull request uses `scrollViewWillEndDragging` in RCTScrollView.m to adjust `targetContentOffset` based on two new optional props added to ScrollView. `snapToInterval` sets the multiple that the Closes https://github.com/facebook/react-native/pull/1532 Reviewed By: @svcscm, @trunkagent Differential Revision: D2443701 Pulled By: @vjeux
131 lines
3.9 KiB
Objective-C
131 lines
3.9 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 "RCTSparseArray.h"
|
|
#import "RCTUIManager.h"
|
|
|
|
@interface RCTScrollView (Private)
|
|
|
|
- (NSArray *)calculateChildFramesData;
|
|
|
|
@end
|
|
|
|
@implementation RCTConvert (UIScrollView)
|
|
|
|
RCT_ENUM_CONVERTER(UIScrollViewKeyboardDismissMode, (@{
|
|
@"none": @(UIScrollViewKeyboardDismissModeNone),
|
|
@"on-drag": @(UIScrollViewKeyboardDismissModeOnDrag),
|
|
@"interactive": @(UIScrollViewKeyboardDismissModeInteractive),
|
|
// Backwards compatibility
|
|
@"onDrag": @(UIScrollViewKeyboardDismissModeOnDrag),
|
|
}), UIScrollViewKeyboardDismissModeNone, 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(keyboardDismissMode, UIScrollViewKeyboardDismissMode)
|
|
RCT_EXPORT_VIEW_PROPERTY(maximumZoomScale, CGFloat)
|
|
RCT_EXPORT_VIEW_PROPERTY(minimumZoomScale, CGFloat)
|
|
RCT_EXPORT_VIEW_PROPERTY(pagingEnabled, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
|
|
RCT_EXPORT_VIEW_PROPERTY(scrollsToTop, BOOL)
|
|
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)
|
|
|
|
- (NSDictionary *)constantsToExport
|
|
{
|
|
return @{
|
|
// TODO: unused - remove these?
|
|
@"DecelerationRate": @{
|
|
@"normal": @(UIScrollViewDecelerationRateNormal),
|
|
@"fast": @(UIScrollViewDecelerationRateFast),
|
|
},
|
|
};
|
|
}
|
|
|
|
RCT_EXPORT_METHOD(getContentSize:(nonnull NSNumber *)reactTag
|
|
callback:(RCTResponseSenderBlock)callback)
|
|
{
|
|
[self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, RCTSparseArray *viewRegistry) {
|
|
|
|
UIView *view = viewRegistry[reactTag];
|
|
if (!view) {
|
|
RCTLogError(@"Cannot find view with tag #%@", reactTag);
|
|
return;
|
|
}
|
|
|
|
CGSize size = ((RCTScrollView *)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, RCTSparseArray *viewRegistry) {
|
|
|
|
UIView *view = viewRegistry[reactTag];
|
|
if (!view) {
|
|
RCTLogError(@"Cannot find view with tag #%@", reactTag);
|
|
return;
|
|
}
|
|
|
|
NSArray *childFrames = [((RCTScrollView *)view) calculateChildFramesData];
|
|
if (childFrames) {
|
|
callback(@[childFrames]);
|
|
}
|
|
}];
|
|
}
|
|
|
|
- (NSArray *)customDirectEventTypes
|
|
{
|
|
return @[
|
|
@"scrollBeginDrag",
|
|
@"scroll",
|
|
@"scrollEndDrag",
|
|
@"scrollAnimationEnd",
|
|
@"momentumScrollBegin",
|
|
@"momentumScrollEnd",
|
|
];
|
|
}
|
|
|
|
@end
|