Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Whitespace handling differs from HTML significantly (no collapsing, newlines ignored)

See original GitHub issue

Is this a bug report or a feature request?

Bug report. Though fixing this might change the behavior of this lib too much for users, so the solutions are probably to write documentation and/or provide an opt-in fix.

Have you read the guidelines regarding bug report?

Yes.

Have you read the documentation in its entirety?

Yes.

Have you made sure that your issue hasn’t already been reported/solved?

Yes, to the best of my abilities. 😃

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both platforms.

Is the bug reproductible in a production environment (not a debug one)?

Sorry, have not tried yet in a production build. I expect the same result though.

Have you been able to reproduce the bug in the provided example?

Have not tried, but the issue has a really simple setup so it shouldn’t differ.

Environment

Environment:

React: 16.0.0
React native: 0.51.0
react-native-render-html: 3.9.0

Target Platform:

Android (7.0)
iOS (11.2)

Steps to Reproduce

Render this JSX:

<HTML html={'  <div>  foo\n\nbar  baz  </div>  <div>zzz</div>  '} />

Expected Behavior

I expected react-native-render-html to handle whitespace collapsing similarly to what HTML does. Replacing a rendered space character (U+0020 SPACE) with •, that would be:

foo•bar•baz
zzz

Actual Behavior

react-native-render-html (3.9.0 and master) renders:

••foobar••baz
zzz

What seems to work:

Removing spaces outside of block tags if they only contain whitespaces
Removing whitespace at the end of a block tag’s content

What seems broken:

Removing whitespace at the beginning of a block tag’s content
Collapsing multiple spaces (and other whitespace characters) to a single rendered space, in the middle of text content
Collapsing newlines to a single space character, in the middle of text content (newlines seem to be removed altogether)

I suspect this lib is limited by React Native’s Text component and errs on the side of not manipulating text too much, only removing newlines?

If that is the case, I can think of two possible improvements:

Document this behavior and how HTML strings containing a lot of whitespace (which is common with some sources or JS editors) can show extra spaces before or between words.
If it makes sense, maybe provide an option for performing more HTML collapsing?

I’m going to implement some fixes on our side using simple regexps on our HTML. I can post what I come up with here if that’s useful. Or maybe I should do it in alterData for more fine-grained control?

Issue Analytics

State:
Created 6 years ago
Reactions:6
Comments:47 (2 by maintainers)

Top GitHub Comments

12reactions

douglasjuniorcommented, Jul 20, 2018

Based on @djpetenice genius idea, I created this function:

export const fixHtmlBlockSpaces = (str = '') => {
    const fixedStr = str.replace(/(<\/[^>]+>)\s+(<)/gm, (substring, group1, group2) => {
        return `${group1}<span style="color: transparent">_</span>${group2}`;
    });
    return fixedStr;
};

Now this:

<p><a href="abc">abc</a> <a href="def">def</a></p>

Is replaced by this:

<p><a href="abc">abc</a><span style="color: transparent">_</span><a href="def">def</a></p>

6reactions

jsamrcommented, Nov 16, 2020

I’ve made great progress with the new release! Given this snippet:

<span>This is text!</span>





This is <strong>bold</strong> <em>italics</em>.

We now have:

`whiteSpace: pre;`	`whiteSpace: normal;`

You will be able to control the whitespace behavior with the special whiteSpace style property in any of the places you could previously customize styles (baseFontStyles, tagsStyles …etc).