Adds opaque and underlayColor to WebView.

Summary: Enables overwriting of underlying colors for WebViews. Especially useful if you want to give your WebView a transparent background. Closes #767 Github Author: Lochlan Wansbrough <[email protected]> Test Plan: Imported from GitHub, without a `Test Plan:` line.
facebook · Apr 21, 2015 · 765779a · 765779a
1 parent 82704ad
commit 765779a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
@@ -87,6 +87,8 @@ var WebView = React.createClass({
     html: PropTypes.string,
     renderError: PropTypes.func, // view to show if there's an error
     renderLoading: PropTypes.func, // loading indicator to show
+    bounces: PropTypes.bool,
+    scrollEnabled: PropTypes.bool,
     automaticallyAdjustContentInsets: PropTypes.bool,
     shouldInjectAJAXHandler: PropTypes.bool,
     contentInset: EdgeInsetsPropType,
@@ -131,7 +133,7 @@ var WebView = React.createClass({
       );
     }
 
-    var webViewStyles = [styles.container, this.props.style];
+    var webViewStyles = [styles.container, styles.webView, this.props.style];
     if (this.state.viewState === WebViewState.LOADING ||
       this.state.viewState === WebViewState.ERROR) {
       // if we're in either LOADING or ERROR states, don't show the webView
@@ -145,6 +147,8 @@ var WebView = React.createClass({
         style={webViewStyles}
         url={this.props.url}
         html={this.props.html}
+        bounces={this.props.bounces}
+        scrollEnabled={this.props.scrollEnabled}
         shouldInjectAJAXHandler={this.props.shouldInjectAJAXHandler}
         contentInset={this.props.contentInset}
         automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
@@ -213,6 +217,8 @@ var RCTWebView = createReactIOSNativeComponentClass({
   validAttributes: merge(ReactIOSViewAttributes.UIView, {
     url: true,
     html: true,
+    bounces: true,
+    scrollEnabled: true,
     contentInset: {diff: insetsDiffer},
     automaticallyAdjustContentInsets: true,
     shouldInjectAJAXHandler: true
@@ -250,6 +256,9 @@ var styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  webView: {
+    backgroundColor: '#ffffff',
+  }
 });
 
 module.exports = WebView;
diff --git a/Libraries/RCTWebSocketDebugger/SRWebSocket.m b/Libraries/RCTWebSocketDebugger/SRWebSocket.m
@@ -1702,7 +1702,7 @@ static inline int32_t validate_dispatch_data_partial_string(NSData *data) {
     for (int i = 0; i < maxCodepointSize; i++) {
         NSString *str = [[NSString alloc] initWithBytesNoCopy:(char *)data.bytes length:data.length - i encoding:NSUTF8StringEncoding freeWhenDone:NO];
         if (str) {
-            return data.length - i;
+            return (int32_t)(data.length - i);
         }
     }
 

diff --git a/React/Views/RCTWebView.m b/React/Views/RCTWebView.m
@@ -31,6 +31,7 @@ @implementation RCTWebView
 - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
 {
   if ((self = [super initWithFrame:CGRectZero])) {
+    super.backgroundColor = [UIColor clearColor];
     _automaticallyAdjustContentInsets = YES;
     _contentInset = UIEdgeInsetsZero;
     _eventDispatcher = eventDispatcher;
@@ -95,6 +96,18 @@ - (void)setContentInset:(UIEdgeInsets)contentInset
                       updateOffset:NO];
 }
 
+- (void)setBackgroundColor:(UIColor *)backgroundColor
+{
+  CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor);
+  self.opaque = _webView.opaque = (alpha == 1.0);
+  _webView.backgroundColor = backgroundColor;
+}
+
+- (UIColor *)backgroundColor
+{
+  return _webView.backgroundColor;
+}
+
 - (NSMutableDictionary *)baseEvent
 {
   NSURL *url = _webView.request.URL;

diff --git a/React/Views/RCTWebViewManager.m b/React/Views/RCTWebViewManager.m
@@ -25,6 +25,8 @@ - (UIView *)view
 
 RCT_REMAP_VIEW_PROPERTY(url, URL, NSURL);
 RCT_REMAP_VIEW_PROPERTY(html, HTML, NSString);
+RCT_REMAP_VIEW_PROPERTY(bounces, _webView.scrollView.bounces, BOOL);
+RCT_REMAP_VIEW_PROPERTY(scrollEnabled, _webView.scrollView.scrollEnabled, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets);
 RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(shouldInjectAJAXHandler, BOOL);