Sheet

1import * as React from "react";
2import {
3  View,
4  Text,
5  Modal,
6  TouchableWithoutFeedback,
7  Platform,
8  Animated,
9  Dimensions,
10  StyleSheet,
11  Easing,
12  KeyboardAvoidingView,
13} from "react-native";
14import { SafeAreaView, Edge } from "react-native-safe-area-context";
15import { cn } from "@/lib/utils";
16import { Feather } from "@expo/vector-icons";
17 
18// Animation config constants
19const ANIMATION = {
20  OPEN: {
21    BACKDROP_DURATION: 180,
22    SPRING_VELOCITY: 3,
23    SPRING_TENSION: 120,
24    SPRING_FRICTION: 22,
25  },
26  CLOSE: {
27    SPRING_FRICTION: 26,
28    SPRING_TENSION: 100,
29    SPRING_VELOCITY: 0.5,
30    BACKDROP_DURATION: 280,
31    BACKDROP_DELAY: 100,
32  },
33};
34 
35// Sheet sizes based on platform guidelines
36const SHEET_SIZES = {
37  SMALL: 0.3, // 30% of screen height
38  MEDIUM: 0.5, // 50% of screen height
39  LARGE: 0.7, // 70% of screen height
40  FULL: 0.9, // 90% of screen height
41};
42 
43const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get("window");
44 
45export type SheetSize = "small" | "medium" | "large" | "full" | number;
46 
47const resolveSheetSize = (size: SheetSize): number => {
48  if (typeof size === "number") return size;
49 
50  switch (size) {
51    case "small":
52      return SHEET_SIZES.SMALL;
53    case "medium":
54      return SHEET_SIZES.MEDIUM;
55    case "large":
56      return SHEET_SIZES.LARGE;
57    case "full":
58      return SHEET_SIZES.FULL;
59    default:
60      return SHEET_SIZES.MEDIUM;
61  }
62};
63 
64interface SheetProps {
65  open: boolean;
66  onClose: () => void;
67  children: React.ReactNode;
68  title?: string;
69  description?: string;
70  size?: SheetSize;
71  side?: "left" | "right" | "top" | "bottom";
72  contentClassName?: string;
73  avoidKeyboard?: boolean;
74  closeOnBackdropPress?: boolean;
75  disableBackHandler?: boolean;
76}
77 
78interface SheetContextValue {
79  close: () => void;
80  isClosing: boolean;
81  isAnimating: boolean;
82  position: Animated.Value;
83}
84 
85export const SheetContext = React.createContext<SheetContextValue>({
86  close: () => { },
87  isClosing: false,
88  isAnimating: false,
89  position: new Animated.Value(0),
90});
91 
92export const useSheet = () => React.useContext(SheetContext);
93 
94const Sheet = React.forwardRef<View, SheetProps>(
95  (
96    {
97      open,
98      onClose,
99      children,
100      title,
101      description,
102      size = "medium",
103      side = "right",
104      contentClassName,
105      avoidKeyboard = true,
106      closeOnBackdropPress = true,
107      disableBackHandler = false,
108    },
109    ref
110  ) => {
111    const [isVisible, setIsVisible] = React.useState(false);
112// … truncated