From 215fa14efc2a817c7e038075163491c8d21526fd Mon Sep 17 00:00:00 2001
From: Ramanpreet Nara <ramanpreet@fb.com>
Date: Thu, 16 Aug 2018 13:34:24 -0700
Subject: [PATCH] Implement 'backgroundColor' style

Summary:
@public

This diff implements background colors for the `RCTWKWebView` component by proxying the background color prop to the underlying `WKWebView` and its underlying `UIScrollView`.

There's few differences between `backgroundColor` in `RCTWebView` and `RCTWKWebView` implementations:
1. With `UIWebView,` the background color gets applied after the page loads. With `WKWebView`, this isn't necessarily true. This results in a white flicker on solid backgrounds because sometimes, the background color is set before the page loads. This video illustrates the problem: https://our.intern.facebook.com/intern/px/p/9QBH
1. As far as I can tell, `WKWebView` doesn't handle transparent backgrounds correctly. Either that, or I could be setting the background color incorrectly. I set the background color to `rgba(1, 1, 1, 0.5)` and recorded how both `RCTWebView` and `RCTWKWebView` render. These two videos indicate the differences:
**RCTWebView: Lighter background**
https://pxl.cl/9R13
**RCTWKWebView: Darker background**
https://pxl.cl/9R1b

I tried to replicate this on the web. According to [[ https://our.intern.facebook.com/intern/fiddle/zCHu/ | this fiddle ]], `RCTWebView` is correct. Clearly, RCTWKWebView is rendering transparent backgrounds a bit darker than necessary. This doesn't seem simple to debug, so I've created a task to document this work: T23815343. I'll get to it eventually.

Reviewed By: shergin

Differential Revision: D6398209

fbshipit-source-id: 1812cb68133bc18a3278f6b328d7b085362528b0
---
 React/Views/RCTWKWebView.m | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/React/Views/RCTWKWebView.m b/React/Views/RCTWKWebView.m
index 8cb16175f..0a55fdccd 100644
--- a/React/Views/RCTWKWebView.m
+++ b/React/Views/RCTWKWebView.m
@@ -15,6 +15,7 @@ static NSString *const MessageHanderName = @"ReactNative";
 
 @implementation RCTWKWebView
 {
+  UIColor * _savedBackgroundColor;
 }
 
 - (void)dealloc
@@ -56,6 +57,19 @@ static NSString *const MessageHanderName = @"ReactNative";
   }
 }
 
+- (void)setBackgroundColor:(UIColor *)backgroundColor
+{
+  _savedBackgroundColor = backgroundColor;
+  if (_webView == nil) {
+    return;
+  }
+
+  CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor);
+  self.opaque = _webView.opaque = (alpha == 1.0);
+  _webView.scrollView.backgroundColor = backgroundColor;
+  _webView.backgroundColor = backgroundColor;
+}
+
 /**
  * This method is called whenever JavaScript running within the web view calls:
  *   - window.webkit.messageHandlers.[MessageHanderName].postMessage
@@ -236,6 +250,8 @@ static NSString *const MessageHanderName = @"ReactNative";
     }];
     _onLoadingError(event);
   }
+
+  [self setBackgroundColor: _savedBackgroundColor];
 }
 
 - (void)evaluateJS:(NSString *)js
@@ -292,6 +308,8 @@ static NSString *const MessageHanderName = @"ReactNative";
   } else if (_onLoadingFinish) {
     _onLoadingFinish([self baseEvent]);
   }
+
+  [self setBackgroundColor: _savedBackgroundColor];
 }
 
 - (void)injectJavaScript:(NSString *)script