question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support React Native Web

See original GitHub issue

Is 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’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.

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:open
  • Created 2 years ago
  • Reactions:13
  • Comments:25

github_iconTop GitHub Comments

4reactions
artsracommented, Apr 21, 2022

I still am interested in RNW support, so please leave this open.

2reactions
inform880commented, Nov 16, 2022

+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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Introduction to React Native for Web
React Native for Web is a compatibility layer between React DOM and React Native. It can be used in new and existing apps,...
Read more >
The complete guide to React Native for Web - LogRocket Blog
Create React App is the standard way to bootstrap web-only React applications. Although it comes with built-in support for aliasing react-native ...
Read more >
React Native For Web Is What You Need For Your Multiplatform
Yes certainly, React Native, which is a cross-platform app development framework, can also be used to develop web applications. Is React Native ......
Read more >
necolas/react-native-web: Cross-platform React UI packages
This is the development monorepo for "React Native for Web" and related projects. Structure .github. Contains workflows used by GitHub Actions. Contains issue ......
Read more >
React Native · Learn once, write anywhere
Written in JavaScript—rendered with native code. React primitives render to native platform UI, meaning your app uses the same native platform APIs other...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found