React-native-render-html: White spaces were not rendered

Created on 28 Jan 2019 · 9Comments · Source: meliorence/react-native-render-html

First words

I think the cause is on this line: HTML.js#L269
(The regex pattern /\s/g)

Is this a bug report or a feature request?

Bug report.

Have you read the guidelines regarding bug report?

No.

Have you read the documentation in its entirety?

Yes.

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

I have searched. It could be alternative to #118

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

Tested on Android.

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

Not tested yet.

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

Not tested yet.

Environment

Environment:
React: 16.6.0-alpha.8af6728
React native: 0.57.4
react-native-render-html: 3.10.0

Target Platform:
Android (7.0)

Steps to Reproduce

Render html with a tag contain white spaces only (unicode white space)

Expected Behavior

white spaces should be rendered. They are not breaking spaces.

(Write what you thought would happen.)

Actual Behavior

White spaces were not rendered.

Reproducible Demo

Not implement yet.

bug html

Source

DiepEsc

👍4

Most helpful comment

Same problem, only spaces between 2 html tags like

render() {
    const html = '<strong><em>Hello</em><strong> <strong>World</strong>';
    return (<HTML html={html}/>);
}

Result:
HelloWorld

Shitty fix:

const html = '<strong><em>Hello</em><strong> <strong>World</strong>';
const fixedHtml = html.replace(/> </g, '><span style="color:white;">-</span><');

.replace(/>\s\ <') works as well

grnkvch on 20 May 2019

👍4

All 9 comments

Same problem, only spaces between 2 html tags like

render() {
    const html = '<strong><em>Hello</em><strong> <strong>World</strong>';
    return (<HTML html={html}/>);
}

Result:
HelloWorld

Shitty fix:

const html = '<strong><em>Hello</em><strong> <strong>World</strong>';
const fixedHtml = html.replace(/> </g, '><span style="color:white;">-</span><');

jr-k on 27 Mar 2019

👍1

I'm having the same issue. It happens in iOS as well.
Here is a repro: https://github.com/alexisbronchart/rn-html-bug

screenshot

alexisbronchart on 17 May 2019

Same problem, only spaces between 2 html tags like

render() {
    const html = '<strong><em>Hello</em><strong> <strong>World</strong>';
    return (<HTML html={html}/>);
}

Result:
HelloWorld

Shitty fix:

const html = '<strong><em>Hello</em><strong> <strong>World</strong>';
const fixedHtml = html.replace(/> </g, '><span style="color:white;">-</span><');

.replace(/>\s\ <') works as well

grnkvch on 20 May 2019

👍4

This line https://github.com/archriss/react-native-render-html/blob/928d8e825377181f383934f0b33747ae1315f345/src/HTML.js#L272 could be replaced with:
const strippedData = data && data.replace(/\s+/g, ' ')
It seems to work fine, at least for my use case.
@Exilz @bd-arc do you guys think it would be OK to merge this? I can send a PR.

alexisbronchart on 20 May 2019

👍2 ❤1

The regex pattern should be /[\t\r\n ]+/g instead of \s. Because \s is included many types of unicode spaces. There types of space should be rendered in HTML.

Wikipedia page about white spaces:
https://en.m.wikipedia.org/wiki/Whitespace_character

DiepEsc on 20 May 2019

👍1

Isn't this issue fixed with https://github.com/thoughtis/react-native-render-html/pull/1 ?