Android display issue with hyper link

[dbof10]

Given a html text I shared some of my (perhaps terrible) <a href=\"https://twitter.com/rrhoover/status/924678180073455617\">ideas on Twitter</a> earlier today.

Result

The hyper link takes up one line.

Expected result
The hyper link is inline with other texts

[tinchoz49]

Hi everyone! what is the status of this issue? I'm having the same problem

[dbof10]

No update

[isilher]

Did you try wrapping the surrounding text in a <div> or <p> tag?

[rajasaur]

Thanks for the tip @isilher . Works perfectly when wrapped by a div tag

[dbof10]

Is there a better way to address this since html comes from server?. I don't have control

[rajasaur]

@dbof10 : I havent tried this but when debugging my problem , I found that without a <div> or <p> (or any top-level element), it broke a text like
This is a test <a href='....'>....</a>some more
into three nodes ("This is a test", contents of a tag and "some more"). This probably explains why each part of it is shown separately with a line break between them.

Maybe you could implement the renderNode function and if the nodeName == 'a', then write your custom style into it instead of using the default style ? https://github.com/jsdf/react-native-htmlview#custom-element-rendering

[dbof10]

I agree with custom renderer. However, <a> is for hyperlink. It should be inline. The library should support this behavior by default.

[isilher]

Currently, the library expects valid HTML, meaning it should be wrapped in a single top level tag. Not doing so will break lines for all first level tags (not just <a>) as the RootComponent default is a View (not inline styled).
If you have no control over the source, you could wrap value before passing it to the HTMLView component:

<HTMLView
  value={`<div>${value}</div>`}
  stylesheet={stylesheet}
/>

[dbof10]

That's valid. Thanks