HTML string is too long, lead to can't render the content #208

orzhtml · 2018-12-19T03:33:42Z

Is this a bug report or a feature request?

(Write your answer here.)
HTML string is too long, lead to can't render the content

Have you read the guidelines regarding bug report?

(Write your answer here.)

Have you read the documentation in its entirety?

(Write your answer here.)

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

(Write your answer here.)

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

(Write your answer here and specify the iOS/Android versions on which you've been able to reproduce the issue.)

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

(Write your answer here.)

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

(Write your answer here.)

Environment

(Write your answer here.)
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz
Memory: 36.11 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
Yarn: 1.12.3 - ~/.yarn/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.11.3/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 25, 26, 27
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.2, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 27.0.3
System Images: android-23 | Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
IDEs:
Android Studio: EAP AI-171.4010489 AI-171.4010489
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.5 => 0.57.5
npmGlobalPackages:
eslint-plugin-react-native: 3.5.0
react-native-cli: 2.0.1

Steps to Reproduce

(Write your steps here:)

Expected Behavior

(Write what you thought would happen.)

Actual Behavior

(Write what happened. Add screencasts/screenshots!)

Reproducible Demo

(Paste the link to an example project or paste the entirety of the relevant source code. Then provide instructions to reproduce the issue.)

saimemre1 · 2019-01-02T19:22:56Z

+1

saimemre1 · 2019-01-09T12:23:14Z

Maybe this can be helpful,
When I change marginVerticals (marginbottom, margintop etc..) from 'x%' to constant values (SCREEN_HEIGHT * 0.1 or integer), problem solved.

Exilz · 2019-02-11T16:45:30Z

HI @orzhtml ,
you didn't explain anything. What do you mean by it can't render the content ?

Is it like a crash because the HTML string is too big ? Or is it a styling problem as @saimemre1 suggested ? I'm not sure what you're talking about...

benfurkankilic · 2019-02-13T08:05:51Z

I have a similar problem too. Short texts can render however long texts cannot render. There are still

tags in the text.

orzhtml · 2019-02-13T08:44:17Z

I have a similar problem too. Short texts can render however long texts cannot render. There are still

tags in the text.

+1

Exilz · 2019-02-13T08:49:06Z

If neither of you provides an HTML string and how you're rendering your HTML (the component and how you use it), I won't be able to help.

I still have no clue what you're talking about.

benfurkankilic · 2019-02-13T10:42:09Z

If neither of you provides an HTML string and how you're rendering your HTML (the component and how you use it), I won't be able to help.

I still have no clue what you're talking about.

For example, "&'#39;One Piece&'#39; Introduces Zoro&'#39;s New Friends " (I add a " ' " between the & and # for understanding) this is my title. I fetch this data in an API. I can convert this title " 'One Piece' Introduces Zoro's New Friends " however I also fetch a text data which contains more than 1000 characters cannot be converted. If I use text data as <HTML html='text....'/>, it can convert, but when I used with parameters it can not be converted. For example, <HTML html={this.props.text}/>

orzhtml · 2019-02-14T09:17:46Z

If neither of you provides an HTML string and how you're rendering your HTML (the component and how you use it), I won't be able to help.

I still have no clue what you're talking about.

this.state = {
html: '<div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div>.....'
}
<HTML html={this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.htmlthis.state.htmlthis.state.html+this.state.html+this.state.html}/>

Need a lot of HTML string

benfurkankilic · 2019-02-14T10:56:48Z

If neither of you provides an HTML string and how you're rendering your HTML (the component and how you use it), I won't be able to help.
I still have no clue what you're talking about.

this.state = {
html: '<div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div><div>HTML string is too long</div>.....'
}
<HTML html={this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.html+this.state.htmlthis.state.htmlthis.state.html+this.state.html+this.state.html}/>

Need a lot of HTML string

Also, this does not work for me. I want to call data with props, however, it renders with<p> tags etc.

tylerjbainbridge · 2019-02-18T16:48:12Z

I'm encountering this as well- I have a pretty large text blob (12039 characters) that is failing to load in the html view. There is no error and the height seems to be accurate, but there is no visible text.

Another detail- the text has no html tags, it's just a flat blob of text rendered in a body tag

achou11 · 2019-03-11T22:15:31Z

A coworker looked into this issue a little bit and found that if the content's height is over a certain number of pixels (5440px according to him), none of it will be rendered. Not sure how helpful that is in terms of diagnosing the issue, but hopefully it helps a little!

dmitrydudkin · 2019-07-05T09:30:43Z

In my case a reason was in borderRadius style in html view container :

<ScrollView>
     <View style={styles.post}>
         <HTMLViewContainer html={content} />
     </View>
</ScrollView>

const styles = StyleSheet.create({
    post: {
      // borderRadius: 5, // <-- BUG
      paddingTop: 0,
      paddingBottom: 20,
      paddingLeft: 20,
      paddingRight: 20
   }
})

jamesovens · 2019-07-19T14:34:07Z

This appears to be a limitation with React Native <Text> components:
facebook/react-native#19453

There is a pretty easy workaround though if you want to have a <Text> component that has very long content you can convert it to use a <TextInput> instead like so:

<TextInput multiline={true} editable={false}>
  Some very long text
</TextInput>

In order to get that sort of workaround when using this library though I think that would require some changes.

You could specify a custom renderer using the renderers prop and have a custom renderer for a <p> tag for example to render a TextInput instead, however you would have to do this for every tag you need to support, and as far as I am aware there is no way to set a custom renderer for raw text currently.

orzhtml · 2019-08-13T14:33:05Z

Rewrite HTML to react-native, github search: react-native-orzhtml-htmlview

Don't want to switch to another component, don't comment on my new component

jamesovens · 2019-08-20T11:36:31Z

I'm not sure why this was closed as this is still an issue in this library. Changing to another library does not fix the issue in this library (and I wouldn't want to change library for this problem when the rest of it works so well in the React Native Web project I am working on).

Really all I think we need is to have the library check when the current node is raw text to check its length. If the content length gets above a certain threshold then the wrapper it uses for the raw text should switch from using an <Text> to using a <TextInput multiline={true} editable={false}>.

This could even be an optional behaviour that is turned on by passing true to a new prop to maintain backwards compatibility.

I managed to implement a workaround for this in the library as it is today using custom renderers but it is not an ideal solution. Something like I have suggested above may work and I hope would not be too difficult to implement.

wikramdas · 2020-08-14T11:00:50Z

I am having same issue when render a large HTML content then app will be crashed other wise it working fine I am debugging this from almost ten days but did not find any accurate answer.
Can anybody help me to fix this issue.
Thanks

jsamr · 2020-08-14T12:13:57Z

@wikramdas I am willing to investigate this to provide a hotfix; to do this I would need a full reproduction though. Could you provide a repro?
Hints are available here on how to do so.

woba-ko · 2020-11-18T10:39:36Z

@jsamr its quite easy to reproduce.

import HTML component from this library
Pass a HTML string that is longer than 7000 chars to the html prop

You will now see that the text is not rendered at all and no error is outputted to the console.

A workaround is to split the html string into chunks with a length of 6750 chars and then pass each chunk to a separate html component.

jsamr · 2020-11-18T21:46:34Z

@woba-ko OK. It will be "fixed" in release cycle 6.x "foundry".

wikramdas · 2020-12-14T08:45:02Z

@jsamr in my case I am facing this issue on android devices which are less than 7.0 android version. I am loading a big html like wikipedia's article and showing it in the app whenever it renders my app goes stuck and after 5 seconds it crashed. I am using ^4.2.5 version of this library. Correct me if I am doing something wrong.
This is the issue I am facing.

jsamr · 2021-04-17T22:45:21Z

I have tried a 7000 words (not characters) in Android Emulator, with Android version 7.0 and 11.0 and didn't notice any issue with foundry pre-release (see #430). React Native version I have tested is 0.63.4. See the video below.

longtext.mp4

The bug comes either:

From the older versions of this library (4.x and 5.x)
From older versions of React Native (likely below 0.63.x)
From specific vendor devices which have bugs
From a memory limitation of some devices.

If hypothesis 3. is confirmed by someone, I'm willing to investigate for the foundry release. As per hypothesis 4., this library might export at some point partial tree rendering capabilities, but that is yet to be studied. If you stumble on memory usage issues caused by very large content though, it's likely that a WebView is best suited for your use-case.

jsamr · 2021-04-18T15:39:31Z

I'm closing now as the most likely causes are 2. and 1. which can be mitigated by either upgrading react-native or this library. Feel free to fill a new report if you're still facing this issue after upgrading.

Exilz added the is:waiting for feedback Waiting for OP input. label Feb 11, 2019

orzhtml closed this as completed Aug 13, 2019

orzhtml reopened this Aug 21, 2019

jsamr added bug Crush'em all. bug:easyfix Easily fixed. labels Jul 4, 2020

jsamr added the bug:upstream The bug is caused by a third party library. label Aug 14, 2020

jsamr closed this as completed Apr 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML string is too long, lead to can't render the content #208

HTML string is too long, lead to can't render the content #208

orzhtml commented Dec 19, 2018

saimemre1 commented Jan 2, 2019

saimemre1 commented Jan 9, 2019

Exilz commented Feb 11, 2019

benfurkankilic commented Feb 13, 2019

orzhtml commented Feb 13, 2019

Exilz commented Feb 13, 2019

benfurkankilic commented Feb 13, 2019 •

edited

Loading

orzhtml commented Feb 14, 2019

benfurkankilic commented Feb 14, 2019 •

edited

Loading

tylerjbainbridge commented Feb 18, 2019 •

edited

Loading

achou11 commented Mar 11, 2019

dmitrydudkin commented Jul 5, 2019 •

edited

Loading

jamesovens commented Jul 19, 2019

orzhtml commented Aug 13, 2019 •

edited

Loading

jamesovens commented Aug 20, 2019

wikramdas commented Aug 14, 2020 •

edited

Loading

jsamr commented Aug 14, 2020

woba-ko commented Nov 18, 2020

jsamr commented Nov 18, 2020 •

edited

Loading

wikramdas commented Dec 14, 2020 •

edited

Loading

jsamr commented Apr 17, 2021

jsamr commented Apr 18, 2021

HTML string is too long, lead to can't render the content #208

HTML string is too long, lead to can't render the content #208

Comments

orzhtml commented Dec 19, 2018

Is this a bug report or a feature request?

Have you read the guidelines regarding bug report?

Have you read the documentation in its entirety?

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

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

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

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

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

saimemre1 commented Jan 2, 2019

saimemre1 commented Jan 9, 2019

Exilz commented Feb 11, 2019

benfurkankilic commented Feb 13, 2019

orzhtml commented Feb 13, 2019

Exilz commented Feb 13, 2019

benfurkankilic commented Feb 13, 2019 • edited Loading

orzhtml commented Feb 14, 2019

benfurkankilic commented Feb 14, 2019 • edited Loading

tylerjbainbridge commented Feb 18, 2019 • edited Loading

achou11 commented Mar 11, 2019

dmitrydudkin commented Jul 5, 2019 • edited Loading

jamesovens commented Jul 19, 2019

orzhtml commented Aug 13, 2019 • edited Loading

jamesovens commented Aug 20, 2019

wikramdas commented Aug 14, 2020 • edited Loading

jsamr commented Aug 14, 2020

woba-ko commented Nov 18, 2020

jsamr commented Nov 18, 2020 • edited Loading

wikramdas commented Dec 14, 2020 • edited Loading

jsamr commented Apr 17, 2021

jsamr commented Apr 18, 2021

benfurkankilic commented Feb 13, 2019 •

edited

Loading

benfurkankilic commented Feb 14, 2019 •

edited

Loading

tylerjbainbridge commented Feb 18, 2019 •

edited

Loading

dmitrydudkin commented Jul 5, 2019 •

edited

Loading

orzhtml commented Aug 13, 2019 •

edited

Loading

wikramdas commented Aug 14, 2020 •

edited

Loading

jsamr commented Nov 18, 2020 •

edited

Loading

wikramdas commented Dec 14, 2020 •

edited

Loading