V4.0 Add Zoomable Component

[likashefqet]

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 zoom method. 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>