How to use Iframe in react native?

Try to use react-native-webview:

import { WebView } from 'react-native-webview';

....

<WebView
          scalesPageToFit={true}
          bounces={false}
          javaScriptEnabled
          style={{ height: 500, width: 300 }}
          source={{
            html: `
                  <!DOCTYPE html>
                  <html>
                    <head></head> // <--add header styles if needed
                    <body>
                      <div id="baseDiv">${iframeString}</div> //<--- add your iframe here
                    </body>
                  </html>
            `,
          }}
          automaticallyAdjustContentInsets={false}
        />

You can use an iframeString value like:

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
            title="iframe Example 1" width="400" height="300">
</iframe>

Notes:

1) since source.html param can be any html string you could also pass the iframeString directly without any html page wrapper. In my cases I found it's easier to customize the displayed content with that outer html wrapper code.

2) known issues about iframes and rn-webview:

https://github.com/react-native-webview/react-native-webview/issues?q=iframe+is%3Aopen

3) Link to snack:

https://snack.expo.dev/@florindobre99/webview-example

More info about webview here:

https://github.com/react-native-community/react-native-webview


The above answers worked fine if only the iframe had to be displayed but for displaying iframe mixed in with other data I found this link to be a lot more helpful.

https://github.com/native-html/plugins/tree/master/packages/iframe-plugin#readme


I answer on my question.

I used webview for display Iframe.

<WebView
   source={{html: '<iframe width="100%" height="50%" src="https://www.youtube.com/embed/cqyziA30whE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'}}
   style={{marginTop: 20}}
/>

Tags:

Iframe

React Native

React Component

Recent Posts