68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import {FC} from "react";
|
|
import {Props} from "react-native-paper";
|
|
import {StyleSheet, View, Image, TouchableOpacity} from "react-native";
|
|
import {BottomSheetModalProvider} from "@gorhom/bottom-sheet";
|
|
import {useDispatch, useSelector} from "react-redux";
|
|
import {RootState} from "../../../redux/store";
|
|
import Modal from "react-native-modal";
|
|
import {background, blue} from "../../../css/colors";
|
|
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
|
|
import * as Progress from 'react-native-progress';
|
|
import ImageViewer from "react-native-image-zoom-viewer";
|
|
import {RFPercentage} from "react-native-responsive-fontsize";
|
|
import {closeImageZoomModal} from "../../../features/imageZoomModal/loadingModalSlice";
|
|
|
|
const ImageZoomModal: FC = () => {
|
|
const isVisible = useSelector((state: RootState) => state.imageZoomModal.isVisible);
|
|
const imageUrls = useSelector((state: RootState) => state.imageZoomModal.imageUrls);
|
|
const dispatch = useDispatch();
|
|
return (
|
|
<Modal isVisible={isVisible}>
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity onPress={() => {
|
|
dispatch(closeImageZoomModal())
|
|
}}>
|
|
<View style={styles.imageWrapper}>
|
|
<Image source={require('assets/icons/cancel.png')} style={styles.image}/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
<ImageViewer
|
|
imageUrls={imageUrls.map(imageUrl => {
|
|
return {
|
|
url: imageUrl
|
|
}
|
|
})}/>
|
|
</View>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignSelf: "center",
|
|
backgroundColor: background,
|
|
borderRadius: responsiveWidth(2),
|
|
paddingBottom: responsiveHeight(5),
|
|
paddingHorizontal: responsiveWidth(5),
|
|
height: "95%",
|
|
width: "95%"
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end",
|
|
padding: RFPercentage(2)
|
|
},
|
|
imageWrapper: {
|
|
height: responsiveHeight(4),
|
|
width: responsiveHeight(4),
|
|
},
|
|
image: {
|
|
height: "100%",
|
|
width: "100%",
|
|
resizeMode: "center"
|
|
}
|
|
})
|
|
export default ImageZoomModal; |