Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
7 of 15 tasks
jechazelle opened this issue Sep 21, 2023 · 0 comments
Open
7 of 15 tasks
Labels
bug Crush'em all.

Comments

@jechazelle
Copy link

Decision Table

  • My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
  • My issue does not look like “The HTML element <yyy> is not rendered”

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

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Reproduction Platforms

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Minimal, Reproducible Example

/

Additional Notes

No response

@jechazelle jechazelle added the bug Crush'em all. label Sep 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Crush'em all.
Projects
None yet
Development

No branches or pull requests

1 participant