I have an Image component inside a modal in react native .64, and it works perfectly on iOS, but with Android I get a an error (for instance: Pool hard cap violation? Hard cap = 201326592 Used size = 200030968 Free size = 0 Request size = 4194000
)
I've done research, and some people have had good luck setting android:large_heap="true"
but it slows my app down to a crawl on that page. How do I get images to show fullscreen in a modal for Android in React Native?
My image (that works on iOS):
<Modal supportedOrientations={['landscape', 'portrait']} animationType='fade' visible={!!modalImage} style={{...StyleSheet.absoluteFillObject}}>
<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://testsite.com${HtmlTextParser(modalImage)}` }} />
</ReactNativeZoomableView>
</View>
</Modal>
I had the same problem in Android Emulator with small images.
I changed the build architecture in app build.gradle from x86 to x86_64 and the problem's gone