From 902d3d1e7ff1ddb591b3670c8b570e3c59c04ad4 Mon Sep 17 00:00:00 2001
From: Marco Marinangeli <marco.marinangeli@gmail.com>
Date: Sun, 29 Sep 2019 15:43:48 +0200
Subject: [PATCH] feat(new prop): containerStyle (#912)

* feat(new prop): containerStyle

* chore(docs): Add documentation for `containerStyle`
---
 docs/Reference.md       | 28 ++++++++++++++++++++++++++--
 src/WebView.android.tsx |  4 +++-
 src/WebView.ios.tsx     |  4 +++-
 src/WebViewTypes.ts     |  7 +++++++
 4 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/docs/Reference.md b/docs/Reference.md
index 69066f9..d2b5e37 100644
--- a/docs/Reference.md
+++ b/docs/Reference.md
@@ -25,6 +25,7 @@ This document lays out the current public properties and methods for the React N
 - [`onShouldStartLoadWithRequest`](Reference.md#onshouldstartloadwithrequest)
 - [`startInLoadingState`](Reference.md#startinloadingstate)
 - [`style`](Reference.md#style)
+- [`containerStyle`](Reference.md#containerStyle)
 - [`decelerationRate`](Reference.md#decelerationrate)
 - [`domStorageEnabled`](Reference.md#domstorageenabled)
 - [`javaScriptEnabled`](Reference.md#javascriptenabled)
@@ -343,6 +344,7 @@ url
 ### `onHttpError`
 
 Function that is invoked when the `WebView` receives an http error.
+
 > **_Note_**
 > Android API minimum level 23.
 
@@ -357,7 +359,10 @@ Example:
   source={{ uri: 'https://facebook.github.io/react-native' }}
   onHttpError={syntheticEvent => {
     const { nativeEvent } = syntheticEvent;
-    console.warn('WebView received error status code: ', nativeEvent.statusCode);
+    console.warn(
+      'WebView received error status code: ',
+      nativeEvent.statusCode,
+    );
   }}
 />
 ```
@@ -446,7 +451,7 @@ Example:
   onContentProcessDidTerminate={syntheticEvent => {
     const { nativeEvent } = syntheticEvent;
     console.warn('Content process terminated, reloading', nativeEvent);
-    this.refs.webview.reload()
+    this.refs.webview.reload();
   }}
 />
 ```
@@ -602,6 +607,25 @@ Example:
 
 ---
 
+### `containerStyle`
+
+A style object that allow you to customize the `WebView` container style. Please note that there are default styles (example: you need to add `flex: 0` to the style if you want to use `height` property).
+
+| Type  | Required |
+| ----- | -------- |
+| style | No       |
+
+Example:
+
+```jsx
+<WebView
+  source={{ uri: 'https://facebook.github.io/react-native' }}
+  containerStyle={{ marginTop: 20 }}
+/>
+```
+
+---
+
 ### `decelerationRate`
 
 A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use the string shortcuts `"normal"` and `"fast"` which match the underlying iOS settings for `UIScrollViewDecelerationRateNormal` and `UIScrollViewDecelerationRateFast` respectively:
diff --git a/src/WebView.android.tsx b/src/WebView.android.tsx
index c2bdb48..6e47a38 100644
--- a/src/WebView.android.tsx
+++ b/src/WebView.android.tsx
@@ -252,6 +252,7 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
       renderLoading,
       source,
       style,
+      containerStyle,
       nativeConfig = {},
       ...otherProps
     } = this.props;
@@ -275,6 +276,7 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
     }
 
     const webViewStyles = [styles.container, styles.webView, style];
+    const webViewContainerStyle = [styles.container, containerStyle];
 
     if (source && 'method' in source) {
       if (source.method === 'POST' && source.headers) {
@@ -317,7 +319,7 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
     );
 
     return (
-      <View style={styles.container}>
+      <View style={webViewContainerStyle}>
         {webView}
         {otherView}
       </View>
diff --git a/src/WebView.ios.tsx b/src/WebView.ios.tsx
index edb4e64..c822dd2 100644
--- a/src/WebView.ios.tsx
+++ b/src/WebView.ios.tsx
@@ -291,6 +291,7 @@ class WebView extends React.Component<IOSWebViewProps, State> {
       renderError,
       renderLoading,
       style,
+      containerStyle,
       ...otherProps
     } = this.props;
 
@@ -313,6 +314,7 @@ class WebView extends React.Component<IOSWebViewProps, State> {
     }
 
     const webViewStyles = [styles.container, styles.webView, style];
+    const webViewContainerStyle = [styles.container, containerStyle];
 
     const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
       this.onShouldStartLoadWithRequestCallback,
@@ -351,7 +353,7 @@ class WebView extends React.Component<IOSWebViewProps, State> {
     );
 
     return (
-      <View style={styles.container}>
+      <View style={webViewContainerStyle}>
         {webView}
         {otherView}
       </View>
diff --git a/src/WebViewTypes.ts b/src/WebViewTypes.ts
index d25e066..1039c65 100644
--- a/src/WebViewTypes.ts
+++ b/src/WebViewTypes.ts
@@ -4,6 +4,8 @@ import { ReactElement, Component } from 'react';
 import {
   NativeSyntheticEvent,
   ViewProps,
+  StyleProp,
+  ViewStyle,
   NativeMethodsMixin,
   Constructor,
   UIManagerStatic,
@@ -576,6 +578,11 @@ export interface WebViewSharedProps extends ViewProps {
    */
   javaScriptEnabled?: boolean;
 
+  /**
+   * Stylesheet object to set the style of the container view.
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+
   /**
    * Function that returns a view to show if there's an error.
    */