Migration to v6 issues - Images with relative width

[cristianoccazinsp]

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

I'm trying to migrate to v6 from the older v4 (or v5?). Besides a massive amount of breaking changes that I've been able to work around thanks to the detailed migration steps (thanks a lot for it!), I cannot still manage to work around issues with images.

With the older version, I could use maxWidth: '100%' on an image and it would only take the width of the parent's container. With v6, it will always use the screen width, or whatever the contentWidth is.

I could not find anywhere in the guide how to achieve image resizing as I used to be able to do with v4.

React Native Information

System:
    OS: macOS 12.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 20.38 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.24.0 - /usr/local/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7678000
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.3 => 0.66.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

### RNRH Version

6.3.4

### Tested Platforms

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

### Reproduction Platforms

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

### Minimal, Reproducible Example

Trying to render the following html.

```html
<div>Z:[[Inspection Activity | Inspection Type | [Inspection;Hide] ]]
<table border="1" cellpadding="4" cellspacing="0">
	<tbody>
		<tr>
			<td>Z:[[Instruction | z DOES NOT provide or maintain forms or templates.]]Z:[[Instruction | LINE | [light;primary] ]]<strong>Property</strong></td>
			<td><strong>Address</strong></td>
			<td><strong>Date</strong></td>
			<td><strong>Agent / Inspector</strong></td>
		</tr>
		<tr>
			<td>Z:[[Property Name]]</td>
			<td>Z:[[Property Address]]</td>
			<td>Z:[[System Date]]</td>
			<td>Z:[[Inspector Name]]</td>
		</tr>
	</tbody>
</table>

<div>Z:[[Instruction | LINE | [light;primary] ]]</div>

<div>&nbsp;</div>

<div><strong>Common Building Unit Layout Examples</strong></div>

<div>
<table border="0" cellpadding="1" cellspacing="1" style="width:100%">
	<tbody>
		<tr>
			<td><img alt="" src="https://zinspector.s3.amazonaws.com/usi/13/144802818054db3620f1154d98a290d29b0c91696e.JPEG" style="width:100%" /></td>
			<td>
			<div>Smoke Detector Installation</div>

			<ul>
				<li>Each sleeping room</li>
				<li>Outside each sleeping area in immediate vicinity of sleeping rooms</li>
				<li>Each floor, if multi-story</li>
				<li>Applicable basements</li>
				<li>Not installed within 3&#39; of bathroom door, fan or supply registers</li>
			</ul>

			<div>CO Detector Installation</div>

			<ul>
				<li>Applicable if dwell has a fossil fuel burning heater or appliance, fireplace, or an attached garage</li>
				<li>Outside each separate sleeping area in immediate vicinity.</li>
				<li>Each floor, if multi-story</li>
			</ul>
			</td>
		</tr>
	</tbody>
</table>
</div>

<div>&nbsp;</div>

<div><strong>Smoke Detector Inspection Summary&nbsp;</strong>Z:[[Instruction | Smoke detectors to be installed in each bedroom, in immediate vicinity of bedrooms, and on each floor if applicable.]]</div>

<div>
<table border="1" cellpadding="4" cellspacing="0" style="width:100%">
	<tbody>
		<tr>
			<td>Smoke Detector Summary</td>
			<td>Z:[[Select Field | Smoke Detector Battery Test | [Not All Tested; All Smoke Detectors Tested Okay; Not All Smoke Detectors Are Functional or Installed] ]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td>Total # of Fully Functional Detectors&nbsp;</td>
			<td>Z:[[Numeric Field | # of Fully Functional Smoke Detectors]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td># of Detectors Needing Batteries</td>
			<td>Z:[[Numeric Field | # of Smoke Detectors Needing Batteries]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td># of New Detectors Needed</td>
			<td>Z:[[Numeric Field | # of New Smoke Detectors Needed]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td>Comments</td>
			<td>Z:[[Paragraph | Smoke Detector Inspection Comments | [Smart] ]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
	</tbody>
</table>

<div>&nbsp;</div>
</div>

<div>
<div><strong>CO Detector Inspection Summary&nbsp;</strong>Z:[[Instruction | CO detectors to be installed outside each sleeping area in immediate vicinity of the bedrooms and on each floor.]]</div>

<div>
<table border="1" cellpadding="4" cellspacing="0" style="width:100%">
	<tbody>
		<tr>
			<td>CO Detector Summary</td>
			<td>Z:[[Select Field | CO Detector Test | [Not All Tested; All CO Detectors Tested Okay; Not All CO Detectors Are Functional or Installed] ]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td>Total # of Fully Functional Detectors&nbsp;</td>
			<td>Z:[[Numeric Field | # of Fully Functional CO Detectors]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td># of Detectors Needing Batteries</td>
			<td>Z:[[Numeric Field | # of CO Detectors Needing Batteries]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td># of New Detectors Needed</td>
			<td>Z:[[Numeric Field | # of New CO Detectors Needed]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td>Combo Detector</td>
			<td>Z:[[Select Field | Combo Detector? | [Not applicable; CO Detector is Stand Alone; Smoke and CO Combined Detector Installed] ]]Z:[[Instruction | LINE | [light;primary] ]]</td>
		</tr>
		<tr>
			<td>Comments</td>
			<td>
			<div>Z:[[Paragraph | CO Inspection Comments | [Smart] ]] Z:[[Instruction | For pictures, recommend selecting "Area" and taking a picture of each detector.  Tap Take Photo or use video option. Once complete, click Back button to return to this screen.]]Z:[[Take Pictures w/Tags | Smoke and CO Detector Pictures]]Z:[[Instruction | LINE | [light;primary] ]]</div>
			</td>
		</tr>
	</tbody>
</table>

<div>
<div>&nbsp;</div>

<table border="1" cellpadding="4" cellspacing="0" style="width:100%">
	<tbody>
		<tr>
			<td style="vertical-align:top">
			<div><strong>Inspector:</strong></div>

			<div>Z:[[Force Signature | Inspector Signature]]</div>

			<div>Z:[[Inspector Name | Inspector]]</div>
			</td>
			<td style="vertical-align:top">
			<div><strong>Date:</strong></div>

			<div>Z:[[System Date]]</div>
			</td>
		</tr>
	</tbody>
</table>
</div>
</div>
</div>
</div>

With the following options:

const baseStyle = {
  fontSize: conf.theme.variables.DefaultFontSize,
  fontFamily: conf.theme.variables.fontFamily,
  color: conf.theme.variables.textColor,
};

const tagsStyles = {
  img: {
    flex: 1,
    maxWidth: '100%',
    objectFit: 'contain',
  },

  tr: {
    borderWidth: conf.theme.variables.borderWidth,
    borderColor: conf.theme.variables.darkBorderColor,
  },

  td: {
    padding: 3 * scaling,
    borderLeftWidth: conf.theme.variables.borderWidth,
    borderRightWidth: conf.theme.variables.borderWidth,
    borderColor: conf.theme.variables.darkBorderColor,
  },
  th: {
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    fontWeight: 'bold',
    padding: 3 * scaling,
    borderLeftWidth: conf.theme.variables.borderWidth,
    borderRightWidth: conf.theme.variables.borderWidth,
    borderColor: conf.theme.variables.darkBorderColor,
  },
};

Additional Notes

No response

[jsamr]

@cristianoccazinsp There is clearly an issue here, where width: 100% is interpreted as "100% of the viewport". Before it gets fixed, I suggest you use this custom image renderer:

import {
  useWindowDimensions,
  Image,
} from 'react-native';
import RenderHTML, {
  useIMGElementProps,
  CustomBlockRenderer,
} from 'react-native-render-html';

const ImgRenderer: CustomBlockRenderer = props => {
  const imgProps = useIMGElementProps(props);
  return (
    <Image
      resizeMode="contain"
      style={imgProps.style}
      source={imgProps.source}
    />
  )
};

const renderers = {img: ImgRenderer};

export default function App() {
  const {width} = useWindowDimensions();
  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>
        <RenderHTML
          source={{html: htmlContent}}
          contentWidth={width}
          renderers={renderers}
        />
      </ScrollView>
    </SafeAreaView>
  );
}