67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Modal,
|
|
View,
|
|
Pressable,
|
|
ScrollView,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
} from "react-native";
|
|
|
|
interface BottomSheetProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
dismissOnBackdropPress?: boolean;
|
|
maxHeightRatio?: number;
|
|
}
|
|
|
|
const BottomSheet: React.FC<BottomSheetProps> = ({
|
|
visible,
|
|
onClose,
|
|
children,
|
|
dismissOnBackdropPress = true,
|
|
maxHeightRatio = 0.9,
|
|
}) => {
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<Modal
|
|
transparent
|
|
visible={visible}
|
|
animationType="slide"
|
|
onRequestClose={onClose}
|
|
>
|
|
<KeyboardAvoidingView
|
|
style={{ flex: 1 }}
|
|
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
|
>
|
|
<View className="flex-1 justify-end bg-black/40">
|
|
<Pressable
|
|
style={{ flex: 1 }}
|
|
onPress={dismissOnBackdropPress ? onClose : undefined}
|
|
/>
|
|
|
|
<View
|
|
className="bg-white rounded-t-3xl pt-3 px-5 pb-6"
|
|
style={{ maxHeight: `${maxHeightRatio * 100}%` }}
|
|
>
|
|
<View className="items-center mb-4">
|
|
<View className="w-12 h-1.5 rounded-full bg-gray-300" />
|
|
</View>
|
|
|
|
<ScrollView
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={{ paddingBottom: 8 }}
|
|
>
|
|
{children}
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default BottomSheet;
|