Page loads without CSS/style

tcsmobilitydelhi commented 2 years ago

Decision Table

[X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
[X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

[X] I have read the HELP document here: https://git.io/JBi6R
[X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
[X] I have confirmed that this bug has not been reported yet

Description

I am trying to render a webpage using the uri attribute in RenderHtml tag like this: <RenderHtml contentWidth={100} source={{uri: 'http://192.168.29.106:8080/Sample.html'}} />

It loads the page but without styling i.e. it doesn’t use the accompanying css. Only the HTML content displays.

I opened the same uri directly in web browser, it opens up with styling there.

What am I missing?

React Native Information

System:
    OS: Windows 7 6.1.7601
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 2.13 GB / 7.72 GB
  Binaries:
    Node: 12.22.9 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 29

      Build Tools: 28.0.3, 29.0.2, 32.0.0
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Visual Studio: Not Found
  Languages:
    Java: Not Found
    Python: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.0 => 0.63.0
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

6.3.3

Tested Platforms

[X] Android
[ ] iOS
[X] Web
[ ] MacOS
[ ] Windows

Reproduction Platforms

[X] Android
[ ] iOS
[X] Web
[ ] MacOS
[ ] Windows

Minimal, Reproducible Example

<RenderHtml contentWidth={100} source={{uri: 'http://192.168.29.106:8080/Sample.html'}} />

Additional Notes

No response

jsamr commented 2 years ago

Hi @tcsmobilitydelhi! Thanks for taking time to submit a report. The <style> and <link> tags are not supported at the moment. It would require embedding a CSS parser and CSS engine. Given the complexity and overhead, this would be best implemented in C++ with a JSI interface, and some preliminary research is being done in that direction. To have an idea of the kind of required work, I suggest this article from Mozilla team: https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/

In the meantime, you can open a feature request here: https://native-html.canny.io/

tcsmobilitydelhi commented 2 years ago

Thanks @jsamr .

I see this feature has already been requested. Looking forward to it.

meliorence / react-native-render-html