react-native-image-modal
Version:
image full screen modal for react native
130 lines • 7.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { Dimensions, Animated, Modal } from 'react-native';
import { Background, DisplayImageArea, Footer, Header, ImageArea } from './components';
var INITIAL_SCALE = 1;
var ImageDetail = forwardRef(function (_a, ref) {
var _b, _c;
var renderToHardwareTextureAndroid = _a.renderToHardwareTextureAndroid, _d = _a.isTranslucent, isTranslucent = _d === void 0 ? false : _d, isOpen = _a.isOpen, origin = _a.origin, source = _a.source, _e = _a.resizeMode, resizeMode = _e === void 0 ? 'contain' : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? '#000000' : _f, swipeToDismiss = _a.swipeToDismiss, _g = _a.hideCloseButton, hideCloseButton = _g === void 0 ? false : _g, imageStyle = _a.imageStyle, parentLayout = _a.parentLayout, animationDuration = _a.animationDuration, renderHeader = _a.renderHeader, renderFooter = _a.renderFooter, renderImageComponent = _a.renderImageComponent, onTap = _a.onTap, onDoubleTap = _a.onDoubleTap, onLongPress = _a.onLongPress, didOpen = _a.didOpen, onMove = _a.onMove, responderRelease = _a.responderRelease, willClose = _a.willClose, onClose = _a.onClose;
var _h = Dimensions.get('window'), windowWidth = _h.width, windowHeight = _h.height;
var originImagePosition = {
x: origin.x - ((_b = parentLayout === null || parentLayout === void 0 ? void 0 : parentLayout.x) !== null && _b !== void 0 ? _b : 0) / 2,
y: origin.y - ((_c = parentLayout === null || parentLayout === void 0 ? void 0 : parentLayout.y) !== null && _c !== void 0 ? _c : 0),
};
var originImageWidth = origin.width, originImageHeight = origin.height;
var animatedScale = new Animated.Value(INITIAL_SCALE);
var animatedPosition = new Animated.ValueXY({ x: 0, y: 0 });
var animatedFrame = new Animated.Value(0);
var animatedOpacity = new Animated.Value(0);
var animatedImagePosition = new Animated.ValueXY(originImagePosition);
var animatedImageWidth = new Animated.Value(originImageWidth);
var animatedImageHeight = new Animated.Value(originImageHeight);
var isAnimated = useRef(true);
var handleClose = function () {
isAnimated.current = true;
willClose === null || willClose === void 0 ? void 0 : willClose();
setTimeout(function () {
Animated.parallel([
Animated.timing(animatedFrame, {
toValue: 0,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedScale, {
toValue: INITIAL_SCALE,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedPosition, {
toValue: 0,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedOpacity, {
toValue: 0,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedImagePosition, {
toValue: originImagePosition,
useNativeDriver: false,
duration: animationDuration * 2,
}),
Animated.timing(animatedImageWidth, {
toValue: originImageWidth,
useNativeDriver: false,
duration: animationDuration * 2,
}),
Animated.timing(animatedImageHeight, {
toValue: originImageHeight,
useNativeDriver: false,
duration: animationDuration * 2,
}),
]).start(function () {
onClose();
isAnimated.current = false;
});
});
};
var handleOpen = function () {
isAnimated.current = true;
setTimeout(function () {
Animated.parallel([
Animated.timing(animatedFrame, {
toValue: 1,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedOpacity, {
toValue: 1,
useNativeDriver: false,
duration: animationDuration,
}),
Animated.timing(animatedImagePosition, {
toValue: {
x: 0,
y: 0,
},
useNativeDriver: false,
duration: animationDuration * 2,
}),
Animated.timing(animatedImageWidth, {
toValue: windowWidth,
useNativeDriver: false,
duration: animationDuration * 2,
}),
Animated.timing(animatedImageHeight, {
toValue: windowHeight,
useNativeDriver: false,
duration: animationDuration * 2,
}),
]).start(function () {
isAnimated.current = false;
if (isOpen) {
didOpen === null || didOpen === void 0 ? void 0 : didOpen();
}
});
});
};
useEffect(function () {
handleOpen();
}, [
animatedOpacity,
animatedImagePosition,
animatedImageWidth,
animatedImageHeight,
animatedFrame,
]);
useImperativeHandle(ref, function () { return ({
close: handleClose,
}); });
return (_jsxs(Modal, { hardwareAccelerated: true, visible: isOpen, transparent: true, statusBarTranslucent: isTranslucent, onRequestClose: handleClose, supportedOrientations: [
'portrait',
'portrait-upside-down',
'landscape',
'landscape-left',
'landscape-right',
], children: [_jsx(Background, { animatedOpacity: animatedOpacity, backgroundColor: backgroundColor, renderToHardwareTextureAndroid: renderToHardwareTextureAndroid }), _jsx(DisplayImageArea, { animatedFrame: animatedFrame, parentLayout: parentLayout, isTranslucent: isTranslucent, renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, children: _jsx(ImageArea, { renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, isAnimated: isAnimated, animatedOpacity: animatedOpacity, animatedScale: animatedScale, animatedPosition: animatedPosition, animatedImagePosition: animatedImagePosition, animatedImageWidth: animatedImageWidth, animatedImageHeight: animatedImageHeight, windowWidth: windowWidth, windowHeight: windowHeight, swipeToDismiss: swipeToDismiss, source: source, resizeMode: resizeMode, imageStyle: imageStyle, animationDuration: animationDuration, isModalOpen: isOpen, renderImageComponent: renderImageComponent, onClose: handleClose, onMove: onMove, onTap: onTap, onDoubleTap: onDoubleTap, onLongPress: onLongPress, responderRelease: responderRelease }) }), _jsx(Header, { isTranslucent: isTranslucent, hideCloseButton: hideCloseButton, renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, animatedOpacity: animatedOpacity, renderHeader: renderHeader, onClose: handleClose }), _jsx(Footer, { renderToHardwareTextureAndroid: renderToHardwareTextureAndroid, animatedOpacity: animatedOpacity, renderFooter: renderFooter, onClose: handleClose })] }));
});
export { ImageDetail };
//# sourceMappingURL=index.js.map