react-native-image-modal-reanimated
Version:
image full screen modal for react native
81 lines • 6.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { Dimensions, Modal, View } from 'react-native';
import { useSharedValue, withTiming } from 'react-native-reanimated';
import { Background, DisplayImageArea, Footer, Header, ImageArea } from './components';
var INITIAL_SCALE = 1;
var ImageDetailComponent = forwardRef(function ImageDetailComponent(_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 = useSharedValue(INITIAL_SCALE);
var animatedPosition = useSharedValue({ x: 0, y: 0 });
var animatedFrame = useSharedValue(0);
var animatedOpacity = useSharedValue(0);
var animatedImagePosition = useSharedValue(originImagePosition);
var animatedImageWidth = useSharedValue(originImageWidth);
var animatedImageHeight = useSharedValue(originImageHeight);
var isAnimated = useRef(true);
var handleClose = function () {
isAnimated.current = true;
willClose === null || willClose === void 0 ? void 0 : willClose();
setTimeout(function () {
animatedOpacity.value = withTiming(0, { duration: animationDuration });
animatedFrame.value = withTiming(0, { duration: animationDuration });
animatedScale.value = withTiming(INITIAL_SCALE, { duration: animationDuration });
animatedPosition.value = withTiming({ x: 0, y: 0 }, { duration: animationDuration });
animatedImagePosition.value = withTiming(originImagePosition, {
duration: animationDuration * 2,
});
animatedImageWidth.value = withTiming(originImageWidth, { duration: animationDuration * 2 });
animatedImageHeight.value = withTiming(originImageHeight, { duration: animationDuration * 2 });
onClose();
isAnimated.current = false;
});
};
var handleOpen = function () {
isAnimated.current = true;
setTimeout(function () {
animatedOpacity.value = withTiming(1, { duration: animationDuration });
animatedFrame.value = withTiming(1, { duration: animationDuration });
animatedImagePosition.value = withTiming({
x: 0,
y: 0,
}, {
duration: animationDuration * 2,
});
animatedImageWidth.value = withTiming(windowWidth, { duration: animationDuration * 2 });
animatedImageHeight.value = withTiming(windowHeight, { duration: animationDuration * 2 });
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 (_jsx(View, { children: _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 { ImageDetailComponent };
//# sourceMappingURL=index.js.map