React-native-web: Webview not supported?

[twiz911]

Hi

I'm trying to use the webview component but I'm getting an error in the render() method.

Is webview supported? If not, any idea when it will be?

Many thanks

[miketheanimal]

I have a very primitive version, works in Chrome, if this is any use:

export class WebView extends React.Component {

    loadIFrame = () => {
        this.refs.iframe.srcdoc = this.props.source.html ;
        }

    render () {
        setTimeout(this.loadIFrame) ;
        return (
            <iframe ref="iframe" style={{ height: '100%', width: '100%', border: 0, seamless
            </iframe>
            ) ;
        }
    }

It does what I need, no more.

[necolas]

WebView is not currently supported (see the README for the list of supported components). I have no plans to look into implementing it yet – other parts of the framework are higher priority for us.

[piranna]

Any update on this? I'm needing it too. Would you accept a pull-request?

[damiaozi]

I want it too

[mikeaustin]

Just curious if there would be an issue with X-Frame-Options: SAMEORIGIN? For example, you can't use iframes for some sites. Or would it be used strictly for self-hosted content?

I'm simply raising the question, and am just a react-native-web lurker :)

[piranna]

Just curious if there would be an issue with X-Frame-Options: SAMEORIGIN? For example, you can't use iframes for some sites.

There would be problems, but it's possible to disable the header on Electron or on regular browsers by adding an extension to whitelist the site, it's just a matter of showing a note to the users to install it.

[mikeaustin]

Then it seems pretty straightforward, either to fork and add it, or maybe add a "contrib" section and pull request so it's available, but not supported. i.e. everything in contrib would be experimental/at-your-own-risk. I understand the maintainers' philosophy, but at the same time it would be nice to have WebView available and for others to be able to contribute to it.

I originally looked at react-native-web to prototype react native apps without the hassle of setting up native. I'm busy with other things, but I've been lurking.

[Minishlink]

Hello, you can find an experimental implementation of WebView at react-native-web-community/react-native-web-webview.
It currently supports sources of html (without baseUrl), and uri (simple, or with POST method and application/x-www-form-urlencoded content-type). I plan on adding a prop that opens a new window instead of using an iframe, in order to circumvent CORS issues.
Note that WebView seems like a good candidate to never use on the web, since it leads to bad UX most of the time. Nevertheless, it's good to have an implementation ready in order to move on.

[piranna]

Hello, you can find an experimental implementation of WebView at react-native-web-community/react-native-web-webview.

I was planning to do my own implementation with the same repo name, lol :-P I'll review it and see if I can help :-)

[Minishlink]

Cool, thanks! :)

[miketheanimal]

Note that WebView seems like a good candidate to never use on the web, since it leads to bad UX most of the time. Nevertheless, it's good to have an implementation ready in order to move on.

I have been using react-native-web quite extensively in the development of a react-native app, because even with RN's development speed compared to native, development in a browser is still a lot faster (for me, anyway). So having a WebView implementation is really useful.

[yarra2296]

Is there any Possibility to use the WebView for the React-native-web Component. I tried using react-native-web-webview but I didn't get it working in the Web. So, suggest me a component which is helpful for Displaying the HTML content in the Web page.

[cyberpine]

Any chance for this? Really interested.

[sean-m-oleary]

Just use an iframe if the platform is web. It works.