@mr_gain/react-native-image-modal/dist/index.js

image full screen modal for react native

import React, { createRef, forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { Animated, View } from 'react-native';
import { ImageDetail, OriginImage } from './components';
import { useOriginImageLayout } from './hooks';
var VISIBLE_OPACITY = 1;
var INVISIBLE_OPACITY = 0;
var ImageModal = forwardRef(function (_a, ref) {
    var source = _a.source, style = _a.style, _b = _a.resizeMode, resizeMode = _b === void 0 ? 'contain' : _b, _c = _a.isRTL, isRTL = _c === void 0 ? false : _c, _d = _a.renderToHardwareTextureAndroid, renderToHardwareTextureAndroid = _d === void 0 ? true : _d, isTranslucent = _a.isTranslucent, _e = _a.swipeToDismiss, swipeToDismiss = _e === void 0 ? true : _e, _f = _a.imageBackgroundColor, imageBackgroundColor = _f === void 0 ? 'transparent' : _f, overlayBackgroundColor = _a.overlayBackgroundColor, hideCloseButton = _a.hideCloseButton, modalRef = _a.modalRef, _g = _a.disabled, disabled = _g === void 0 ? false : _g, modalImageStyle = _a.modalImageStyle, modalImageResizeMode = _a.modalImageResizeMode, parentLayout = _a.parentLayout, _h = _a.animationDuration, animationDuration = _h === void 0 ? 100 : _h, onLongPressOriginImage = _a.onLongPressOriginImage, renderHeader = _a.renderHeader, renderFooter = _a.renderFooter, renderImageComponent = _a.renderImageComponent, onTap = _a.onTap, onDoubleTap = _a.onDoubleTap, onLongPress = _a.onLongPress, onOpen = _a.onOpen, didOpen = _a.didOpen, onMove = _a.onMove, responderRelease = _a.responderRelease, willClose = _a.willClose, onClose = _a.onClose, onError = _a.onError;
    var imageRef = createRef();
    var imageDetailRef = modalRef !== null && modalRef !== void 0 ? modalRef : createRef();
    var originImageOpacity = useRef(new Animated.Value(VISIBLE_OPACITY)).current;
    var _j = useState(false), isModalOpen = _j[0], setIsModalOpen = _j[1];
    var _k = useOriginImageLayout({
        imageRef: imageRef,
        isRTL: isRTL,
    }), originImageLayout = _k.originImageLayout, updateOriginImageLayout = _k.updateOriginImageLayout;
    var showModal = function () {
        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
        updateOriginImageLayout();
        setTimeout(function () {
            setIsModalOpen(true);
        });
    };
    var hideModal = function () {
        setTimeout(function () {
            setIsModalOpen(false);
            onClose === null || onClose === void 0 ? void 0 : onClose();
        });
    };
    var handleOpen = function () {
        showModal();
        Animated.timing(originImageOpacity, {
            toValue: INVISIBLE_OPACITY,
            duration: animationDuration,
            useNativeDriver: false,
        }).start();
    };
    var handleClose = function () {
        originImageOpacity.setValue(VISIBLE_OPACITY);
        hideModal();
    };
    useImperativeHandle(ref, function () { return ({
        isOpen: isModalOpen,
        open: handleOpen,
        close: function () {
            imageDetailRef.current.close();
        },
    }); });
    return (<View ref={imageRef} style={[{ alignSelf: 'baseline', backgroundColor: imageBackgroundColor }]}>
        <OriginImage source={source} resizeMode={resizeMode} imageOpacity={originImageOpacity} renderToHardwareTextureAndroid={renderToHardwareTextureAndroid} disabled={disabled} style={style} onDialogOpen={handleOpen} onLongPressOriginImage={onLongPressOriginImage} renderImageComponent={renderImageComponent} onError={onError}/>
        {isModalOpen && (<ImageDetail source={source} resizeMode={modalImageResizeMode !== null && modalImageResizeMode !== void 0 ? modalImageResizeMode : resizeMode} imageStyle={modalImageStyle} ref={modalRef !== null && modalRef !== void 0 ? modalRef : imageDetailRef} isOpen={isModalOpen} renderToHardwareTextureAndroid={renderToHardwareTextureAndroid} isTranslucent={isTranslucent} origin={originImageLayout} backgroundColor={overlayBackgroundColor} swipeToDismiss={swipeToDismiss} hideCloseButton={hideCloseButton} parentLayout={parentLayout} animationDuration={animationDuration} renderHeader={renderHeader} renderFooter={renderFooter} renderImageComponent={renderImageComponent} onTap={onTap} onDoubleTap={onDoubleTap} onLongPress={onLongPress} didOpen={didOpen} onMove={onMove} responderRelease={responderRelease} willClose={willClose} onClose={handleClose}/>)}
      </View>);
});
export default ImageModal;
//# sourceMappingURL=index.js.map