Support React Native Web
See original GitHub issueIs your feature request related to a problem? If so, Please describe. You cannot use a full-featured webview in react native web (ie expo web). For example, there is no hook into if the page it loading, like there is on the react-native webview
Describe the solutions you came up with
- Attempted to use
react-native-web-webview
(https://github.com/react-native-web-community/react-native-web-webview) and use injectedJavascript - Implemented hacky ways to possibly achieve them, like injectedJavascript like this, and adding a heuristic for if the content is loading in a similar hacky manner, like by checking if the
iframe
’siframe?.contentWindow
has items. This works, mostly. But it’d be good to have an official implementation/extraction that uses the best we have to make the RNW iframe implementation as good as it can be.
Additional context
Why do we need this?
- If you’re using RNW to create a mobile-first experience, the current options are extremely hard to work with and result in a poor UI/UX. (I am working on a few projects that require this, and it’s a huge pain point)
- Apps that are built for Native, but also want to run on the web need this support.
There’s not a good way to create a good mobile experience using a webview in RNW (react native web). The react-native-web-webview, from what I could gather, is basically just a wrapper around an iframe, with some basic functionality extracted. You can see the source code at https://github.com/react-native-web-community/react-native-web-webview/blob/master/src/index.js So that means, you’re really just getting an iframe. And if you think about it, that makes complete sense!
However, using that package or just the regular iframe in react native web does not have support for the methods we see on the native webviews ( like from https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md). Some most notable are: scalesPageToFit (this one is huge IMO) injectedJavaScript onError onLoad onLoadEnd onLoadStart onLoadProgress
Now, it’s understandable that a lot of this is not possible. If you look at the options with the native html 5 iframe, most of the props/attributes above are not implemented, but there are hacky ways to possibly achieve them, like injectedJavascript like this, and you can add a heuristic for if the content is loading in a similar hacky manner, like by checking if the iframe
’s iframe?.contentWindow
has items. This works, mostly. But it’d be good to have an official implementation/extraction that uses the best we have to make the RNW iframe implementation as good as it can be.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:13
- Comments:25
Top GitHub Comments
I still am interested in RNW support, so please leave this open.
+1 Thinking about just creating a PR and writing support for it myself. I really don’t want to dangerously set the html or add a package just for this one screen.