SHARE
TWEET

Untitled

a guest Jun 27th, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react';
  2. import PropTypes from 'prop-types';
  3.  
  4. import { Image, StyleSheet, Dimensions } from 'react-native';
  5. import FastImage from 'react-native-fast-image';
  6. import ImageZoom from 'react-native-image-pan-zoom';
  7.  
  8. // ZoomableImage component renders a zoomable FastImage the size of the screen dimensions.
  9.  
  10. const dims = Dimensions.get('window');
  11.  
  12. const styles = StyleSheet.create({
  13.   container: {
  14.     width: dims.width,
  15.     height: dims.height,
  16.   },
  17.   image: {
  18.     ...StyleSheet.absoluteFillObject,
  19.   },
  20. });
  21.  
  22. function useImageSize(uri) {
  23.   const [imageSize, setImageSize] = useState({ width: null, height: null });
  24.   useEffect(() => {
  25.     Image.getSize(uri, (width, height) => {
  26.       // use aspect ratio to set the size of the image relative to react-native pixels.
  27.       setImageSize({ width: dims.width, height: height / width * dims.width });
  28.     });
  29.   }, []);
  30.   return imageSize;
  31. }
  32.  
  33. function ZoomableImage({ style, source: { uri } }) {
  34.   const imageSize = useImageSize(uri);
  35.  
  36.   if (imageSize.width != null) {
  37.     return (
  38.       <ImageZoom
  39.         style={[styles.container, style]}
  40.         cropWidth={dims.width}
  41.         cropHeight={dims.height}
  42.         imageWidth={imageSize.width}
  43.         imageHeight={imageSize.height}
  44.       >
  45.         <FastImage
  46.           style={styles.image}
  47.           source={{ uri }}
  48.           resizeMode={FastImage.resizeMode.cover}
  49.         />
  50.       </ImageZoom>
  51.     );
  52.   }
  53.   return null;
  54. }
  55.  
  56. ZoomableImage.propTypes = {
  57.   style: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  58.   source: PropTypes.shape({ uri: PropTypes.string.isRequired }).isRequired,
  59. };
  60.  
  61. ZoomableImage.defaultProps = {
  62.   style: null,
  63. };
  64.  
  65. export default ZoomableImage;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top