ebanutsya

src/components/Modals/ImageZoomModal/ImageZoomModal.tsx

@@ -0,0 +1,69 @@
+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 => {
+                        console.log(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;

src/components/OrderCard/OrderProductsList.tsx

@@ -56,7 +56,7 @@ const OrderProductsList: FC<ListProps> = ({products, onSelected}) => {
 
 const listStyles = StyleSheet.create({
     container: {
-        backgroundColor: "white",
+        backgroundColor: 'white',
         flex: 1
     },
     title: {

src/components/SearchBar/SearchBar.tsx

@@ -76,7 +76,8 @@ const styles = StyleSheet.create({
         borderRadius: 0,
         borderTopRightRadius: responsiveWidth(1),
         borderBottomRightRadius: responsiveWidth(1),
-        paddingHorizontal: responsiveWidth(5)
+        paddingHorizontal: responsiveWidth(5),
+        height:'100%'
     },
     scanImageWrapper: {
         paddingHorizontal: responsiveWidth(1),