Merge pull request #14 from bipproduction/amalia/17-mar-25

upd: fix modal animasi

components/drawerBottom.tsx

@@ -1,22 +1,49 @@
 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}>
+      // <Modal
-         <View style={[Styles.modalBgTransparant]}>
+      //    animationType={animation}
-            <View style={[Styles.modalContent, height != undefined && { height: `${height}%` }]}>
+      //    transparent={true} visible={isVisible}>
-               <View style={Styles.titleContainer}>
+      //    <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} />
@@ -26,7 +53,6 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
                {children}
             </View>
          </View>
-         </View>
       </Modal>
    )
 }

constants/Styles.ts

@@ -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",