@native-html/iframe-plugin

:warning: This documentation is for react-native-render-html v6 (@native-html/iframe-plugin@2.x). For v5, go here.

@native-html/iframe-plugin

🌐 A WebView-based plugin to render iframes in react-native-render-html.

Try it on Expo!

Install:

:warning: With expo, use expo install instead to grab a compatible react-native-webview version.

npm add --save @native-html/iframe-plugin react-native-webview

yarn add @native-html/iframe-plugin react-native-webview

Features:

• Supports onLinkPress;
• Supports defaultWebViewProps;
• Compliance with RFC001: scales to available width;
• Autoscale feature (adapt zoom level to available width! Disabled by default.);
• A single renderer component exported as default, super easy to plug-in!
• Compatible with react-native-web via @formidable-webview/web

Known Limitations:

• With react-native-web, onLinkPress will not work for external domains.

Compat Table

react-native-render-html	@native-html/iframe-plugin
≥ 5.0.0 < 6.0.0	1.x (documentation)
≥ 6.0.0	2.x (documentation)

Minimal working example

import IframeRenderer, { iframeModel } from '@native-html/iframe-plugin';
import RenderHTML from 'react-native-render-html';
import WebView from 'react-native-webview';

const renderers = {
  iframe: IframeRenderer
};

const customHTMLElementModels = {
  iframe: iframeModel
};

// ...

<RenderHTML
  renderers={renderers}
  WebView={WebView}
  source={{ html: '<iframe ...></iframe>' }}
  customHTMLElementModels={customHTMLElementModels}
  defaultWebViewProps={
    {
      /* Any prop you want to pass to all WebViews */
    }
  }
  renderersProps={{
    iframe: {
      scalesPageToFit: true,
      webViewProps: {
        /* Any prop you want to pass to iframe WebViews */
      }
    }
  }}
/>;

Customizing

To customize the behavior of this renderer, you can pass a config object to the renderersProps.iframe prop of RenderHTML component.

See the documentation for this object here: IframeConfig.

Zoom on the autoscale feature

When scalesPageToFit is set to true, if the iframe width (as determined by the width element attribute) is greater than the available width (as determined by HTML props contentWidth and computeEmbeddedMaxWidth), the WebView will be zoomed out by just the right amount to have no horizontal cropping. This is equivalent to resizeMode: 'contain' for images. See example below with scalesPageToFit enabled (left) and disabled (right):

Providing headers

import IframeRenderer, { iframeModel } from '@native-html/iframe-plugin';
import RenderHTML from 'react-native-render-html';
import WebView from 'react-native-webview';

const renderers = {
  iframe: IframeRenderer
}

const customHTMLElementModels = {
  iframe: iframeModel
}

function provideEmbeddedHeaders(uri, tagName) {
  if (tagName === "iframe" && uri.startsWith("https://protected-domain.com")) {
    // Pass an authorization header to all iframes in protected-domain.com
    return {
      Authorization: "Bearer XXXXXXXX";
    }
  }
}

// ...

<RenderHTML renderers={renderers}
      WebView={WebView}
      source={{ html: '<iframe width="400" height="200" src="https://protected-domain.com/user/cart?embedded"></iframe>' }}
      customHTMLElementModels={customHTMLElementModels}
      provideEmbeddedHeaders={provideEmbeddedHeaders}
/>

Customizing the renderer

You can customize the renderer logic thanks to useHtmlIframeProps hook, iframeModel and HTMLIframe exports:

import {
  useHtmlIframeProps,
  HTMLIframe,
  iframeModel
} from '@native-html/iframe-plugin';

const IframeRenderer = function IframeRenderer(props) {
  const iframeProps = useHtmlIframeProps(props);
  // Do customize the props here; wrap with your own container...
  return <HTMLIframe {...iframeProps} />;
};

const renderers = {
  iframe: IframeRenderer
};

// use "renderers" prop in your RenderHTML instance

API Reference

Documentation for all exports of this library is available here.