โ ๏ธ This documentation is for react-native-render-html v6 (@native-html/iframe-plugin@2.x). For v5, go here.
@native-html/iframe-plugin
Install:
โ ๏ธ With expo, useexpo install
instead to grab a compatiblereact-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.