Weird spacing/newline issues with some tags

[kengorab]

I've noticed some unexpected rendering when dealing with some tags. I've listed three of them here (p, ul, and pre). There's a lot here (reality vs. expectation for each tag), but if you skip to the end I note the part of the code where (I think) the problem/solution lies.

<p> Tags

The html that's passed in here is

1. Use <a href="http//asciiflow.com/" rel="nofollow">http://asciiflow.com/</a> to generate diagram<p>2. Use Ascii to SVG<span></span>

(exactly like that, with no newlines). This produces:

What I'd expect to see is something like this:

1. Use http://asciiflow.com/ to generate diagram

2. Use Ascii to SVG

<ul> Tags

The html that's passed in here is

Here is a list: <ul><li>Item 1</li><li>Item 2</li></ul> It was a good list

which produces:

What I'd expect to see is something like this:

Here is a list:
    • Item 1
    • Item 2 
It was a good list.

(note that, aside from the newline errors, the rendered version of this html doesn't trim the whitespace preceeding the 'It was a good list' text node. I'll file a separate issue for that.)

<pre> Tags

(This is the last one, I promise...)

The html that's passed in here is

<pre><code>console.log('hello');</code></pre> That was some code

which produces:

What I'd expect to see is something like this:

(A side issue here is that, by default, the Monaco font is not present in Android, so pre/code nodes just use the normal font family. In the examples above, I set the fontFamily to monospace, which should probably be the default. I'll file a separate issue for that.)

---

Sorry, this is a rather large issue. I can break this up into separate issues (one per tag maybe?) if it'll make it easier to track progress on it. Although, I think a lot of the problem/solution lies within this block in htmlToElement.js (the expectation screenshot under the <pre> section was taken from a run of my app where, in the htmlToElement.js file, I added another line break after the domToElement function call, if the node was a pre node).

[markusguenther]

I don't have the same issues like you. But I had whitespaces after the
tags and the htmlview package creates a new Text Component after a break but does not remove the whitespace.

So the new Text element starts with a whitespace.

    function removeTailingWhiteSpaces(text) {
        return text.replace(/\s*(<br \/> | <br>)\s*/gi, '<br\>')
    }

This is my current hack for that. But it would better to have this in the package.

Maybe you have similar problems.

[tiendq]

My issue is a big white space following p tags, and marginBottom has no effect 👎

[gregblass]

IMO, biggest issue of the library. Can't control bottom margin on p tags.

[gregblass]

This is driving me nuts. I've forked this repo and modified to to a barebones version, and for some reason rendering Text elements inside the parent View component just ignores margins. Other styling works (like colors), but for some bewildering reason, it ignores margins on text elements.

[gregblass]

I see why now. Its wrapping the text component that you're attempting to apply a style to with another text component, which overrides the margin.

[tiendq]

@gregblass did you mean <Text><Text></Text></Text> and we're trying to style the inner Text? :(

[WorldWideWebb]

Is there a fix for that?

[gregblass]

@tiendq Yep, exactly.

@WorldWideWebb No. I modified this library pretty heavily for my own project. The double Text are gonna be hard coded in there because of the way it was written. I needed control over my paragraph margins and wanted to add stuff like unordered list items, etc.

If I remember correctly, every component gets wrapped in a parent Text component, which is what is causing the margins to be ignored.

[gregblass]

I believe this was the culprit: https://github.com/jsdf/react-native-htmlview/blob/master/htmlToElement.js#L42

So the 'text' there represents actual raw text, which gets put into a Text component.

That gets wrapped in a parent Text component here, recursively: https://github.com/jsdf/react-native-htmlview/blob/master/htmlToElement.js#L95

Parent text component doesn't take any styles as props, and React Native ignores the child Text margins and padding if they are passed in.

[WorldWideWebb]

Ah - yes. I see what's going on.

[bas-ie]

So of the problems reported in the OP, the <pre> and <ol> issues are solved. The first issue,

1. Use <a href="http//asciiflow.com/" rel="nofollow">http://asciiflow.com/</a> to generate diagram<p>2. Use Ascii to SVG<span></span>

now produces:

1. Use
http://asciiflow.com/
to generate diagram
2. Use Ascii to SVG

which I guess is marginally better in that it recognises a paragraph should break to a new line! The broken appearance of the rest of the text is because each inline element is receiving a newline, which is obviously not ideal but appropriately summarised in #114 so I'm going to close this.

[zarcode]

@gregblass @kengorab anyone can help me with this issue
https://www.screencast.com/t/8hOZoocMHS
I am getting too much whitespaces between elements. This is how html looks:

<p>Hello this text is <strong>Bold</strong> and this one is <em>italic</em>. Add some link <a href="http://some.com" target="_blank">link</a> not <del datetime="2017-08-10T06:02:09+00:00">deleted</del>.</p>
<blockquote><p>quote</p></blockquote>
<ul>
<li>some</li>
<li>item2</li>
<li>item3</li>
</ul>
<ol>
<li>some</li>
<li>item2</li>
<li>item3</li>
</ol>

Also as you can see first <p> is too high ( marked blue )

[bas-ie]

@zarcode In a multiline string (denoted by backticks `<p>...</p>`) newlines are preserved. I suspect this is what you're seeing. Compare the behaviour of the following:

import React from 'react';
import HTMLView from 'react-native-htmlview'

export default class App extends React.Component {
  render() {
    const htmlContent = `<p>Hello this text is <strong>Bold</strong> and this one is <em>italic</em></p><blockquote><p>quote</p></blockquote><ul><li>item1</li><li>item2</li><li>item3</li></ul>`
    return (
      <HTMLView value={htmlContent} />
    )
  }
}

Presumably the content you're displaying will be arriving in a non-preformatted way, so you should be ok. The spacing between blockquote and paragraph is a little wonky though.

[sospedra]

@richchurcher bingo!
I suggest to add a trim when sharing the value prop

<HTMLView value={myContent.trim()} />