Drawer

1import { cn } from "@/lib/utils";
2import * as React from "react";
3import {
4  Animated,
5  Dimensions,
6  Easing,
7  KeyboardAvoidingView,
8  Modal,
9  PanResponder,
10  Platform,
11  StyleSheet,
12  Text,
13  TouchableWithoutFeedback,
14  View,
15} from "react-native";
16import { SafeAreaView } from "react-native-safe-area-context";
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  SNAP: {
34    SPRING_TENSION: 120,
35    SPRING_FRICTION: 22,
36  },
37};
38 
39// Drag behavior constants
40const DRAG = {
41  THRESHOLD: 5,
42  CLOSE_DISTANCE: 100,
43  VELOCITY_THRESHOLD: {
44    UP: 0.3,
45    DOWN: 0.5,
46  },
47  RESISTANCE: 0.1,
48};
49 
50// Drawer sizes - Definition of preset snap points
51const DRAWER_SIZES = {
52  SMALL: [0.3, 0.5], // Small drawer that can be extended to 50%
53  MEDIUM: [0.5, 0.8], // Medium drawer that can be extended to 80%
54  LARGE: [0.6, 0.8, 0.95], // Large drawer with size options
55  FULL: [0.8, 0.95], // Full screen with reduced option
56};
57 
58const { height: SCREEN_HEIGHT } = Dimensions.get("window");
59 
60export type DrawerSize = "small" | "medium" | "large" | "full" | number[];
61 
62const resolveSnapPoints = (size: DrawerSize): number[] => {
63  if (Array.isArray(size)) return size;
64 
65  switch (size) {
66    case "small":
67      return DRAWER_SIZES.SMALL;
68    case "medium":
69      return DRAWER_SIZES.MEDIUM;
70    case "large":
71      return DRAWER_SIZES.LARGE;
72    case "full":
73      return DRAWER_SIZES.FULL;
74    default:
75      return DRAWER_SIZES.MEDIUM;
76  }
77};
78 
79interface DrawerProps {
80  open: boolean;
81  onClose: () => void;
82  children: React.ReactNode;
83  title?: string;
84  size?: DrawerSize;
85  initialSnapIndex?: number;
86  snapPoints?: number[];
87  contentClassName?: string;
88  avoidKeyboard?: boolean;
89  closeOnBackdropPress?: boolean;
90  disableBackHandler?: boolean;
91}
92 
93interface DrawerContextValue {
94  close: () => void;
95  snapTo: (index: number) => void;
96  currentSnapIndex: number;
97  snapPoints: number[];
98  isClosing: boolean;
99  isAnimating: boolean;
100  position: Animated.Value;
101}
102 
103export const DrawerContext = React.createContext<DrawerContextValue>({
104  close: () => { },
105  snapTo: () => { },
106  currentSnapIndex: 0,
107  snapPoints: DRAWER_SIZES.MEDIUM,
108  isClosing: false,
109  isAnimating: false,
110  position: new Animated.Value(0),
111});
112 
113// … truncated