upd: fix modal animasi

components/drawerBottom.tsx

@@ -1,30 +1,56 @@
 import Styles from "@/constants/Styles"
 import { MaterialIcons } from "@expo/vector-icons"
-import { Modal, Pressable, Text, View } from "react-native"
+import { Pressable, Text, View } from "react-native"
+import Modal from 'react-native-modal';
 
 type Props = {
    isVisible: boolean
    setVisible: (value: boolean) => void
    title?: string
    children: React.ReactNode
-   animation: 'slide' | 'none' | 'fade'
+   animation?: 'slide' | 'none' | 'fade'
    height?: number
 }
 
 export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height }: Props) {
    return (
-      <Modal animationType={animation} transparent={true} visible={isVisible}>
-         <View style={[Styles.modalBgTransparant]}>
-            <View style={[Styles.modalContent, height != undefined && { height: `${height}%` }]}>
-               <View style={Styles.titleContainer}>
-                  <Text style={Styles.textDefault}>{title}</Text>
-                  <Pressable onPress={() => setVisible(false)}>
-                     <MaterialIcons name="close" color="black" size={22} />
-                  </Pressable>
-               </View>
-               <View style={Styles.contentContainer}>
-                  {children}
-               </View>
+      // <Modal
+      //    animationType={animation}
+      //    transparent={true} visible={isVisible}>
+      //    <View style={[Styles.modalBgTransparant]}>
+      //       <View style={[Styles.modalContent, height != undefined && { height: `${height}%` }]}>
+      //          <View style={Styles.titleContainer}>
+      //             <Text style={Styles.textDefault}>{title}</Text>
+      //             <Pressable onPress={() => setVisible(false)}>
+      //                <MaterialIcons name="close" color="black" size={22} />
+      //             </Pressable>
+      //          </View>
+      //          <View style={Styles.contentContainer}>
+      //             {children}
+      //          </View>
+      //       </View>
+      //    </View>
+      // </Modal>
+
+      <Modal
+         animationIn={"slideInUp"}
+         animationOut={"slideOutDown"}
+         isVisible={isVisible}
+         onSwipeComplete={() => setVisible(false)}
+         swipeDirection="down"
+         hideModalContentWhileAnimating={true}
+         onBackdropPress={() => { setVisible(false) }}
+         style={[{ justifyContent: 'flex-end', margin: 0 }]}
+      >
+         <View style={[Styles.modalContentNew, height != undefined ? { height: `${height}%` } : { height: '25%' }]}>
+            <View style={[Styles.titleContainerNew]}>
+               <Text style={Styles.textDefault}>{title}</Text>
+               <Pressable onPress={() => setVisible(false)}>
+                  <MaterialIcons name="close" color="black" size={22} />
+               </Pressable>
+            </View>
+            <View style={Styles.contentContainer}>
+               {children}
             </View>
          </View>
       </Modal>

constants/Styles.ts

@@ -240,7 +240,7 @@ const Styles = StyleSheet.create({
       shadowRadius: 3,
       elevation: 10,
       borderRadius: 15,
-      marginBottom:15
+      marginBottom: 15
    },
    wrapGridCaraousel: {
       width: '95%',
@@ -280,7 +280,7 @@ const Styles = StyleSheet.create({
       backgroundColor: '#ccc',
       borderRadius: 10,
       margin: 10,
-      width:'90%'
+      width: '90%'
    },
    contentBar: {
       height: 20,
@@ -388,9 +388,23 @@ const Styles = StyleSheet.create({
       paddingVertical: 10
    },
    contentContainer: {
-      paddingHorizontal: 20,
       height: '80%'
    },
+   modalContentNew: {
+      width: '100%',
+      backgroundColor: 'white',
+      borderTopRightRadius: 18,
+      borderTopLeftRadius: 18,
+      paddingTop: 5,
+      paddingBottom: 20,
+      paddingHorizontal: 20
+   },
+   titleContainerNew: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 10,
+   },
    wrapBtnTab: {
       justifyContent: 'space-between',
       flexDirection: 'row',

package.json

@@ -41,6 +41,7 @@
     "react-native-confirmation-code-field": "^7.4.0",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-gifted-charts": "^1.4.57",
+    "react-native-modal": "^14.0.0-rc.1",
     "react-native-reanimated": "~3.16.1",
     "react-native-reanimated-carousel": "^4.0.2",
     "react-native-safe-area-context": "4.12.0",