react-native-render-html icon indicating copy to clipboard operation
react-native-render-html copied to clipboard

Adjust the height container when inject a custom component in renders (image)

Open jechazelle opened this issue 2 years ago • 0 comments

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

jechazelle avatar Sep 21 '23 11:09 jechazelle