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
+
+```
+
+---
+
### `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 {
renderLoading,
source,
style,
+ containerStyle,
nativeConfig = {},
...otherProps
} = this.props;
@@ -275,6 +276,7 @@ class WebView extends React.Component {
}
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 {
);
return (
-
+
{webView}
{otherView}
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 {
renderError,
renderLoading,
style,
+ containerStyle,
...otherProps
} = this.props;
@@ -313,6 +314,7 @@ class WebView extends React.Component {
}
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 {
);
return (
-
+
{webView}
{otherView}
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;
+
/**
* Function that returns a view to show if there's an error.
*/