react-native-gallery-preview
Version:
<div> <img align="right" height="720" src="example.gif"> </div>
155 lines (154 loc) • 6.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GalleryPreviewForImage = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _constants = require("../../constants");
var _DefaultHeader = require("../DefaultHeader/DefaultHeader");
var _GalleryImageItem = require("./GalleryImageItem");
var _GalleryStatusBar = require("../GalleryStatusBar/GalleryStatusBar");
var _ModalContainer = require("../ModalContainer/ModalContainer");
var _DefaultImageComponent = require("../DefaultImageComponent/DefaultImageComponent");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const GalleryPreviewForImage = ({
isVisible,
onRequestClose,
initialIndex = 0,
gap = 24,
simultaneousRenderedImages = 6,
OverlayComponent = _DefaultHeader.DefaultHeader,
springConfig = _constants.SPRING_CONFIG,
maxScale = _constants.MAX_SCALE,
doubleTabEnabled = true,
pinchEnabled = true,
swipeToCloseEnabled = true,
backgroundColor = "#000",
headerTextColor = "#fff",
images,
ImageComponent = _DefaultImageComponent.DefaultImageComponent
}) => {
const rtl = _reactNative.I18nManager.isRTL;
const dimensions = (0, _reactNative.useWindowDimensions)();
const [index, setIndex] = (0, _react.useState)(initialIndex);
const [isFocused, setIsFocused] = (0, _react.useState)(true);
const translateX = (0, _reactNativeReanimated.useSharedValue)(initialIndex * -(dimensions.width + gap) * (rtl ? -1 : 1));
const opacity = (0, _reactNativeReanimated.useSharedValue)(1);
const currentIndex = (0, _reactNativeReanimated.useSharedValue)(initialIndex);
(0, _reactNativeReanimated.useAnimatedReaction)(() => currentIndex.value, newIndex => {
(0, _reactNativeReanimated.runOnJS)(setIndex)(newIndex);
}, [currentIndex]);
const wrapperAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
opacity: opacity.value
}), [isFocused]);
const containerAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateX: translateX.value
}]
}));
const isImageVisible = (0, _react.useCallback)(imageIndex => {
const halfVisible = Math.floor(simultaneousRenderedImages / 2);
const start = Math.max(0, index - halfVisible);
const end = Math.min(images.length - 1, start + simultaneousRenderedImages - 1);
return imageIndex >= start && imageIndex <= end;
}, [images.length, index, simultaneousRenderedImages]);
const getImagePositionX = (0, _react.useCallback)(i => {
return i * -(_reactNative.Dimensions.get("window").width + gap) * (rtl ? -1 : 1);
}, [gap, rtl]);
(0, _react.useEffect)(() => {
if (isVisible) {
opacity.value = 1;
currentIndex.value = initialIndex;
translateX.value = getImagePositionX(initialIndex);
setIsFocused(true);
}
}, [currentIndex, getImagePositionX, initialIndex, isVisible, opacity, translateX]);
(0, _react.useEffect)(() => {
const subscription = _reactNative.Dimensions.addEventListener("change", ({
window
}) => {
const {
width
} = window;
translateX.value = (0, _reactNativeReanimated.withDelay)(0, (0, _reactNativeReanimated.withTiming)(currentIndex.value * -(width + gap) * (rtl ? -1 : 1)));
});
return () => {
subscription.remove();
};
}, [currentIndex.value, gap, rtl, translateX]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalContainer.ModalContainer, {
isVisible: isVisible,
onRequestClose: onRequestClose,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryStatusBar.GalleryStatusBar, {
isFocused: isFocused,
backgroundColor: backgroundColor
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
style: [wrapperAnimatedStyle, styles.wrapper, {
backgroundColor
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
style: styles.gestureContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: [containerAnimatedStyle, styles.container, {
columnGap: gap
}],
children: images.map((image, i) => {
const visible = isImageVisible(i);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
...dimensions
},
children: visible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryImageItem.GalleryImageItem, {
item: image,
index: i,
currentIndex: currentIndex,
isFirst: i === 0,
isLast: i === images.length - 1,
rootTranslateX: translateX,
opacity: opacity,
width: dimensions.width,
height: dimensions.height,
dataLength: images.length,
gap: gap,
onClose: onRequestClose,
isFocused: isFocused,
setIsFocused: setIsFocused,
ImageComponent: ImageComponent,
springConfig: springConfig,
maxScale: maxScale,
swipeToCloseEnabled: swipeToCloseEnabled,
pinchEnabled: pinchEnabled,
doubleTabEnabled: doubleTabEnabled,
rtl: rtl
})
}, i);
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(OverlayComponent, {
isFocused: isFocused,
imagesLength: images.length,
currentImageIndex: index,
onClose: onRequestClose,
containerBackgroundColor: backgroundColor,
textColor: headerTextColor
})]
})]
});
};
exports.GalleryPreviewForImage = GalleryPreviewForImage;
const styles = _reactNative.StyleSheet.create({
wrapper: {
flex: 1
},
gestureContainer: {
flex: 1
},
container: {
flexDirection: "row"
}
});
//# sourceMappingURL=GalleryPreviewForImage.js.map