Crashing Issue on Passing Invalid HTML Syntax [ Error: Invalid HTML: <br /></p>Sweep over cheeks with brush, blending from the apples of cheeks back towards the hairline.</p>sampai ke hairline. ]

[ajprince21]

Decision Table

• My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• I have read the HELP document here: https://git.io/JBi6R
• I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• I have confirmed that this bug has not been reported yet

Description

The react-native-render-html library crashes when rendering HTML content with invalid syntax, such as improperly paired tags. The application should handle these cases gracefully instead of crashing, providing a clear error message or fallback rendering.

React Native Information

System:
  OS: macOS 14.2.1
  CPU: (8) arm64 Apple M1
  Memory: 97.28 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.7.2
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.5.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.4
    wanted: 0.72.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

RNRH Version

"react-native": "0.72.4",
"react-native-webview": "^13.10.5",
"react-native-render-html": "^6.3.4",

Tested Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Minimal, Reproducible Example

can pass this content

const htmlContent =
"

Sweep over cheeks with brush, blending from the apples of cheeks back towards the hairline.

sampai ke hairline. ";

Additional Notes

No response

[SjaakSchilperoort]

I don't think this library is supposed to handle corrupt HTML as you would expect a browser to do. The introduction at https://meliorence.github.io/react-native-render-html/docs/intro specifically says:

• The best use case for library is when the content to render is predictable (e.g. you know in advance the tags and classes to support)
• You should probably not use this library if you need to render arbitrary, unpredictable content.

[ajprince21]

Hii @SjaakSchilperoort

Since HTML data can be dynamic and unpredictable, enhancing the library to handle incorrect or malformed HTML gracefully would be beneficial. Instead of throwing an error that crashes the application, returning an empty element (<></>) would allow the app to maintain its stability and provide a better user experience.

This way, developers can handle unexpected HTML content without significant disruptions, making the library more robust for real-world use cases where HTML cannot be fully controlled. Implementing such a feature could improve usability significantly for those dealing with varied and dynamic HTML content.