4.0.0 (2024-08-04)
What's new
-
Zoomable Component: This component makes any child elements zoomable, ensuring they behave like the image zoom component. This is particularly useful when you need to replace the default image component with alternatives like Expo Image (see example) or Fast Image.
-
Updated Ref Handle: Customize the functionality further by utilizing the exposed
zoommethod. This method allows you to programmatically zoom in the image to a given point (x, y) at a given scale level.
Zoomable with Expo Image Example
<Zoomable
ref={ref}
minScale={0.5}
maxScale={5}
doubleTapScale={3}
minPanPointers={1}
isSingleTapEnabled
isDoubleTapEnabled
onInteractionStart={() => {
console.log('onInteractionStart');
onZoom();
}}
onInteractionEnd={() => console.log('onInteractionEnd')}
onPanStart={() => console.log('onPanStart')}
onPanEnd={() => console.log('onPanEnd')}
onPinchStart={() => console.log('onPinchStart')}
onPinchEnd={() => console.log('onPinchEnd')}
onSingleTap={() => console.log('onSingleTap')}
onDoubleTap={(zoomType) => {
console.log('onDoubleTap', zoomType);
onZoom(zoomType);
}}
onProgrammaticZoom={(zoomType) => {
console.log('onZoom', zoomType);
onZoom(zoomType);
}}
style={styles.image}
onResetAnimationEnd={(finished) => {
console.log('onResetAnimationEnd', finished);
onAnimationEnd(finished);
}}
>
<Image style={styles.image} source={{ uri }} contentFit="cover" />
</Zoomable>