Open cristianoccazinsp opened 2 years ago
@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>
);
}
Decision Table
<yyy>
is not rendered”Good Faith Declaration
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 thecontentWidth
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
With the following options:
Additional Notes
No response