Images in Android and IOS are different

[GaryOoi]

Decision Table

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

Good Faith Declaration

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

Description

What I did: I want to render a list of images.

const test =
    '<img src="https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/4fc238a6d2deea2a3279ad62b038ca77e44869f3.jpg?1645015785">' +
    '<br><img src="https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/177cf251f7d8b241792f246b3d829405bc488c9c.jpg?1645015791">' +
    '<br><img src="https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/f0a321517c9248e1adc84c46541ca2b9c93ade51.jpg?1645015796">';

  const source = {
    html: test,
  };

  <RenderHtml source={source} />

What I expected to happen: I expect the images to show in width 100%.

What actually happened: But in IOS, it shows correctly but in Android, it does not show in width 100%.

Can someone help me?

I have also tried tagsStyle and customRenderer and set width:100% but android still showing the same.

React Native Information

System:
    OS: macOS 12.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 534.34 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.5 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.21.1 - /usr/local/bin/npm
    Watchman: 2021.09.06.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /Users/gary/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom, android-31 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2 
    react-native: ^0.65.1 => 0.65.1

RNRH Version

react-native-render-html@6.3.4

Tested Platforms

• [X] Android
• [X] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Reproduction Platforms

• [X] Android
• [X] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Minimal, Reproducible Example

IOS Image

Android Image

Additional Notes

No response

[jsamr]

@GaryOoi can you confirm the exact version used in your project? You should always submit issues with the latest released version:

npm list react-native-render-html

yarn why react-native-render-html

[GaryOoi]

I have upgraded my version. Now the version is react-native-render-html@6.3.4

[jsamr]

@GaryOoi OK; I'll try to reproduce when I manage to find a time window; not to be expected too soon, unfortunately!

[jsamr]

@GaryOoi After looking at the HTML snippet, I realize you're very likely to be hitting the fresco bug referred in our FAQ: https://meliorence.github.io/react-native-render-html/docs/faq#long-image-cannot-show-in-full-screen-on-android

Closing as there is nothing actionable for us. You could try to register a custom image renderer based on react-native-fast-image for example, and see how it works out. For an example check this snippet https://discord.com/channels/736906960041148476/945649125435768873/949415623866331206

[GaryOoi]

@jsamr Can you invite me to the discord server? Because I cannot view anything from the link (It shows me blank page).

[jsamr]

@GaryOoi I forgot to mention that a public invite is available in the README! Here you go: https://discord.gg/dbEMMJM