likashefqet / react-native-image-zoom

A performant and customizable image zoom component built with Reanimated v2+ and TypeScript. šŸŒƒ šŸš€
https://www.npmjs.com/package/@likashefqet/react-native-image-zoom
MIT License
267 stars 44 forks source link

Nothing is rendering on android #31

Closed Aiosa closed 10 months ago

Aiosa commented 1 year ago

Describe the bug Upgrading from v1 to v2 makes all the content vanish, when used as a tag renderer for React native render html

To Reproduce When used as a custom image tag renderer, the component is working with version 1.2.1 but displays nothing in version 2.0. It is integrated into React native render html as follows:

....
        img: (args) => {
            const attrs = args.tnode?.init?.domNode?.attribs;
            return ( //todo try with InternalRenderer or TDefaultRenderer
                <RenderHTMLImage
                    uri={attrs.src}
                    // onPress={(uri) => {
                    //     options.dispatch(setLightbox(attrs.src))
                    // }}
                    imagesMaxWidth={args.sharedProps?.computeEmbeddedMaxWidth(Math.min(deviceWidth - 30, Number.parseInt(attrs.width)), "img")}
                />
            )
        },

....
    const RenderHTMLImage = ({ uri, onPress, imagesMaxWidth }) => {
        const [ imageSize, setImageSize ] = useState({})

        useEffect(() => {
            Image.getSize(uri, (width, height) => {
                setImageSize({
                    width,
                    height,
                    aspectRatio: Number((width / height).toFixed(2)),
                })
            })
        }, [])

        return (
            <View
                style={{
                    width: imageSize.width > imagesMaxWidth
                        ? imagesMaxWidth
                        : imageSize.width,
                }}
            >
                <ImageZoom uri={uri}
                           //containerStyle={}
                           imageContainerStyle={{
                        width: imageSize.width > imagesMaxWidth
                            ? imagesMaxWidth
                            : imageSize.width,
                        aspectRatio: imageSize.aspectRatio,
                        resizeMode: 'contain',
                    }}/>
            </View>
        )
    }
....

    return <RenderHTML
            computeEmbeddedMaxWidth={(contentWidth, tagName) => {
                return contentWidth - rightOffset;
            }}
            ignoredStyles={['display', 'width', 'height', 'padding']}
            enableExperimentalMarginCollapsing
            renderers={renderers}
            ...

            renderersProps={{
                img: {
                    enableExperimentalPercentWidth: false,
                },
               ...
            }}
        />;

Downgrading helps, but then with react native 72 the app crashes when scrolling.

Expected behavior The image is shown and rendering.

Desktop (please complete the following information):

Additional context

{
  npm: '8.11.0',
  node: '16.16.0',
  v8: '9.4.146.24-node.21',
  uv: '1.43.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '93',
  nghttp2: '1.47.0',
  napi: '8',
  llhttp: '6.0.7',
  openssl: '1.1.1q+quic',
  cldr: '40.0',
  icu: '70.1',
  tz: '2021a3',
  unicode: '14.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

and


"@likashefqet/react-native-image-zoom": "^2.1.0",
"react-native": "0.72.4",
"react-native-render-html": "^6.3.4",
github-actions[bot] commented 10 months ago

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 15 days.

github-actions[bot] commented 10 months ago

This issue was closed because it has been stalled for 15 days with no activity.

Aiosa commented 1 month ago

Upgraded to version 3.0.0, still does not work. It displays an image when used as-is, but within the native-html as a renderer it still does not work.