feat(iOS): Add the pull to refresh (#1265)

* Add pull to refresh support for iOS

* Add pull to refresh control removal from WebView

* Add the type and reference description about pull to refresh

* Set bounces to true when enabling pull to refresh, add references

* Add the back to props anchor to pullToRefreshEnabled

apple/RNCWebView.h

@@ -62,6 +62,8 @@
 @property (nonatomic, assign) BOOL directionalLockEnabled;
 @property (nonatomic, assign) BOOL ignoreSilentHardwareSwitch;
 @property (nonatomic, copy) NSString * _Nullable allowingReadAccessToURL;
+@property (nonatomic, assign) BOOL pullToRefreshEnabled;
+@property (nonatomic, weak) UIRefreshControl * refreshControl;
 
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 /* iOS 13 */
 @property (nonatomic, assign) WKContentMode contentMode;
@@ -75,5 +77,7 @@
 - (void)goBack;
 - (void)reload;
 - (void)stopLoading;
+- (void)addPullToRefreshControl;
+- (void)pullToRefresh:(UIRefreshControl *)refreshControl;
 
 @end

apple/RNCWebView.m

@@ -275,9 +275,13 @@ static NSDictionary* customCertificatesForHost;
     _webView.UIDelegate = self;
     _webView.navigationDelegate = self;
 #if !TARGET_OS_OSX
+    if (_pullToRefreshEnabled) {
+        [self addPullToRefreshControl];
+    }
     _webView.scrollView.scrollEnabled = _scrollEnabled;
     _webView.scrollView.pagingEnabled = _pagingEnabled;
-    _webView.scrollView.bounces = _bounces;
+      //For UIRefreshControl to work correctly, the bounces should always be true
+    _webView.scrollView.bounces = _pullToRefreshEnabled || _bounces; 
     _webView.scrollView.showsHorizontalScrollIndicator = _showsHorizontalScrollIndicator;
     _webView.scrollView.showsVerticalScrollIndicator = _showsVerticalScrollIndicator;
     _webView.scrollView.directionalLockEnabled = _directionalLockEnabled;
@@ -308,7 +312,6 @@ static NSDictionary* customCertificatesForHost;
   _webView.allowsBackForwardNavigationGestures = _allowsBackForwardNavigationGestures;
 }
 
-
 - (void)removeFromSuperview
 {
     if (_webView) {
@@ -1156,6 +1159,35 @@ static NSDictionary* customCertificatesForHost;
   }
 }
 
+- (void)addPullToRefreshControl
+{
+    UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
+    _refreshControl = refreshControl;
+    [_webView.scrollView addSubview: refreshControl];
+    [refreshControl addTarget:self action:@selector(pullToRefresh:) forControlEvents: UIControlEventValueChanged];
+}
+
+- (void)pullToRefresh:(UIRefreshControl *)refreshControl
+{
+    [self reload];
+    [refreshControl endRefreshing];
+}
+
+#if !TARGET_OS_OSX
+- (void)setPullToRefreshEnabled:(BOOL)pullToRefreshEnabled
+{
+    _pullToRefreshEnabled = pullToRefreshEnabled;
+    
+    if (pullToRefreshEnabled) {
+        [self addPullToRefreshControl];
+    } else {
+        [_refreshControl removeFromSuperview];
+    }
+
+    [self setBounces:_bounces];
+}
+#endif // !TARGET_OS_OSX
+
 - (void)stopLoading
 {
   [_webView stopLoading];
@@ -1165,11 +1197,11 @@ static NSDictionary* customCertificatesForHost;
 - (void)setBounces:(BOOL)bounces
 {
   _bounces = bounces;
-  _webView.scrollView.bounces = bounces;
+    //For UIRefreshControl to work correctly, the bounces should always be true
+  _webView.scrollView.bounces = _pullToRefreshEnabled || bounces;
 }
 #endif // !TARGET_OS_OSX
 
-
 - (void)setInjectedJavaScript:(NSString *)source {
   _injectedJavaScript = source;
 

apple/RNCWebViewManager.m

@@ -103,6 +103,10 @@ RCT_EXPORT_METHOD(postMessage:(nonnull NSNumber *)reactTag message:(NSString *)m
   }];
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(pullToRefreshEnabled, BOOL, RNCWebView) {
+    view.pullToRefreshEnabled = json == nil ? false : [RCTConvert BOOL: json];
+}
+
 RCT_CUSTOM_VIEW_PROPERTY(bounces, BOOL, RNCWebView) {
   view.bounces = json == nil ? true : [RCTConvert BOOL: json];
 }

docs/Reference.md

@@ -67,6 +67,7 @@ This document lays out the current public properties and methods for the React N
 - [`allowsLinkPreview`](Reference.md#allowsLinkPreview)
 - [`sharedCookiesEnabled`](Reference.md#sharedCookiesEnabled)
 - [`textZoom`](Reference.md#textZoom)
+- [`pullToRefreshEnabled`](Reference.md#pullToRefreshEnabled)
 - [`ignoreSilentHardwareSwitch`](Reference.md#ignoreSilentHardwareSwitch)
 - [`onFileDownload`](Reference.md#onFileDownload)
 
@@ -1193,6 +1194,16 @@ Example:
 
 `<WebView textZoom={100} />`
 
+---
+
+### `pullToRefreshEnabled`[⬆](#props-index)<!-- Link generated with jump2header -->
+
+Boolean value that determines whether a pull to refresh gesture is available in the `WebView`. The default value is `false`. If `true`, sets `bounces` automatically to `true`.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
 ### `ignoreSilentHardwareSwitch`[⬆](#props-index)<!-- Link generated with jump2header -->
 
 (ios only)

src/WebViewTypes.ts

@@ -551,6 +551,15 @@ export interface IOSWebViewProps extends WebViewSharedProps {
   */
   injectedJavaScriptBeforeContentLoadedForMainFrameOnly?: boolean;
 
+  /**
+   * Boolean value that determines whether a pull to refresh gesture is
+   * available in the `WebView`. The default value is `false`.
+   * If `true`, sets `bounces` automatically to `true`
+   * @platform ios
+   *
+  */
+  pullToRefreshEnabled?: boolean;
+
   /**
    * Function that is invoked when the client needs to download a file.
    *