mobile-darmasaba/components/modalFloat.tsx

import Styles from '@/constants/Styles';
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
   onSubmit: () => void
   disableSubmit?: boolean
}

export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit }: Props) {
   return (
      <Modal
         animationIn={"fadeIn"}
         animationOut={"fadeOut"}
         isVisible={isVisible}
         hideModalContentWhileAnimating={true}
         onBackdropPress={() => { setVisible(false) }}
      >
         <View style={[Styles.modalFloatContent]}>
            <View style={[Styles.titleContainerModalFloat]}>
               <Text style={Styles.textDefaultSemiBold}>{title}</Text>
            </View>
            <View style={[Styles.mb10]}>
               {children}
            </View>
            <View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
               <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
                  <Text style={[Styles.textDefault]}>Batal</Text>
               </Pressable>
               <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit} disabled={disableSubmit}>
                  <Text style={[Styles.textDefault, disableSubmit && Styles.cGray]}>Simpan</Text>
               </Pressable>
            </View>
         </View>
      </Modal>
   )
}