Iframe Border Showing in Webview React Native

Why is the iframe within a react native webview on iOS not rendering content?

For showing static HTML or inline HTML, you need to set originWhiteList to *

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

class MyInlineWeb extends Component { 
  render() { 
    return ( 
      <WebView 
        originWhitelist={['*']} 
        source={{ html: '<h1>Hello    world</h1>' }} /> 
    ); 
  } 
} 

Similar to the example above you can load an iFrame inside of a WebView.

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

class MyInlineWeb extends Component { 
  render() { 
    return ( 
      <WebView 
        originWhitelist={['*']} 
        source={{ html: "<iFrame src='your_URL' />" }} /> 
    ); 
  } 
}

So as shown in the example above, your iFrame is loaded inside the WebView component. You can then render any web page or URL inside your iFrame then.

iFrame refused to load inside a React Native Webview

If anyone stumbles on this, the error was due to the fact that I was loading the iFrame in an about:blank (created by react-native-webview) and this is not supported by CSP.

I had to host a real blank page somewhere to embed the iFrame inside and I got it working!

How to use Iframe in react native?

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

react-native-webview control media playback in iframe

For those who also might find themselves in a similar situation, I ended up solving this by making use of Vimeo's player.js API and injecting the necessary JS to react-native-webview.

https://github.com/vimeo/player.js/tree/ccc4d670bf81544710b23c22910ed2f75f62696f#pause-promisevoid-passworderrorprivacyerrorerror

https://github.com/react-native-webview/react-native-webview/blob/eb4e923fb012f1dcb5c5389fb1901ee84e32fa8c/docs/Reference.md#injectjavascriptstr

https://github.com/react-native-webview/react-native-webview/blob/eb4e923fb012f1dcb5c5389fb1901ee84e32fa8c/docs/Guide.md#communicating-between-js-and-native

Facebook like button iframe appears very small on react-native webview

You can set the scalesPageToFit to false like this. Setting width and height to "100%" lets the iframe to take in as much space available.

<SafeAreaView style={{flex: 1}}>
        <WebView
          source={{
            html:
              '<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FGalarmApp%2F&width=200&layout=standard&action=like&size=large&share=false&height=35&appId=1010058565805776" width="100%" height="100%" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>'
          }}
          scalesPageToFit={false}
        />
      </SafeAreaView>

---

Related Topics