wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: fix modal animasi

Browse Source
This commit is contained in:
amel
2025-03-17 14:53:53 +08:00
parent f73bf8354d
commit e1f0102042
4 changed files with 58 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/drawerBottom.tsx
View File

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