diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 5848527e6443ec..4f394972483d4e 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -15,6 +15,7 @@ var EdgeInsetsPropType = require('EdgeInsetsPropType'); var Platform = require('Platform'); var PointPropType = require('PointPropType'); var RCTScrollView = require('NativeModules').UIManager.RCTScrollView; +var RCTScrollViewManager = require('NativeModules').ScrollViewManager; var React = require('React'); var ReactNativeViewAttributes = require('ReactNativeViewAttributes'); var RCTUIManager = require('NativeModules').UIManager; @@ -279,6 +280,21 @@ var ScrollView = React.createClass({ * @platform ios */ zoomScale: PropTypes.number, + + /** + * When defined, displays a UIRefreshControl. + * Invoked with a function to stop refreshing when the UIRefreshControl is animating. + * + * ``` + * (endRefreshing) => { + * endRefreshing(); + * } + * ``` + * + * @platform ios + */ + onRefreshStart: PropTypes.func, + }, mixins: [ScrollResponder.Mixin], @@ -291,6 +307,12 @@ var ScrollView = React.createClass({ this.refs[SCROLLVIEW].setNativeProps(props); }, + endRefreshing: function() { + RCTScrollViewManager.endRefreshing( + React.findNodeHandle(this) + ); + }, + /** * Returns a reference to the underlying scroll responder, which supports * operations like `scrollTo`. All ScrollView-like components should @@ -396,6 +418,13 @@ var ScrollView = React.createClass({ onResponderReject: this.scrollResponderHandleResponderReject, }; + var onRefreshStart = this.props.onRefreshStart; + // this is necessary because if we set it on props, even when empty, + // it'll trigger the default pull-to-refresh behaviour on native. + props.onRefreshStart = onRefreshStart + ? function() { onRefreshStart && onRefreshStart(this.endRefreshing); }.bind(this) + : null; + var ScrollViewClass; if (Platform.OS === 'ios') { ScrollViewClass = RCTScrollView; diff --git a/React/Views/RCTScrollView.h b/React/Views/RCTScrollView.h index d44be6fafae14c..47fb1753b7adab 100644 --- a/React/Views/RCTScrollView.h +++ b/React/Views/RCTScrollView.h @@ -47,6 +47,9 @@ @property (nonatomic, assign) int snapToInterval; @property (nonatomic, copy) NSString *snapToAlignment; @property (nonatomic, copy) NSIndexSet *stickyHeaderIndices; +@property (nonatomic, copy) RCTDirectEventBlock onRefreshStart; + +- (void)endRefreshing; @end diff --git a/React/Views/RCTScrollView.m b/React/Views/RCTScrollView.m index 1dfb9c1c9e3b52..89a5393ccf6498 100644 --- a/React/Views/RCTScrollView.m +++ b/React/Views/RCTScrollView.m @@ -144,6 +144,7 @@ @interface RCTCustomScrollView : UIScrollView @property (nonatomic, copy) NSIndexSet *stickyHeaderIndices; @property (nonatomic, assign) BOOL centerContent; +@property (nonatomic, strong) UIRefreshControl *refreshControl; @end @@ -352,6 +353,15 @@ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event return hitView ?: [super hitTest:point withEvent:event]; } +- (void)setRefreshControl:(UIRefreshControl *)refreshControl +{ + if (_refreshControl) { + [_refreshControl removeFromSuperview]; + } + _refreshControl = refreshControl; + [self addSubview:_refreshControl]; +} + @end @implementation RCTScrollView @@ -844,6 +854,34 @@ - (id)valueForUndefinedKey:(NSString *)key return [_scrollView valueForKey:key]; } +- (void)setOnRefreshStart:(RCTDirectEventBlock)onRefreshStart +{ + if (!onRefreshStart) { + _onRefreshStart = nil; + _scrollView.refreshControl = nil; + return; + } + _onRefreshStart = [onRefreshStart copy]; + + if (!_scrollView.refreshControl) { + UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init]; + [refreshControl addTarget:self action:@selector(refreshControlValueChanged) forControlEvents:UIControlEventValueChanged]; + _scrollView.refreshControl = refreshControl; + } +} + +- (void)refreshControlValueChanged +{ + if (self.onRefreshStart) { + self.onRefreshStart(nil); + } +} + +- (void)endRefreshing +{ + [_scrollView.refreshControl endRefreshing]; +} + @end @implementation RCTEventDispatcher (RCTScrollView) diff --git a/React/Views/RCTScrollViewManager.m b/React/Views/RCTScrollViewManager.m index 6470f10f1382d9..2a6686b667b14b 100644 --- a/React/Views/RCTScrollViewManager.m +++ b/React/Views/RCTScrollViewManager.m @@ -66,6 +66,7 @@ - (UIView *)view RCT_EXPORT_VIEW_PROPERTY(snapToInterval, int) RCT_EXPORT_VIEW_PROPERTY(snapToAlignment, NSString) RCT_REMAP_VIEW_PROPERTY(contentOffset, scrollView.contentOffset, CGPoint) +RCT_EXPORT_VIEW_PROPERTY(onRefreshStart, RCTDirectEventBlock) - (NSDictionary *)constantsToExport { @@ -115,6 +116,22 @@ - (NSDictionary *)constantsToExport }]; } +RCT_EXPORT_METHOD(endRefreshing:(nonnull NSNumber *)reactTag) +{ + [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry) { + + RCTScrollView *view = viewRegistry[reactTag]; + if (!view || ![view isKindOfClass:[RCTScrollView class]]) { + RCTLogError(@"Cannot find RCTScrollView with tag #%@", reactTag); + return; + } + + [view endRefreshing]; + + }]; +} + + - (NSArray *)customDirectEventTypes { return @[ @@ -128,3 +145,4 @@ - (NSDictionary *)constantsToExport } @end +