Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement