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.
Invalid css attribute crashes the app
See original GitHub issueIs this a bug report or a feature request?
Bug report
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?
Similar issues have been reported, but I am unsure if the cause is the same.
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
The bug is reproducible on Android.
On iOS, it does not crash the app, though it does throw a JS error.
Is the bug reproductible in a production environment (not a debug one)?
Yes.
Have you been able to reproduce the bug in the provided example?
I did not use that example-- I used a snack instead. (See below.)
Environment
React: 16.13.0
React native: 0.62.2
react-native-render-html: 4.2.0
Target Platform: Android (9.0) iOS (13.4.1)
Steps to Reproduce
(Write your steps here:)
- Craft a html markup snippet that has an invalid css attribute value, e.g.:
<p style="margin-top: none">
- Include the html in a
<HTML/>tag. - View the screen with the above code.
Expected Behavior
I would not expect this library to figure out user error with markup tags, but it would be helpful if it would handle it consistently on both platforms. Ideally, if it it could accept a onRenderError callback so that, if the content cannot be rendered, the consumer of the HTML component can deal with it.
In this way, any kind of issue that would cause a render error could be handled in a consistent way, which would address, to some degree, these issues too:
https://github.com/archriss/react-native-render-html/issues/225 https://github.com/archriss/react-native-render-html/issues/164
Actual Behavior
On Android, the application crashes. Here’s a Firebase Crashlytics report snippet:
On iOS, the app itself does not crash, though a JS error is thrown:
Reproducible Demo
Please visit this snack:
https://snack.expo.io/@alexwb/react-native-render-html-css-test
When the marginValue variable is set to a valid CSS value, such as the default value of 50, the app will render. If you change this to, say, “none”, the app will crash (though this behavior varies by platform).
Issue Analytics
- State:
- Created 3 years ago
- Reactions:5
- Comments:5
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@ajaysaini-sgvu On the 5.x branch, we handle unsupported CSS on a “blacklist” basis, so there are misses. On the 6.x, every CSS rule and value is validated or discarded by a separate CSS processor (see https://github.com/native-html/core/tree/master/packages/css-processor#readme). So the 6.x is expected to be much more resilient on that regard. See #430 to try it out.
Any way to handle
<HTML />component so app will not crash with invalid css or content ? @jsamr