Skip to content

Commit

Permalink
Implement 'backgroundColor' style
Browse files Browse the repository at this point in the history
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
  • Loading branch information
RSNara authored and facebook-github-bot committed Aug 16, 2018
1 parent 1af17f1 commit 215fa14
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions React/Views/RCTWKWebView.m
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ @interface RCTWKWebView () <WKUIDelegate, WKNavigationDelegate, WKScriptMessageH

@implementation RCTWKWebView
{
UIColor * _savedBackgroundColor;
}

- (void)dealloc
Expand Down Expand Up @@ -56,6 +57,19 @@ - (void)didMoveToWindow
}
}

- (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
Expand Down Expand Up @@ -236,6 +250,8 @@ - (void) webView:(WKWebView *)webView
}];
_onLoadingError(event);
}

[self setBackgroundColor: _savedBackgroundColor];
}

- (void)evaluateJS:(NSString *)js
Expand Down Expand Up @@ -292,6 +308,8 @@ - (void) webView:(WKWebView *)webView
} else if (_onLoadingFinish) {
_onLoadingFinish([self baseEvent]);
}

[self setBackgroundColor: _savedBackgroundColor];
}

- (void)injectJavaScript:(NSString *)script
Expand Down

3 comments on commit 215fa14

@oferRounds
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, the video links are broken :\ (came here from the blog’s link)

@pascalgagneur
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All links seem broken to me

@Monte9
Copy link
Contributor

@Monte9 Monte9 commented on 215fa14 Oct 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah seems like it might only be accessible internally by fb employees. (https://our.intern.facebook.com)

Please sign in to comment.