ZoomableImage.jsx

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';

import { Image, StyleSheet, Dimensions } from 'react-native';
import FastImage from 'react-native-fast-image';
import ImageZoom from 'react-native-image-pan-zoom';

// ZoomableImage component renders a zoomable FastImage the size of the screen dimensions.

const dims = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    width: dims.width,
    height: dims.height,
  },
  image: {
    ...StyleSheet.absoluteFillObject,
  },
});

function useImageSize(uri) {
  const [imageSize, setImageSize] = useState({ width: null, height: null });
  useEffect(() => {
    Image.getSize(uri, (width, height) => {
      // use aspect ratio to set the size of the image relative to react-native pixels.
      setImageSize({ width: dims.width, height: height / width * dims.width });
    });
  }, []);
  return imageSize;
}

function ZoomableImage({ style, source: { uri } }) {
  const imageSize = useImageSize(uri);

  if (imageSize.width != null) {
    return (
      <ImageZoom
        style={[styles.container, style]}
        cropWidth={dims.width}
        cropHeight={dims.height}
        imageWidth={imageSize.width}
        imageHeight={imageSize.height}
      >
        <FastImage
          style={styles.image}
          source={{ uri }}
          resizeMode={FastImage.resizeMode.cover}
        />
      </ImageZoom>
    );
  }
  return null;
}

ZoomableImage.propTypes = {
  style: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  source: PropTypes.shape({ uri: PropTypes.string.isRequired }).isRequired,
};

ZoomableImage.defaultProps = {
  style: null,
};

export default ZoomableImage;