Weird spacing/newline issues with some tags about react-native-htmlview HOT 14 CLOSED

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

from react-native-htmlview.

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

from react-native-htmlview.

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.

from react-native-htmlview.

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

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

from react-native-htmlview.

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.

from react-native-htmlview.

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

from react-native-htmlview.

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.

from react-native-htmlview.

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

from react-native-htmlview.

Is there a fix for that?

from react-native-htmlview.

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

from react-native-htmlview.

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.

from react-native-htmlview.

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

from react-native-htmlview.

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.

from react-native-htmlview.

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

from react-native-htmlview.