react-native-images-preview
Version:
A React Native animated custom images preview component.
33 lines • 1.98 kB
JavaScript
import React from 'react';
import { Image, TouchableOpacity, View } from 'react-native';
import { images } from '../../assets';
import { ErrorImage, ImageLoader, ImageModal } from './components';
import { useImagePreview } from './hooks';
import styles from './Styles';
const ImagePreview = ({ imageSource, imageStyle, renderHeader, imageProps, pinchZoomEnabled = true, doubleTapZoomEnabled = true, swipeDownCloseEnabled = true, errorImageSource = images.errorImage, imageLoaderProps, renderImageLoader, }) => {
const { modalConfig, onPressImage, setModalConfig, imageRef, loading, setLoading, error, setError, } = useImagePreview();
return (React.createElement(React.Fragment, null, imageSource && (React.createElement(React.Fragment, null,
modalConfig.visible ? (React.createElement(ImageModal, { ...{
modalConfig,
setModalConfig,
renderHeader,
imageSource,
pinchZoomEnabled,
doubleTapZoomEnabled,
swipeDownCloseEnabled,
} })) : (React.createElement(TouchableOpacity, { onPress: onPressImage, style: [imageStyle, styles.imageParent], disabled: error },
React.createElement(Image, { ref: imageRef, source: imageSource, style: imageStyle, onLoadStart: () => {
setLoading(true);
setError(false);
}, onLoadEnd: () => {
setLoading(false);
}, onError: () => {
setLoading(false);
setError(true);
}, ...imageProps }),
error && React.createElement(ErrorImage, { ...{ imageStyle, errorImageSource } }),
loading && (React.createElement(ImageLoader, { ...{ renderImageLoader }, ...imageLoaderProps })))),
modalConfig.visible && React.createElement(View, { style: imageStyle })))));
};
export default ImagePreview;
//# sourceMappingURL=ImagePreview.js.map