latest code with fix modal back Press problem

src/Component/SideDrawer/SideDrawer.tsx

@@ -2,13 +2,13 @@ import React, { useEffect } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image } from 'react-native';
 import Modal from 'react-native-modal';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, withDelay } from 'react-native-reanimated';
-import { X, Home, Gavel, FileText, User, LogOut, ChevronRight } from 'lucide-react-native';
+import { Home, Gavel, FileText, User, LogOut, ChevronRight } from 'lucide-react-native';
 import { CommonActions, useNavigation } from '@react-navigation/native';
 import { useDispatch } from 'react-redux';
 import { removeToken } from '../../Redux/Slices/Token';
 import NavigationString from '../../Constant/NavigationString';
 
-const { width } = Dimensions.get('window');
+const { width, height } = Dimensions.get('window');
 const DRAWER_WIDTH = width * 0.78;
 
 interface Props { visible: boolean; onClose: () => void; }
@@ -22,7 +22,7 @@ const SideDrawer: React.FC<Props> = ({ visible, onClose }) => {
 
   useEffect(() => {
     translateX.value = visible
-      ? withTiming(0, { duration: 300 })
+      ? withTiming(0, { duration: 0 })
       : withTiming(-DRAWER_WIDTH, { duration: 250 });
   }, [visible]);
 
@@ -45,12 +45,12 @@ const SideDrawer: React.FC<Props> = ({ visible, onClose }) => {
       label: 'Tenders',
       icon: FileText,
       onPress: () => navigation.navigate(NavigationString.Tender),
-    },
-    {
-      label: 'Profile',
-      icon: User,
-      onPress: () => { },
-    },
+    }
+    // {
+    //   label: 'Profile',
+    //   icon: User,
+    //   onPress: () => { },
+    // },
   ];
 
   return (
@@ -63,13 +63,17 @@ const SideDrawer: React.FC<Props> = ({ visible, onClose }) => {
       animationOut="fadeOut"
       style={styles.modal}
       useNativeDriver
+      coverScreen={false}
+      propagateSwipe
     >
       <Animated.View style={[styles.drawer, drawerStyle]}>
         {/* ================= Header / Profile ================= */}
         <View style={styles.profileHeader}>
-          <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
+          {/* <TouchableOpacity style={styles.closeBtn} onPress={() => {
+            console.log('sdfadsfdsf');
+          }}>
             <X size={20} color="#111827" />
-          </TouchableOpacity>
+          </TouchableOpacity> */}
 
           <Image source={{ uri: user.avatar }} style={styles.avatar} />
 
@@ -151,7 +155,7 @@ const styles = StyleSheet.create({
 
   drawer: {
     width: DRAWER_WIDTH,
-    height: '100%',
+    height: height - 80,
     backgroundColor: '#FFFFFF',
     borderTopRightRadius: 24,
     borderBottomRightRadius: 24,
@@ -171,6 +175,8 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 20,
     right: 16,
+    padding: 10,
+    zIndex: 20
   },
 
   avatar: {