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

Question

I have a ReactNative app that simply uses a webview to display our react website. Our site allows users to view emails, and in order to properly render these email messages we use an iframe. So our iframe looks like this:

<iframe className={'email-view-body-iframe'} srcDoc={pViewMessage.body}/>

Where srcDoc is the body of the message that is to be viewed, which may be plain text, legacy rtf messages, or html messages. And it works as expected on all platforms except iOS.

I've gone through the webview docs and I'm not seeing anything that jumps out at me, and I know the iframe is there because I styled it with an odd colored background just so I could check that it was indeed being rendered in the correct place.

Can someone point me in the right direction?

Answer 1

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.