[🐞] Image is not rendering white on iOS

[Ellathet]

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

When a send one html, with tag img, specifically in iOS, the image render in white:

In the middle there was supposed to be an image, like android:

Could this have something to do with the domain?

React Native Information

System:
    OS: macOS 12.5.1
    CPU: (4) x64 Intel(R) Core(TM) i3-8100B CPU @ 3.60GHz
    Memory: 261.96 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 12.22.12 - /var/folders/z8/8tlv566x69q1jyr8yx1bljtm0000gn/T/yarn--1668787956897-0.04269009964989223/node
    Yarn: 1.22.19 - /var/folders/z8/8tlv566x69q1jyr8yx1bljtm0000gn/T/yarn--1668787956897-0.04269009964989223/yarn
    npm: 6.14.15 - ~/Desktop/Development/wide-app/node_modules/.bin/npm
    Watchman: 2022.08.22.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8815526
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16.1 - /usr/bin/javac
    Python: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
✨  Done in 3.01s.

RNRH Version

6.3.4

Tested Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Minimal, Reproducible Example

This is my html information:

<p><img src="https://s24534.pcdn.co/carreira-sucesso/wp-content/uploads/sites/3/2011/03/bom-humor.jpg" alt="" width="300px"> ola tudo bem?</p>

Component code:

export function myComponent () {

const myHtml = `<p><img src="https://s24534.pcdn.co/carreira-sucesso/wp-content/uploads/sites/3/2011/03/bom-humor.jpg" alt="" width="300px"> ola tudo bem?</p>`

const quizHtmlStyle =  {
    p: {
      margin: 0,
      marginBottom: '10px',
    },
    br: {
      margin: 0,
      marginBottom: '10px',
    },
    table: {
      marginBottom: '10px',
      borderStyle: 'solid',
    },
    tr: {
      borderColor: Parameters.AppColors.black,
      borderWidth: '.5px',
      borderStyle: 'solid',
    },
    td: {
      borderColor: Parameters.AppColors.black,
      borderWidth: '.5px',
      derStyle: 'solid',
    },
  },

return (
<RenderHtml
  contentWidth={Dimensions.get('window').width}
  source={{ html: myHtml.replace(/<table[^>]+?>([^$]+?)<\/table>/gm, (m) => m.replace(/\n/g, '')).replace(/\n/g, '<p></p>') }}
  tagsStyles={quizHtmlStyle}
  baseStyle={{ marginBottom: 20 }}
/>
)
} 

Additional Notes

I tried to do the render process by passing a FastImage, but it stops working on both iOS and Android.

And tried this too: https://meliorence.github.io/react-native-render-html/docs/content/images

[Ellathet]

We managed to fix this issue