meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

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

Open jechazelle opened 1 year ago

jechazelle commented 1 year ago

Decision Table

Good Faith Declaration

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

Reproduction Platforms

Minimal, Reproducible Example

/

Additional Notes

No response