mobile-darmasaba/components/drawerBottom.tsx

import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialIcons } from "@expo/vector-icons";
import { Dimensions, KeyboardAvoidingView, Platform, Pressable, View } from "react-native";
import Modal from 'react-native-modal';
import Text from "./Text";

type Props = {
   isVisible: boolean
   setVisible: (value: boolean) => void
   title?: string
   children: React.ReactNode
   animation?: 'slide' | 'none' | 'fade'
   height?: number
   backdropPressable?: boolean
   keyboard?: boolean
}

export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true, keyboard = false }: Props) {
   const tinggiScreen = Dimensions.get("window").height;
   const { colors } = useTheme();
   const tinggiInput = height != undefined ? height : 25
   const tinggiFix = tinggiScreen * tinggiInput / 100;

   return (
      <Modal
         animationIn={"slideInUp"}
         animationOut={"slideOutDown"}
         isVisible={isVisible}
         onSwipeComplete={() => setVisible(false)}
         swipeDirection="down"
         hideModalContentWhileAnimating={true}
         onBackdropPress={() => { setVisible(!backdropPressable) }}
         style={[{ justifyContent: 'flex-end', margin: 0 }]}
         animationOutTiming={500}
         animationInTiming={500}
         backdropTransitionInTiming={500}
         backdropTransitionOutTiming={500}
         useNativeDriverForBackdrop={true}
         propagateSwipe={true}
      >
         {
            keyboard ?
               <KeyboardAvoidingView
                  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
                  keyboardVerticalOffset={0}
               >
                  <View style={[Styles.modalContentNew, { height: tinggiFix, backgroundColor: colors.modalBackground }]}>
                     <View style={[Styles.titleContainerNew]}>
                        <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefaultSemiBold, Styles.w90]}>{title}</Text>
                        <Pressable onPress={() => setVisible(false)}>
                           <MaterialIcons name="close" color={colors.text} size={22} />
                        </Pressable>
                     </View>
                     <View style={Styles.contentContainer}>
                        {children}
                     </View>
                  </View>
               </KeyboardAvoidingView>
               :
               <View style={[Styles.modalContentNew, { height: tinggiFix, backgroundColor: colors.modalBackground }]}>
                  <View style={[Styles.titleContainerNew]}>
                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefaultSemiBold, Styles.w90]}>{title}</Text>
                     <Pressable onPress={() => setVisible(false)}>
                        <MaterialIcons name="close" color={colors.text} size={22} />
                     </Pressable>
                  </View>
                  <View style={[Styles.contentContainer, { flex: 1 }]}>
                     {children}
                  </View>
               </View>
         }
      </Modal>
   )
}