<p></p> gets too much space after about react-native-htmlview HOT 17 CLOSED

This has done the trick :

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

from react-native-htmlview.

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
  }
});

from react-native-htmlview.

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.

from react-native-htmlview.

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.

from react-native-htmlview.

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

from react-native-htmlview.

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.

from react-native-htmlview.

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.

from react-native-htmlview.

@nbastoWM did you found a solution yet?

from react-native-htmlview.

Editing line 11 in HTMLView.js will do the trick

from react-native-htmlview.

thx @grittathh

from react-native-htmlview.

@raphaelvigee can you explain your solution? thx

from react-native-htmlview.

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.

from react-native-htmlview.

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

from react-native-htmlview.

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.

from react-native-htmlview.

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

from react-native-htmlview.

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.

from react-native-htmlview.

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

from react-native-htmlview.