React-native-render-html: [Bug] Not rendering properly

Created on 29 Jan 2021 · 11Comments · Source: meliorence/react-native-render-html

Oath

I swear that I have completed these tasks before submitting:

[x] I have read the contribution guidelines here: https://git.io/JJ0Pg
[x] I have read the documentation here: https://git.io/JJcAl
[x] I have confirmed that this bug has not been reported yet

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”

Bug Report

HTML is not being rendered properly.

Libraries

react-native-render-html: 6.0.0-alpha.11
react-native-webview: N/A

Reproduction

https://snack.expo.io/@jsamr/rnrh-453

Description

HTML Should be rendered like this.

screenshot-2021-01-29_21 37 10 703

But instead, it's like this.

screenshot-2021-01-29_21 43 01 592

Reproducible Demo

https://snack.expo.io/@jsamr/rnrh-453

(Paste the link to an example project or paste the entirety of the relevant
source code. When deemed appropriate, provide instructions to reproduce the
issue.)

(If you plan to provide a Regression Test PR, just leave a line written
Planned Regression Test and link it here when it's ready. We will be happy to
provide you help with crafting the test on our Discord #contributing channel.)

bug

Source

sayem314

All 11 comments

Working example with a different modules.
https://snack.expo.io/@sayem314/f80ec5

sayem314 on 29 Jan 2021

Another issue I have come across.

screenshot-2021-01-30_00 05 10 439

[Sat Jan 30 2021 24:05:46.696]  INFO     Transient Render Tree update:
 •TDocument(tag=html)
  └─•TBlock(tag=body)
    ├─•TBlock(tag=h2)
    │ └─•TPhrasing(anonymous)
    │   └─•TText(anonymous,data["rails made rails/tailwin"…])
    ├─•TPhrasing(anonymous)
    │ └─•TText(tag=i,data["Thursday, January 14, 21"…])
    └─•TBlock(tag=div,classes=public)
      └─•TBlock(tag=div,classes=body)
        └─•TBlock(tag=div,classes=d-flex flex-items-baseline border-bottom border-gray py-3)
          ├─•TBlock(tag=span)
          │ └─•TBlock(tag=a,anchor[/rails])
          │   └─•TBlock(tag=img,classes=avatar)
          └─•TBlock(tag=div,classes=d-flex flex-column width-full)
            ├─•TBlock(tag=div)
            │ └─•TBlock(tag=div,classes=d-flex flex-items-baseline)
            │   └─•TBlock(tag=div)
            │     └─•TPhrasing(anonymous)
            │       ├─•TText(tag=a,classes=link-gray-dark no-underline text-bold wb-break-all d-inline-block,data["rails"],anchor[/rails])
            │       ├─•TText(anonymous,data[" made "])
            │       ├─•TText(tag=a,classes=link-gray-dark no-underline text-bold wb-break-all d-inline-block,data["rails/tailwindcss-rails"],anchor[/rails/tailwindcss-rails])
            │       ├─•TText(anonymous,data[" public"])
            │       └─•TPhrasing(tag=span,classes=f6 text-gray-light no-wrap ml-1)
            └─•TBlock(tag=div,classes=Box p-3 my-2)
              └─•TBlock(tag=div)
                ├─•TBlock(tag=div,classes=f4 lh-condensed text-bold text-gray-dark)
                │ └─•TPhrasing(anonymous)
                │   └─•TText(tag=a,classes=link-gray-dark no-underline text-bold wb-break-all d-inline-block,data["rails/tailwindcss-rails"],anchor[/rails/tailwindcss-rails])
                ├─•TBlock(tag=div,classes=dashboard-break-word text-gray mt-1 mb-0 repo-description)
                │ └─•TBlock(tag=p)
                └─•TBlock(tag=p,classes=f6 text-gray mt-2 mb-0)
                  ├─•TPhrasing(anonymous)
                  │ └─•TPhrasing(tag=span,classes=d-inline-block text-gray mr-3)
                  │   └─•TPhrasing(tag=span,classes=ml-0)
                  │     ├─•TText(tag=span,classes=repo-language-color,data[""])
                  │     ├─•TText(anonymous,data[" "])
                  │     └─•TText(tag=span,data["CSS"])
                  ├─•TBlock(tag=span)
                  │ ├─•TBlock(tag=svg,classes=octicon octicon-star mr-1)
                  │ │ └─•TEmpty(tag=path)
                  │ └─•TPhrasing(anonymous)
                  │   └─•TText(anonymous,data["494"])
                  └─•TPhrasing(anonymous)
                    └─•TText(tag=span,data["Updated Jan 27"])

sayem314 on 29 Jan 2021

@sayem314 To help you properly, I'll ask a reproduction that doesn't rely on a web service, but rather hardcoded HTML. That'll help me investigate the HTML and which rendering issues we're facing. Please also note that this is not a Web engine, but rather a tool to translate HTML into native views. However, we try to follow the HTML and CSS standards as the default rendering logic.

jsamr on 29 Jan 2021

Sure I will produce some hardcoded HTML and reproduce it now.

sayem314 on 29 Jan 2021

👍1

Another issue I have came across when using.

htmlParserOptions={{
  xmlMode: true, // since I'm reading feeds html
  decodeEntities: false, // I do that already with feed parser library
}}

screenshot-2021-01-30_00 05 10 439

[Sat Jan 30 2021 24:05:46.696]  INFO     Transient Render Tree update:
 •TDocument(tag=html)
  └─•TBlock(tag=body)
    ├─•TBlock(tag=h2)
    │ └─•TPhrasing(anonymous)
    │   └─•TText(anonymous,data["rails made rails/tailwin"…])
    ├─•TPhrasing(anonymous)
    │ └─•TText(tag=i,data["Thursday, January 14, 21"…])
    └─•TBlock(tag=div,classes=public)
      └─•TBlock(tag=div,classes=body)
        └─•TBlock(tag=div,classes=d-flex flex-items-baseline border-bottom border-gray py-3)
          ├─•TBlock(tag=span)
          │ └─•TBlock(tag=a,anchor[/rails])
          │   └─•TBlock(tag=img,classes=avatar)
          └─•TBlock(tag=div,classes=d-flex flex-column width-full)
            ├─•TBlock(tag=div)
            │ └─•TBlock(tag=div,classes=d-flex flex-items-baseline)
            │   └─•TBlock(tag=div)
            │     └─•TPhrasing(anonymous)
            │       ├─•TText(tag=a,classes=link-gray-dark no-underline text-bold wb-break-all d-inline-block,data["rails"],anchor[/rails])
            │       ├─•TText(anonymous,data[" made "])
            │       ├─•TText(tag=a,classes=link-gray-dark no-underline text-bold wb-break-all d-inline-block,data["rails/tailwindcss-rails"],anchor[/rails/tailwindcss-rails])
            │       ├─•TText(anonymous,data[" public"])
            │       └─•TPhrasing(tag=span,classes=f6 text-gray-light no-wrap ml-1)
            └─•TBlock(tag=div,classes=Box p-3 my-2)
              └─•TBlock(tag=div)
                ├─•TBlock(tag=div,classes=f4 lh-condensed text-bold text-gray-dark)
                │ └─•TPhrasing(anonymous)
                │   └─•TText(tag=a,classes=link-gray-dark no-underline text-bold wb-break-all d-inline-block,data["rails/tailwindcss-rails"],anchor[/rails/tailwindcss-rails])
                ├─•TBlock(tag=div,classes=dashboard-break-word text-gray mt-1 mb-0 repo-description)
                │ └─•TBlock(tag=p)
                └─•TBlock(tag=p,classes=f6 text-gray mt-2 mb-0)
                  ├─•TPhrasing(anonymous)
                  │ └─•TPhrasing(tag=span,classes=d-inline-block text-gray mr-3)
                  │   └─•TPhrasing(tag=span,classes=ml-0)
                  │     ├─•TText(tag=span,classes=repo-language-color,data[""])
                  │     ├─•TText(anonymous,data[" "])
                  │     └─•TText(tag=span,data["CSS"])
                  ├─•TBlock(tag=span)
                  │ ├─•TBlock(tag=svg,classes=octicon octicon-star mr-1)
                  │ │ └─•TEmpty(tag=path)
                  │ └─•TPhrasing(anonymous)
                  │   └─•TText(anonymous,data["494"])
                  └─•TPhrasing(anonymous)
                    └─•TText(tag=span,data["Updated Jan 27"])

Yes, because it is not a Web engine, we don't provide default renderers for SVG tags. But one SVG renderer might be implemented at some point in the https://github.com/native-html/plugins project (I can also be hired for a paid job regarding this feature). Also, make sure the react-native-webview library would not be a better fit for your requirements.

jsamr on 29 Jan 2021

👍1

Here is reproducible code updated with hard coded HTML.
https://snack.expo.io/@sayem314/2ee97b

sayem314 on 29 Jan 2021

And here is working one with a different library.
https://snack.expo.io/@sayem314/a8065f

sayem314 on 29 Jan 2021

Regarding SVG, yes it would be nice to have but take your time. I wish I could donate enough to you for maintaining this project. It's all personal work. Hope I can donate or hire you in the future If I do make a good profit.

sayem314 on 29 Jan 2021

@sayem314 Okay, nothing unexpected, I'll explain all steps. But before that, I noticed you didn't use the foundry release in the example!

If I put your plain HTML in a browser, here is how it's rendered:

With react-native-render-html (foundry):

I notice 3 differences:

The image is centered in react-native-render-html. RNRH default image renderer uses a wrapper: you can set justifyContent: "start" rule to override this behavior.
"Jan 14, 2021" is not displayed. This is because the HTML contains a non-standard tag, relative-time. You support this tag via a custom renderer.
The SVG element is not rendered. Identically, you can create a custom renderer which would render the SVG markup.

In the following snack, I addressed the first two concerns: https://snack.expo.io/@jsamr/rnrh-456
Below are comments on those customizations:

I use tagsStyles prop to customize the img tag's styles.
I use renderers prop to declare a renderer for the "relative-time" element. Because I want a very simple renderer, I use the "lite" renderer declaration which is an object with a model attribute, being the same model as the span tag. This model attribute determines how this tag should be treated by the transient render engine (the engine that translates HTML to a tree structure ready for rendering).
I use ignoreDOMNode prop to ignore SVG tags (it would otherwise break the inline context). This is actually a bug: a unsupported tag should not break the inline context.

Screenshot after those "fixes":