From bacfd9297657569006bab2b1f024ad1f289b1b27 Mon Sep 17 00:00:00 2001
From: Ramanpreet Nara <ramanpreet@fb.com>
Date: Thu, 16 Aug 2018 13:34:26 -0700
Subject: [PATCH] Implement 'automaticallyAdjustContentInsets' and
 'contentInset' props

Summary:
@public

This diff introduces two new props:
1. **automaticallyAdjustContentInsets**: Controls whether to adjust the content inset for web views that are placed behind a navigation bar, tab bar, or toolbar. The default value is true.
1. **contentInset**: 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}.

**Note:** There're some inconsistencies between how `UIWebView` and `WKWebView` render web pages with respect to the `contentInset` property. These two videos illustrate the problem:

**UIWebView**
[[ P58674349 | Playground.js ]]
https://pxl.cl/9R9V

**WKWebView**
[[ P58674348 | Playground.js ]]
https://pxl.cl/9R9W

Here's a stack overflow answer describing the problem: https://stackoverflow.com/a/35472603.

Reviewed By: shergin

Differential Revision: D6432181

fbshipit-source-id: aee6dac65d28435381ebec90519474b4707c7bab
---
 React/Views/RCTWKWebView.h        |  2 ++
 React/Views/RCTWKWebView.m        | 26 +++++++++++++++++++++++++-
 React/Views/RCTWKWebViewManager.m |  2 ++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/React/Views/RCTWKWebView.h b/React/Views/RCTWKWebView.h
index e9143033c7d0a3..62c1371085515e 100644
--- a/React/Views/RCTWKWebView.h
+++ b/React/Views/RCTWKWebView.h
@@ -32,6 +32,8 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 @property (nonatomic, assign) BOOL bounces;
 @property (nonatomic, assign) BOOL mediaPlaybackRequiresUserAction;
 @property (nonatomic, assign) WKDataDetectorTypes dataDetectorTypes;
+@property (nonatomic, assign) UIEdgeInsets contentInset;
+@property (nonatomic, assign) BOOL automaticallyAdjustContentInsets;
 
 - (void)postMessage:(NSString *)message;
 - (void)injectJavaScript:(NSString *)script;
diff --git a/React/Views/RCTWKWebView.m b/React/Views/RCTWKWebView.m
index 0a55fdccd6c584..2488ff209a9e78 100644
--- a/React/Views/RCTWKWebView.m
+++ b/React/Views/RCTWKWebView.m
@@ -4,7 +4,7 @@
 
 static NSString *const MessageHanderName = @"ReactNative";
 
-@interface RCTWKWebView () <WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler, UIScrollViewDelegate>
+@interface RCTWKWebView () <WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler, UIScrollViewDelegate, RCTAutoInsetsProtocol>
 @property (nonatomic, copy) RCTDirectEventBlock onLoadingStart;
 @property (nonatomic, copy) RCTDirectEventBlock onLoadingFinish;
 @property (nonatomic, copy) RCTDirectEventBlock onLoadingError;
@@ -29,6 +29,8 @@ - (instancetype)initWithFrame:(CGRect)frame
     super.backgroundColor = [UIColor clearColor];
     _bounces = YES;
     _scrollEnabled = YES;
+    _automaticallyAdjustContentInsets = YES;
+    _contentInset = UIEdgeInsetsZero;
   }
   return self;
 }
@@ -51,6 +53,13 @@ - (void)didMoveToWindow
     _webView.navigationDelegate = self;
     _webView.scrollView.scrollEnabled = _scrollEnabled;
     _webView.scrollView.bounces = _bounces;
+
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
+    if ([_webView.scrollView respondsToSelector:@selector(setContentInsetAdjustmentBehavior:)]) {
+      _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
+    }
+#endif
+
     [self addSubview:_webView];
 
     [self visitSource];
@@ -95,6 +104,21 @@ - (void)setSource:(NSDictionary *)source
   }
 }
 
+- (void)setContentInset:(UIEdgeInsets)contentInset
+{
+  _contentInset = contentInset;
+  [RCTView autoAdjustInsetsForView:self
+                    withScrollView:_webView.scrollView
+                      updateOffset:NO];
+}
+
+- (void)refreshContentInset
+{
+  [RCTView autoAdjustInsetsForView:self
+                    withScrollView:_webView.scrollView
+                      updateOffset:YES];
+}
+
 - (void)visitSource
 {
   // Check for a static html source first
diff --git a/React/Views/RCTWKWebViewManager.m b/React/Views/RCTWKWebViewManager.m
index b3b0f0b43cbed8..f0380185510285 100644
--- a/React/Views/RCTWKWebViewManager.m
+++ b/React/Views/RCTWKWebViewManager.m
@@ -30,6 +30,8 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(allowsInlineMediaPlayback, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(dataDetectorTypes, WKDataDetectorTypes)
+RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
+RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)
                          
 /**
  * Expose methods to enable messaging the webview.