'How to handle large image in modal (react native android)

I have a modal that a link is passed to for image pinch zoom and it works perfectly on iOS, but apparently android has a limitation with the fresco plugin. I get an error Pool hard cap violation? Hard cap = 201326592 Used size = 191114208 Free size = 0 Request size = 10933048 error. This results in nothing showing.

How does one handle images inside a modal that a user can zoom/pan with? It works perfectly on iOS - It's just android that's having this issue. I don't want to really resize it because the user should be able to zoom, so we want it to be larger than the view. Documentation doesn't cover this at all.

Code (for illustration purposes):

<Modal ref={modalRef} supportedOrientations={['landscape', 'portrait']} animationType='fade' visible={!!modalImage} style={{...StyleSheet.absoluteFillObject}}>
        <StatusBar backgroundColor={"#000"} />
        <View style={{flex: 1, backgroundColor: '#FFF', position: 'relative'}}>
          <TouchableOpacity hitSlop={{ top: 20, bottom: 20, left: 20, right: 20}} style={{position: 'absolute', top: '5%', right: '5%', width: 20, height: 20, zIndex: 999}} onPress={() => setModalImage(null)}>
            <Image style={{width: '100%', height: '100%'}} source={require('../assets/icons/Miscellaneous/Close/close-dark-mode.png')} />
          </TouchableOpacity>
          <ReactNativeZoomableView
            ref={zoomableRef}
            style={{width: '100%', height: '100%', backgroundColor: '#000'}}
            maxZoom={3}
            minZoom={1}
            zoomStep={3}
            onShiftingBefore={_onShiftBefore}
            onShiftingAfter={_onShiftAfter}
          >
            <Image onError={(e) => console.log('error', e.nativeEvent.error)} style={{width: '100%', height: '100%'}} resizeMode='contain' resizeMethod='resize' source={{ uri: `https://website.com${HtmlTextParser(modalImage ?? '')}` }} />
          </ReactNativeZoomableView>
        </View>
      </Modal>


Solution 1:[1]

I'm using a zoomable view inside a modal in the same manner that you explained but never ran into this issue, the difference I found between our implementations is that I have those props specified in zoomable view and not inside the image style.

contentWidth={}

contentHeight={}

I'm not sure if you're using the deprecated one, if so I'd suggest that you try this instead https://github.com/openspacelabs/react-native-zoomable-view

let me know if those suggestions helped.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 RodSar