1import { useState } from "react";
2import { View } from "react-native";
3import { FormSheet } from "react-native-screens";
4import { useResolveClassNames } from "uniwind";
5import { AppBar } from "./AppBar";
6import { BottomSheetContext } from "./BottomSheetContext";
7import { RoutedFormSheetContext } from "./RoutedFormSheetContext";
8import { ScreenContent } from "./ScreenContent";
9import type { SheetProps } from "./Sheet.types";
10export type { SheetProps } from "./Sheet.types";
11
12export function Sheet(props: SheetProps) {
13 const containerStyle = useResolveClassNames("bg-header");
14 const [isOpen, setIsOpen] = useState(true);
15 return (
16 <FormSheet
17 isOpen={isOpen}
18 detents={[0.5, 0.9]}
19 prefersGrabberVisible={false}
20 preventNativeDismiss={props.dismissDisabled}
21 nativeContainerStyle={containerStyle}
22 onDismiss={props.onClose}
23 onNativeDismiss={props.onClose}
24 >
25 <BottomSheetContext value>
26 <RoutedFormSheetContext value={false}>
27 {/* Android FormSheet does not bound flex children. */}
28 <View collapsable={false} className="absolute inset-0 bg-header">
29 <AppBar
30 sheet
31 title={props.title}
32 onBack={props.dismissDisabled ? undefined : () => setIsOpen(false)}
33 hideBottomBorder
34 />
35 <ScreenContent>{props.children}</ScreenContent>
36 <View
37 pointerEvents="none"
38 className="absolute top-1 h-1 w-8 self-center rounded-full bg-header-foreground/40"
39 />
40 </View>
41 </RoutedFormSheetContext>
42 </BottomSheetContext>
43 </FormSheet>
44 );
45}