<p></p> gets too much space after

[nbastoWM]

Hi,

If I have some text like <p>123</p><p>456</p> the final result has like 3 or 4 break lines between the two paragraphs.
I tryed to put negative margins and paddings on p tag style but with no success.
Is there any way reduce that space?
Thanks.

[andue]

@nbastoWM did you found a solution yet?

[grittathh]

Editing line 11 in HTMLView.js will do the trick

[andue]

thx @grittathh

[raphaelvigee]

This has done the trick :

var desc = this.description
            .replace(new RegExp('<p>', 'g'), '<span>')
            .replace(new RegExp('</p>', 'g'), '</span>')
;

[s-ostrovsky]

@raphaelvigee can you explain your solution? thx

[raphaelvigee]

The p tags have a margin-bottom, replacing them with spans made the trick

[jonolock91]

If you go into the installed node module package and go to the file htmlToElement.js on line 11 you can remove a new line break character const PARAGRAPH_BREAK = '\n\n'; reducing it to one line - Just note that if you re-install the package it'll be overwritten.

[gregblass]

First off, thanks so much for this. I told my client that we would be able to keep the existing formatting from data that was originally formatted for the web for this React Native project, I was pretty worried when I found at that we could not natively. This library was a lifesaver.

Everything works just as I would hope for, except for this paragraph issue...there is a lot of space by default when there are two newlines.

I'm not sure if its possible to style newlines, but as it is right now, two newlines creates a fairly large and noticeable gap in my project (0.44).

Its really easy to edit the code from within your node module directly and set it to one newline (which looks perfect) - but it would be great if the PARAGRAPH_BREAK const in htmlToElement.js was a prop in HtmlView so you could override it.

Not the end of the world, I just have to be careful that my changes don't get overwritten.

[gregblass]

Also, is there any reason why marginBottom: 20 wouldn't work on a p tag? I could just pass in addLineBreaks={false} and control the bottom margin on paragraphs myself and then not have to modify the library code, but for some reason it isn't being applied. I'm trying to look at the code but the part where styling is applied to the <Text> element is confusing me a bit.

[jasongrishkoff]

Encountering this issue as well on my side. The span solution isn't ideal as it causes a whole bunch of other formatting inconsistencies.

[gregblass]

There is a parent Text component wrapping any child Text components in this library. I ended up forking it and re-writing for my use case. IMO its a fairly significant oversight because of the fact that nested Text components in React Native will ignore margins and padding, which cripples your styling options.

[centotaure]

Having this issue as well, is an official fix planned ? ( RN 0.44.3 )

[gregblass]

I can't speak for the developer here, but I didn't have time to wait around. You could always submit a PR with that extra Text element removed. Or fork this repo and use your own. As soon as I get a spare second I may either upload my fork or submit a PR for this. The issue is that I changed a lot of code, so I may just upload my fork to github.

I ended up adding support for other stuff that I needed, like ordered and unordered lists.

[isilher]

From 0.10.0 you can pass your own values for bullet, paragraphBreak, lineBreak, NodeComponent, nodeComponentProps, RootComponent, rootComponentProps, TextComponent and textComponentProps. That should allow for multiple approaches to solve this issue as best fits your use case.

[zachgibson]

@isilher or anyone else have an example of how to fix this issue? I tried all of the above to remedy the giant spacing in between p tags to no avail. Using [email protected] with Expo.

Update: My issue had to do with \n\n in my strings I wasn’t aware of.

[bas-ie]

Just dropping a note here to clarify something I hadn't realised... by killing the default newline-inserting behaviour using addLineBreaks, you can actually get pretty decent paragraph spacing:

    return (
        <HTMLView
          addLineBreaks={false}
          stylesheet={richTextStyles}
          value={content} />
    )

// ...

const richTextStyles = StyleSheet.create({
  p: {
    marginTop: 3,
    marginBottom: 3
  }
})

Not perfect, but a handy workaround. Use paragraphBreak={null} instead if you want to retain <br /> breaks.

[fxhereng]

What worked for me was to delete break lines from html text and add styles:

 htmlText = htmlText.replace(/(\r\n|\n|\r)/gm, '');

[...]

<HTMLView
            stylesheet={htmlStyles}
            addLineBreaks={false}
            value={htmlText}
          />


[...]

const htmlStyles = StyleSheet.create({
  p: {
    marginTop: 5,
    marginBottom: 5
  },
  ul: {
    marginTop: 5,
    marginBottom: 5
  },
  ol: {
    marginTop: 5,
    marginBottom: 5
  }
});