Skip to content

Commit c609aee

Browse files
Adam ComellaFacebook Github Bot
authored andcommitted
iOS: Add onScroll event to TextInput
Summary: Corresponding Android PR: #11001 This adds an onScroll event to TextInput which is useful when a multiline TextInput has so much content that it is scrollable. **Test plan (required)** Verified the event works properly in a test app. Also, my team uses this event in our app. Adam Comella Microsoft Corp. Closes #11002 Differential Revision: D4203565 Pulled By: ericvicenti fbshipit-source-id: 7cb5e10325c3b03c6b395cce0f1bacb0528db40a
1 parent 145692a commit c609aee

File tree

4 files changed

+46
-0
lines changed

4 files changed

+46
-0
lines changed

Libraries/Components/TextInput/TextInput.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,12 @@ const TextInput = React.createClass({
364364
* Invoked on mount and layout changes with `{x, y, width, height}`.
365365
*/
366366
onLayout: PropTypes.func,
367+
/**
368+
* Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
369+
* May also contain other properties from ScrollEvent but on Android contentSize
370+
* is not provided for performance reasons.
371+
*/
372+
onScroll: PropTypes.func,
367373
/**
368374
* The string that will be rendered before text input has been entered.
369375
*/
@@ -652,6 +658,7 @@ const TextInput = React.createClass({
652658
onSelectionChangeShouldSetResponder={emptyFunction.thatReturnsTrue}
653659
text={this._getText()}
654660
dataDetectorTypes={this.props.dataDetectorTypes}
661+
onScroll={this._onScroll}
655662
/>;
656663
}
657664

@@ -811,6 +818,10 @@ const TextInput = React.createClass({
811818
_onTextInput: function(event: Event) {
812819
this.props.onTextInput && this.props.onTextInput(event);
813820
},
821+
822+
_onScroll: function(event: Event) {
823+
this.props.onScroll && this.props.onScroll(event);
824+
},
814825
});
815826

816827
var styles = StyleSheet.create({

Libraries/Text/RCTTextView.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@property (nonatomic, copy) RCTDirectEventBlock onContentSizeChange;
3333
@property (nonatomic, copy) RCTDirectEventBlock onSelectionChange;
3434
@property (nonatomic, copy) RCTDirectEventBlock onTextInput;
35+
@property (nonatomic, copy) RCTDirectEventBlock onScroll;
3536

3637
- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
3738

Libraries/Text/RCTTextView.m

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
106106
#if !TARGET_OS_TV
107107
_scrollView.scrollsToTop = NO;
108108
#endif
109+
_scrollView.delegate = self;
109110
[_scrollView addSubview:_textView];
110111

111112
[self addSubview:_scrollView];
@@ -141,6 +142,11 @@ - (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)index
141142
}
142143
}
143144

145+
- (void)dealloc
146+
{
147+
_scrollView.delegate = nil;
148+
}
149+
144150
- (void)removeReactSubview:(UIView *)subview
145151
{
146152
[super removeReactSubview:subview];
@@ -694,4 +700,31 @@ - (UIColor *)defaultPlaceholderTextColor
694700
return [UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:0.098/255.0 alpha:0.22];
695701
}
696702

703+
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
704+
{
705+
if (_onScroll) {
706+
_onScroll(@{
707+
@"contentOffset": @{
708+
@"x": @(scrollView.contentOffset.x),
709+
@"y": @(scrollView.contentOffset.y)
710+
},
711+
@"contentInset": @{
712+
@"top": @(_scrollView.contentInset.top),
713+
@"left": @(_scrollView.contentInset.left),
714+
@"bottom": @(_scrollView.contentInset.bottom),
715+
@"right": @(_scrollView.contentInset.right)
716+
},
717+
@"contentSize": @{
718+
@"width": @(_scrollView.contentSize.width),
719+
@"height": @(_scrollView.contentSize.height)
720+
},
721+
@"layoutMeasurement": @{
722+
@"width": @(_scrollView.frame.size.width),
723+
@"height": @(_scrollView.frame.size.height)
724+
},
725+
@"zoomScale": @(_scrollView.zoomScale ?: 1),
726+
});
727+
}
728+
}
729+
697730
@end

Libraries/Text/RCTTextViewManager.m

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ - (UIView *)view
3838
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
3939
RCT_EXPORT_VIEW_PROPERTY(onContentSizeChange, RCTBubblingEventBlock)
4040
RCT_EXPORT_VIEW_PROPERTY(onSelectionChange, RCTDirectEventBlock)
41+
RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
4142
RCT_EXPORT_VIEW_PROPERTY(onTextInput, RCTDirectEventBlock)
4243
RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
4344
RCT_EXPORT_VIEW_PROPERTY(placeholderTextColor, UIColor)

0 commit comments

Comments
 (0)