meliorence · IjzerenHein · Oct 2, 2019
diff --git a/Demo/src/HTMLDemo.js b/Demo/src/HTMLDemo.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Text, ScrollView, TouchableOpacity, Dimensions, Linking } from 'react-native';
+import { View, Text, ScrollView, TouchableOpacity, Dimensions, Linking, WebView } from 'react-native';
 import HTML from 'react-native-render-html';
 import EXAMPLES, * as snippets from './snippets';
 import styles from './styles';
@@ -10,6 +10,7 @@ const CUSTOM_RENDERERS = {};
 const DEFAULT_PROPS = {
     htmlStyles: CUSTOM_STYLES,
     renderers: CUSTOM_RENDERERS,
+    WebView: WebView,
     imagesMaxWidth: IMAGES_MAX_WIDTH,
     onLinkPress: (evt, href) => { Linking.openURL(href); },
     debug: true

diff --git a/README.md b/README.md
@@ -27,6 +27,7 @@ An iOS/Android pure javascript react-native component that renders your HTML int
     - [Lists prefixes](#lists-prefixes)
   - [Styling](#styling)
   - [Images](#images)
+  - [IFrames](#iframes)
   - [Altering content](#altering-content)
     - [alterData](#alterdata)
     - [alterChildren](#alterchildren)
@@ -70,6 +71,7 @@ Prop | Description | Type | Required/Default
 ------ | ------ | ------ | ------
 `renderers` | Your [custom renderers](#creating-custom-renderers) | `object` | Optional, some default ones are supplied (`<a>`, `<img>`...)
 `renderersProps` | Set of props accessible into your [custom renderers](#creating-custom-renderers) in `passProps` (4th argument) | `object` | Optional
+`WebView`| Sets the WebView component to use when rendering `<iframe>` elements | `Component` | Optional
 `html` | HTML string to parse and render | `string` | Required
 `uri` | *(experimental)* remote website to parse and render | `string` | Optional
 `decodeEntities` | Decode HTML entities of your content | `bool` | Optional, defaults to `true`
@@ -211,6 +213,27 @@ Images with broken links will render an empty square with a thin border, similar
 
 Please note that all of these behaviors are implemented in the default `<img>` renderer. If you want to provide your own `<img>` renderer, you'll have to make this happen by yourself. You can use the `img` function in `HTMLRenderers.js` as a starting point.
 
+## IFrames
+
+In order to render `<iframe>` elements, a WebView component needs to be imported and passed to the `<HTML>` element.
+
+```javascript
+import React from 'react';
+import HTML from 'react-native-render-html';
+import { WebView } from 'react-native-webview';
+
+const htmlContent = `
+    <p>Yes you read that right, those damn iframes can render with this plugin.</p>
+    <p>Check this out</p>
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/ZZ5LpwO-An4" frameborder="0" allowfullscreen></iframe>
+    <p style="text-align:center;"><em>We've just rendered a meme</em></p>
+`;
+
+export default IFrameDemo = () => (
+    <HTML html={htmlContent} WebView={WebView}/>
+);
+```
+
 ## Altering content
 
 `alterData` and `alterChildren` props are very useful to make some modifications on the structure of your HTML before it's actually rendered with react components.

diff --git a/package.json b/package.json
@@ -16,8 +16,7 @@
     "buffer": "^4.5.1",
     "events": "^1.1.0",
     "html-entities": "^1.2.0",
-    "htmlparser2": "^3.10.1",
-    "react-native-webview": "^5.6.0"
+    "htmlparser2": "^3.10.1"
   },
   "peerDependencies": {
     "prop-types": ">=15.5.10",

diff --git a/src/HTML.js b/src/HTML.js
@@ -48,7 +48,8 @@ export default class HTML extends PureComponent {
         baseFontStyle: PropTypes.object.isRequired,
         textSelectable: PropTypes.bool,
         renderersProps: PropTypes.object,
-        allowFontScaling: PropTypes.bool
+        allowFontScaling: PropTypes.bool,
+        WebView: PropTypes.elementType
     }
 
     static defaultProps = {

diff --git a/src/HTMLRenderers.js b/src/HTMLRenderers.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { TouchableOpacity, Text, View, Platform } from 'react-native';
-import { WebView } from 'react-native-webview';
 import { _constructStyles, _getElementClassStyles } from './HTMLStyles';
 import HTMLImage from './HTMLImage';
 
@@ -114,7 +113,7 @@ export function ul (htmlAttribs, children, convertedCSSStyles, passProps = {}) {
 export const ol = ul;
 
 export function iframe (htmlAttribs, children, convertedCSSStyles, passProps) {
-    const { staticContentMaxWidth, tagsStyles, classesStyles } = passProps;
+    const { staticContentMaxWidth, tagsStyles, classesStyles, WebView } = passProps;
 
     const tagStyleHeight = tagsStyles.iframe && tagsStyles.iframe.height;
     const tagStyleWidth = tagsStyles.iframe && tagsStyles.iframe.width;
@@ -139,6 +138,11 @@ export function iframe (htmlAttribs, children, convertedCSSStyles, passProps) {
 
     const source = htmlAttribs.srcdoc ? { html: htmlAttribs.srcdoc } : { uri: htmlAttribs.src };
 
+    if (!WebView) {
+        console.warn('react-native-render-html', 'Unable to render <iframe>, please specify the `WebView` prop in <HTML>')
+        return null;
+    }
+
     return (
         <WebView key={passProps.key} source={source} style={style} />
     );