using <b> tag will break the line

[xareelee]

Using <b> tag inside a string will break the line.

<HTMLView
  value={ "A word will be <b>bold</b> inside this string." }
/>

• Expected:

A word will be bold inside this string."

• What I got acctually with react-native-htmlview:

A word will be
bold
inside this string."

By the way, is there any convenient tag to add attributes to specific words in a string?

[agustind]

Had the same problem, fixed it like this:

<HTMLView style={{flex:1, flexDirection: 'row', alignItems: 'flex-start', flexWrap: 'wrap'}} value={myhtmlcontent} />

[AntAreS24]

Looking at the code, there is a prop called addLineBreaks. Try to set it to false?

[bas-ie]

Yes, that behaviour's probably not ideal right now. It's not just <b>: even a <span> will reproduce this. Note that it's not an issue if you can wrap the content in a block-level tag:

  <div>A word will be <b>bold</b> inside this string.</div>

I imagine there's a reasonable way to correct this, but for now it'll probably require a wrapper.

[isilher]

Alternatively, since 0.10 you can set RootComponent={Text} to make the content display inline style. Note that this can break when the html contains images. (can't render image within text component).

A side effect of both this and the wrapping <div> approach is that you'll lose line breaks between paragraphs etc.

[isilher]

Wrapping paragraphs in a <p> tag works too, if you have control over the HTML source.

[bas-ie]

I think there's probably a solution somewhere with wrapping any nodes that don't have a parent in a Text component to allow flexDirection: 'row'... which would also probably make handling block level elements easier, since they'd just be shunted to the next line in the flex column, no need for \n. Just not quite sure how to do that with htmlparser2 yet... 🤔

[laurasantana]

This issue keeps happening and none of the solutions above fix it for me,
I have something like this:
<p> <a href='/users/2'> <b>User 2 Name</b> </a> wrote a new article titled <a href='/articles/6'> <b>"Article name"</b> </a> </p>
I removed all the <b> tags, and I have it wrapped in a <p> tag, and it breaks in 3 lines

[jaschaio]

@isilher I used your solution adding RootComponent={Text}, but I don't understand how to style the Text Component?

[dancherb]

Related to the above - it seems you can style it by pass in a style={{color: "red"}} to the htmlview. This works, though it gives you yellow warnings for "invalid props.style key".. @jaschaio