feat(WKWebview): [ios] Add 'pagingEnabled' property to the iOS WKWebview (#165)

docs/Reference.md

@@ -46,6 +46,7 @@ This document lays out the current public properties and methods for the React N
 - [`allowsBackForwardNavigationGestures`](Reference.md#allowsbackforwardnavigationgestures)
 - [`allowFileAccess`](Reference.md#allowFileAccess)
 - [`saveFormDataDisabled`](Reference.md#saveFormDataDisabled)
+- [`pagingEnabled`](Reference.md#pagingEnabled)
 
 ## Methods Index
 
@@ -517,6 +518,16 @@ Sets whether the WebView should disable saving form data. The default value is `
 | ------- | -------- | -------- |
 | boolean | No       | Android  |
 
+---
+
+### `pagingEnabled`
+
+If the value of this property is true, the scroll view stops on multiples of the scroll view’s bounds when the user scrolls. The default value is false.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
 ## Methods
 
 ### `extraNativeComponentConfig()`

ios/RNCWKWebView.h

@@ -26,6 +26,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 @property (nonatomic, assign) BOOL messagingEnabled;
 @property (nonatomic, copy) NSString *injectedJavaScript;
 @property (nonatomic, assign) BOOL scrollEnabled;
+@property (nonatomic, assign) BOOL pagingEnabled;
 @property (nonatomic, assign) CGFloat decelerationRate;
 @property (nonatomic, assign) BOOL allowsInlineMediaPlayback;
 @property (nonatomic, assign) BOOL bounces;

ios/RNCWKWebView.m

@@ -70,7 +70,7 @@ static NSString *const MessageHanderName = @"ReactNative";
     _automaticallyAdjustContentInsets = YES;
     _contentInset = UIEdgeInsetsZero;
   }
-    
+
   // Workaround for a keyboard dismissal bug present in iOS 12
   // https://openradar.appspot.com/radar?id=5018321736957952
   if (@available(iOS 12.0, *)) {
@@ -111,6 +111,7 @@ static NSString *const MessageHanderName = @"ReactNative";
     _webView.UIDelegate = self;
     _webView.navigationDelegate = self;
     _webView.scrollView.scrollEnabled = _scrollEnabled;
+    _webView.scrollView.pagingEnabled = _pagingEnabled;
     _webView.scrollView.bounces = _bounces;
     [_webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];
     _webView.allowsBackForwardNavigationGestures = _allowsBackForwardNavigationGestures;
@@ -137,7 +138,7 @@ static NSString *const MessageHanderName = @"ReactNative";
         [_webView removeFromSuperview];
         _webView = nil;
     }
-    
+
     [super removeFromSuperview];
 }
 
@@ -146,7 +147,7 @@ static NSString *const MessageHanderName = @"ReactNative";
     keyboardTimer = [NSTimer scheduledTimerWithTimeInterval:0 target:self selector:@selector(keyboardDisplacementFix) userInfo:nil repeats:false];
     [[NSRunLoop mainRunLoop] addTimer:keyboardTimer forMode:NSRunLoopCommonModes];
 }
-  
+
 -(void)keyboardWillShow
 {
     if (keyboardTimer != nil) {

ios/RNCWKWebViewManager.m

@@ -45,6 +45,7 @@ RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
 RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(hideKeyboardAccessoryView, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(allowsBackForwardNavigationGestures, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(pagingEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(userAgent, NSString)
 
 /**

js/WebView.ios.js

@@ -269,6 +269,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
         injectedJavaScript={this.props.injectedJavaScript}
         bounces={this.props.bounces}
         scrollEnabled={this.props.scrollEnabled}
+        pagingEnabled={this.props.pagingEnabled}
         decelerationRate={decelerationRate}
         contentInset={this.props.contentInset}
         automaticallyAdjustContentInsets={

js/WebViewTypes.js

@@ -168,6 +168,14 @@ export type IOSWebViewProps = $ReadOnly<{|
    */
   scrollEnabled?: ?boolean,
 
+  /**
+   * If the value of this property is true, the scroll view stops on multiples
+   * of the scroll view’s bounds when the user scrolls.
+   * The default value is false.
+   * @platform ios
+   */
+  pagingEnabled?: ?boolean,
+
   /**
    * The amount by which the web view content is inset from the edges of
    * the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.

typings/index.d.ts

@@ -145,6 +145,14 @@ export interface IOSWebViewProps {
    */
   scrollEnabled?: boolean;
 
+  /**
+   * If the value of this property is true, the scroll view stops on multiples
+   * of the scroll view’s bounds when the user scrolls.
+   * The default value is false.
+   * @platform ios
+   */
+  pagingEnabled?: boolean,
+
   /**
    * The amount by which the web view content is inset from the edges of
    * the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.