feat(WKWebView): add prop `directionalLockEnabled` for iOS (#389)

docs/Reference.md

@@ -36,6 +36,7 @@ This document lays out the current public properties and methods for the React N
 - [`contentInset`](Reference.md#contentinset)
 - [`dataDetectorTypes`](Reference.md#datadetectortypes)
 - [`scrollEnabled`](Reference.md#scrollenabled)
+- [`directionalLockEnabled`](Reference.md#directionalLockEnabled)
 - [`geolocationEnabled`](Reference.md#geolocationenabled)
 - [`allowUniversalAccessFromFileURLs`](Reference.md#allowUniversalAccessFromFileURLs)
 - [`useWebKit`](Reference.md#usewebkit)
@@ -700,6 +701,17 @@ Boolean value that determines whether scrolling is enabled in the `WebView`. The
 
 ---
 
+### `directionalLockEnabled`
+
+A Boolean value that determines whether scrolling is disabled in a particular direction.
+The default value is `true`.
+
+| Type | Required | Platform |
+| ---- | -------- | -------- |
+| bool | No       | iOS      |
+
+---
+
 ### `showsHorizontalScrollIndicator`
 
 Boolean value that determines whether a horizontal scroll indicator is shown in the `WebView`. The default value is `true`.

ios/RNCUIWebViewManager.m

@@ -43,6 +43,7 @@ RCT_REMAP_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, _webView.mediaPlaybackR
 RCT_REMAP_VIEW_PROPERTY(dataDetectorTypes, _webView.dataDetectorTypes, UIDataDetectorTypes)
 RCT_REMAP_VIEW_PROPERTY(showsHorizontalScrollIndicator, _webView.scrollView.showsHorizontalScrollIndicator, BOOL)
 RCT_REMAP_VIEW_PROPERTY(showsVerticalScrollIndicator, _webView.scrollView.showsVerticalScrollIndicator, BOOL)
+RCT_REMAP_VIEW_PROPERTY(directionalLockEnabled, _webView.scrollView.directionalLockEnabled, BOOL)
 
 RCT_EXPORT_METHOD(goBack:(nonnull NSNumber *)reactTag)
 {

ios/RNCWKWebView.h

@@ -45,6 +45,7 @@
 @property (nonatomic, assign) BOOL allowsLinkPreview;
 @property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
 @property (nonatomic, assign) BOOL showsVerticalScrollIndicator;
+@property (nonatomic, assign) BOOL directionalLockEnabled;
 
 + (void)setClientAuthenticationCredential:(nullable NSURLCredential*)credential;
 - (void)postMessage:(NSString *)message;

ios/RNCWKWebView.m

@@ -51,6 +51,7 @@ static NSURLCredential* clientAuthenticationCredential;
     _scrollEnabled = YES;
     _showsHorizontalScrollIndicator = YES;
     _showsVerticalScrollIndicator = YES;
+    _directionalLockEnabled = YES;
     _automaticallyAdjustContentInsets = YES;
     _contentInset = UIEdgeInsetsZero;
   }
@@ -135,6 +136,7 @@ static NSURLCredential* clientAuthenticationCredential;
     _webView.scrollView.bounces = _bounces;
     _webView.scrollView.showsHorizontalScrollIndicator = _showsHorizontalScrollIndicator;
     _webView.scrollView.showsVerticalScrollIndicator = _showsVerticalScrollIndicator;
+    _webView.scrollView.directionalLockEnabled = _directionalLockEnabled;
     _webView.allowsLinkPreview = _allowsLinkPreview;
     [_webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];
     _webView.allowsBackForwardNavigationGestures = _allowsBackForwardNavigationGestures;
@@ -351,6 +353,12 @@ static NSURLCredential* clientAuthenticationCredential;
   }
 }
 
+- (void)setDirectionalLockEnabled:(BOOL)directionalLockEnabled
+{
+    _directionalLockEnabled = directionalLockEnabled;
+    _webView.scrollView.directionalLockEnabled = directionalLockEnabled;
+}
+
 - (void)setShowsHorizontalScrollIndicator:(BOOL)showsHorizontalScrollIndicator
 {
     _showsHorizontalScrollIndicator = showsHorizontalScrollIndicator;

ios/RNCWKWebViewManager.m

@@ -85,6 +85,10 @@ RCT_CUSTOM_VIEW_PROPERTY(decelerationRate, CGFloat, RNCWKWebView) {
   view.decelerationRate = json == nil ? UIScrollViewDecelerationRateNormal : [RCTConvert CGFloat: json];
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(directionalLockEnabled, BOOL, RNCWKWebView) {
+    view.directionalLockEnabled = json == nil ? true : [RCTConvert BOOL: json];
+}
+
 RCT_CUSTOM_VIEW_PROPERTY(showsHorizontalScrollIndicator, BOOL, RNCWKWebView) {
   view.showsHorizontalScrollIndicator = json == nil ? true : [RCTConvert BOOL: json];
 }

js/WebView.ios.js

@@ -286,6 +286,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
         allowsLinkPreview={this.props.allowsLinkPreview}
         showsHorizontalScrollIndicator={this.props.showsHorizontalScrollIndicator}
         showsVerticalScrollIndicator={this.props.showsVerticalScrollIndicator}
+        directionalLockEnabled={this.props.directionalLockEnabled}
         {...nativeConfig.props}
       />
     );

js/WebViewTypes.js

@@ -253,6 +253,13 @@ export type IOSWebViewProps = $ReadOnly<{|
    * @platform ios
    */
   allowsLinkPreview?: ?boolean,
+
+  /**
+   * A Boolean value that determines whether scrolling is disabled in a particular direction.
+   * The default value is `true`.
+   * @platform ios
+   */
+  directionalLockEnabled?: ?boolean,
 |}>;
 
 export type AndroidWebViewProps = $ReadOnly<{|

typings/index.d.ts

@@ -151,6 +151,13 @@ export interface IOSWebViewProps {
    */
   scrollEnabled?: boolean;
 
+  /**
+   * A Boolean value that determines whether scrolling is disabled in a particular direction.
+   * The default value is `true`.
+   * @platform ios
+   */
+  directionalLockEnabled?: 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.