How to use Iframe in react native?

user_7234361 0
Viewed 43471

I try to find any way to add Iframe to my react native app. I found react-iframe, but it didn't work for me. I followed document. I just import react-iframe and copy Iframe tag to use. My result is like image below. enter image description here

I need other way to use Iframe in react native app. Thank you.

react-component react-native iframe
4 Answers

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

user_19798610

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}}
/>
user_72343610
Admin1

How about adding the iframe link directly in webview source attribute Ex:

<WebView
   source={{uri: 'https://www.youtube.com/embed/cqyziA30whE'}}
   style={{marginTop: 20}}
/>
user_136372910
Related