Weird spacing/newline issues with some tags

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

[tiendq]

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

[richchurcher]

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