Skip to content

Commit 215fa14

Browse files
RSNarafacebook-github-bot
authored andcommitted
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
1 parent 1af17f1 commit 215fa14

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

React/Views/RCTWKWebView.m

+18
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ @interface RCTWKWebView () <WKUIDelegate, WKNavigationDelegate, WKScriptMessageH
1515

1616
@implementation RCTWKWebView
1717
{
18+
UIColor * _savedBackgroundColor;
1819
}
1920

2021
- (void)dealloc
@@ -56,6 +57,19 @@ - (void)didMoveToWindow
5657
}
5758
}
5859

60+
- (void)setBackgroundColor:(UIColor *)backgroundColor
61+
{
62+
_savedBackgroundColor = backgroundColor;
63+
if (_webView == nil) {
64+
return;
65+
}
66+
67+
CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor);
68+
self.opaque = _webView.opaque = (alpha == 1.0);
69+
_webView.scrollView.backgroundColor = backgroundColor;
70+
_webView.backgroundColor = backgroundColor;
71+
}
72+
5973
/**
6074
* This method is called whenever JavaScript running within the web view calls:
6175
* - window.webkit.messageHandlers.[MessageHanderName].postMessage
@@ -236,6 +250,8 @@ - (void) webView:(WKWebView *)webView
236250
}];
237251
_onLoadingError(event);
238252
}
253+
254+
[self setBackgroundColor: _savedBackgroundColor];
239255
}
240256

241257
- (void)evaluateJS:(NSString *)js
@@ -292,6 +308,8 @@ - (void) webView:(WKWebView *)webView
292308
} else if (_onLoadingFinish) {
293309
_onLoadingFinish([self baseEvent]);
294310
}
311+
312+
[self setBackgroundColor: _savedBackgroundColor];
295313
}
296314

297315
- (void)injectJavaScript:(NSString *)script

0 commit comments

Comments
 (0)