Skip to content

Instantly share code, notes, and snippets.

@birkir
Created July 26, 2017 16:06
Show Gist options
  • Select an option

  • Save birkir/b34a406e31fbb132254b1eb0e89b48a5 to your computer and use it in GitHub Desktop.

Select an option

Save birkir/b34a406e31fbb132254b1eb0e89b48a5 to your computer and use it in GitHub Desktop.
react native WebView onScroll patch
From 12d5a33175038d872d9d6ca8acb00e57f99202c7 Mon Sep 17 00:00:00 2001
From: Birkir Gudjonsson <birkir.gudjonsson@gmail.com>
Date: Wed, 26 Jul 2017 11:53:42 -0400
Subject: [PATCH] Added onScroll
---
Libraries/Components/WebView/WebView.ios.js | 11 +++++++++++
React/Views/RCTWebView.m | 29 +++++++++++++++++++++++++++++
React/Views/RCTWebViewManager.m | 1 +
3 files changed, 41 insertions(+)
diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
index 485af39..be61af3 100644
--- a/Libraries/Components/WebView/WebView.ios.js
+++ b/Libraries/Components/WebView/WebView.ios.js
@@ -365,6 +365,11 @@ class WebView extends React.Component {
'always',
'compatibility'
]),
+
+ /**
+ * On Scroll event
+ */
+ onScroll: PropTypes.func,
};
state = {
@@ -442,6 +447,7 @@ class WebView extends React.Component {
onLoadingError={this._onLoadingError}
messagingEnabled={messagingEnabled}
onMessage={this._onMessage}
+ onScroll={this._onScroll}
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
scalesPageToFit={this.props.scalesPageToFit}
allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
@@ -584,6 +590,11 @@ class WebView extends React.Component {
var {onMessage} = this.props;
onMessage && onMessage(event);
}
+
+ _onScroll = (event: Event) => {
+ var {onScroll} = this.props;
+ onScroll && onScroll(event);
+ }
}
var RCTWebView = requireNativeComponent('RCTWebView', WebView, {
diff --git a/React/Views/RCTWebView.m b/React/Views/RCTWebView.m
index 2096064..91f2ffc 100644
--- a/React/Views/RCTWebView.m
+++ b/React/Views/RCTWebView.m
@@ -29,6 +29,7 @@ NSString *const RCTJSPostMessageHost = @"postMessage";
@property (nonatomic, copy) RCTDirectEventBlock onLoadingError;
@property (nonatomic, copy) RCTDirectEventBlock onShouldStartLoadWithRequest;
@property (nonatomic, copy) RCTDirectEventBlock onMessage;
+@property (nonatomic, copy) RCTDirectEventBlock onScroll;
@end
@@ -51,11 +52,39 @@ NSString *const RCTJSPostMessageHost = @"postMessage";
_contentInset = UIEdgeInsetsZero;
_webView = [[UIWebView alloc] initWithFrame:self.bounds];
_webView.delegate = self;
+ _webView.scrollView.delegate = self;
[self addSubview:_webView];
}
return self;
}
+- (void)scrollViewDidScroll:(UIScrollView *)scrollView
+{
+ NSDictionary *event = @{
+ @"contentOffset": @{
+ @"x": @(scrollView.contentOffset.x),
+ @"y": @(scrollView.contentOffset.y)
+ },
+ @"contentInset": @{
+ @"top": @(scrollView.contentInset.top),
+ @"left": @(scrollView.contentInset.left),
+ @"bottom": @(scrollView.contentInset.bottom),
+ @"right": @(scrollView.contentInset.right)
+ },
+ @"contentSize": @{
+ @"width": @(scrollView.contentSize.width),
+ @"height": @(scrollView.contentSize.height)
+ },
+ @"layoutMeasurement": @{
+ @"width": @(scrollView.frame.size.width),
+ @"height": @(scrollView.frame.size.height)
+ },
+ @"zoomScale": @(scrollView.zoomScale ?: 1),
+ };
+
+ _onScroll(event);
+}
+
RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
- (void)goForward
diff --git a/React/Views/RCTWebViewManager.m b/React/Views/RCTWebViewManager.m
index ddc66e2..271a98d 100644
--- a/React/Views/RCTWebViewManager.m
+++ b/React/Views/RCTWebViewManager.m
@@ -46,6 +46,7 @@ RCT_EXPORT_VIEW_PROPERTY(onLoadingStart, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onLoadingFinish, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onLoadingError, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onMessage, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onShouldStartLoadWithRequest, RCTDirectEventBlock)
RCT_REMAP_VIEW_PROPERTY(allowsInlineMediaPlayback, _webView.allowsInlineMediaPlayback, BOOL)
RCT_REMAP_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, _webView.mediaPlaybackRequiresUserAction, BOOL)
--
2.6.1
@ethanyuwang

Copy link
Copy Markdown

It looks like this only works for iOS?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment