1import { View } from "react-native";
2import { FormSheet } from "react-native-screens";
3import { useResolveClassNames } from "uniwind";
4
5import { BottomSheetContext } from "./BottomSheetContext";
6import type { PaneSheetProps } from "./PaneSheet.types";
7export type { PaneSheetProps } from "./PaneSheet.types";
8
9/** A native sheet holding a pane that draws its own bar, which runs up under the drawn grabber. */
10export function PaneSheet({ children, ...props }: PaneSheetProps) {
11 const containerStyle = useResolveClassNames("bg-header");
12 return (
13 <FormSheet {...props} preferredCornerRadius={28} nativeContainerStyle={containerStyle}>
14 <BottomSheetContext value>
15 {/* Android FormSheet does not bound flex children. */}
16 <View collapsable={false} className="absolute inset-0 bg-header pt-3">
17 {children}
18 <View
19 pointerEvents="none"
20 className="absolute top-1 h-1 w-8 self-center rounded-full bg-header-foreground/40"
21 />
22 </View>
23 </BottomSheetContext>
24 </FormSheet>
25 );
26}