15

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.

Mengseng Oeng
  • 753
  • 2
  • 7
  • 19

4 Answers4

37

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

Florin Dobre
  • 9,872
  • 3
  • 59
  • 93
  • 1
    I agree your answer, but it did not correct 100%. Thank – Mengseng Oeng Oct 22 '18 at 03:56
  • 13
    I tested my answer and it works great. https://snack.expo.io/HJFjnhVo7. You asked for a way to display iframe and I provided a working way it to you with link to documentation for you customize the response according to your needs. I do not understand why you did not accept it and added same answer with simplified parameters. – Florin Dobre Oct 22 '18 at 07:43
  • @FlorinDobre not sure if you're aware but the above link produces the following error: `Minified React error #130` – Hyetigran Jul 30 '21 at 08:54
  • 1
    The snack link with example from my above comment was tested about 3 years ago. It might not work now, I haven’t tested it in a long time. But the webview code from my answer should still work. – Florin Dobre Jul 31 '21 at 09:23
  • 2
    @Hyetigran I updated the snack code to use the community webview: https://snack.expo.dev/@florindobre99/webview-example – Florin Dobre Aug 02 '21 at 17:14
  • curious to know if there are any advantages to using an iframe in a webview, instead of just a straight up webview? – Chen W Nov 01 '22 at 16:46
11

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}}
/>
Mengseng Oeng
  • 753
  • 2
  • 7
  • 19
  • What's the point of using iframe and webview together? That sounds unecessary. Agree with @FlorinDobre. – Dimitri Kopriwa Jun 23 '20 at 01:52
  • if we use WebView, can we go to fullscreen on Android? – LakshanSS Jan 12 '21 at 07:30
  • @LakshanSS Yes, It's full screen like normal app, but it does not smooth like a native app. – Mengseng Oeng Jan 13 '21 at 06:47
  • @DimitriKopriwa: to develop in `codesandbox`? community/`WebView` doesn't seem to work for `react-native-web`, or I am overlooking their `node.js` container things. All else we must go into `vs code`, `expo` [browser](https://docs.expo.io/guides/running-in-the-browser/) development strategy... I guess there is no use to not build a native app twice... wait yes there is – Nick Carducci for Carface Bank Feb 04 '21 at 13:05
2

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

<WebView
   source={{uri: 'https://www.youtube.com/embed/cqyziA30whE'}}
   style={{marginTop: 20}}
/>
Md Arif Islam
  • 57
  • 2
  • 6
2

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