react-native-render-html
react-native-render-html copied to clipboard
Adjust the height container when inject a custom component in renders (image)
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
Hi,
When I replace the image with the custom component, the container size hasn't the good height. The height isn't re-calculate and the container is reduced.
How can I recalculate the height of RenderHtml once the image components are inserted please?
I'm not sure that a bug, just a prop didn't found in the documentation https://meliorence.github.io/react-native-render-html/api/renderersprops
const { width } = useWindowDimensions();
function CheckImage({
TDefaultRenderer,
tnode,
...defaultRendererProps
}) {
let link = tnode.domNode.attribs.src;
let url = `${apiUrl}${link.substring(8)}`;
return (<ResponsiveImageView source={{ uri: url }}>
{({ getViewProps, getImageProps }) => (
<View {...getViewProps()}>
<Image {...getImageProps()} className='rounded-lg' />
</View>
)}
</ResponsiveImageView>)
}
const renderers = {
img: CheckImage,
};
The render:
<RenderHtml
contentWidth={width}
source={{
html: longTextWithImg
}}
renderers={renderers}
/>
React Native Information
"expo": "^49.0.0",
"react-native-render-html": "^6.3.4",
RNRH Version
/
Tested Platforms
- [ ] Android
- [X] iOS
- [ ] Web
- [ ] MacOS
- [ ] Windows
Reproduction Platforms
- [ ] Android
- [X] iOS
- [ ] Web
- [ ] MacOS
- [ ] Windows
Minimal, Reproducible Example
/
Additional Notes
No response