React-native-render-html: HTML string is too long, lead to can't render the content

Created on 19 Dec 2018 · 22Comments · Source: meliorence/react-native-render-html

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

1.
2.
3.

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

bug easyfix upstream waiting for feedback

Source

orzhtml

Most helpful comment

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.

jamesovens on 20 Aug 2019

👍4

All 22 comments

saimemre1 on 2 Jan 2019

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.

saimemre1 on 9 Jan 2019

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

Exilz on 11 Feb 2019

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

tags in the text.

kilicfurkan on 13 Feb 2019

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

tags in the text.

orzhtml on 13 Feb 2019

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.

Exilz on 13 Feb 2019

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, "&'#039;One Piece&'#039; Introduces Zoro&'#039;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}/>

kilicfurkan on 13 Feb 2019

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

orzhtml on 14 Feb 2019

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.

kilicfurkan on 14 Feb 2019

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

tylerjbainbridge on 18 Feb 2019

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!

achou11 on 11 Mar 2019

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

dmitrydudkin on 5 Jul 2019

This appears to be a limitation with React Native <Text> components:
https://github.com/facebook/react-native/issues/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.

jamesovens on 19 Jul 2019

👍1

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

orzhtml on 13 Aug 2019

👎6 👍2 🚀1 🎉1

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

jamesovens on 20 Aug 2019

👍4

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

wikramdas on 14 Aug 2020

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

jsamr on 14 Aug 2020

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

woba-ko on 18 Nov 2020

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

jsamr on 18 Nov 2020

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

wikramdas on 14 Dec 2020

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.

https://user-images.githubusercontent.com/3646758/115128593-44f90700-9fb5-11eb-9254-f8a2224ffbc2.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 on 18 Apr 2021

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.

jsamr on 18 Apr 2021

Was this page helpful?

0 / 5 - 0 ratings