Prompt: Tạo bottom sheet kéo/thả trên Map ở `app/(tabs)/index.tsx`

Mục tiêu

Thêm một component dạng bottom sheet nổi trên MapView, có thể nhấn (click) để mở nhanh và kéo (swipe) để thay đổi chiều cao mượt mà.

Dự án Expo React Native (TypeScript) với màn hình map tại: app/(tabs)/index.tsx.
Cần chèn một panel nổi (overlay) bám đáy màn hình, hiển thị trên MapView.

Chiều cao ban đầu: 10% chiều cao màn hình.
Chiều cao tối đa: 50% chiều cao màn hình.
Có một nút ở góc trên bên phải của panel để “mở/thu” (move up/down).
Khi người dùng click vào panel hoặc click nút: panel mở ngay lập tức lên 50%.
Khi người dùng vuốt (kéo) panel lên/xuống: chiều cao thay đổi dần, bị chặn trong khoảng [10%, 50%].
Hiệu ứng chuyển đổi chiều cao phải mượt mà, không gây khó chịu (ease-in-out, 180–300ms).
Panel chỉ nhận touch trong vùng của nó, không chặn thao tác trên map ở các vùng khác.

Panel bám đáy màn hình, bo tròn góc trên (ví dụ: borderTopLeftRadius/borderTopRightRadius = 16–20).
Có bóng đổ nhẹ để nổi trên map.
Có “khu vực kéo” (drag handle) ở header panel (có thể là dải ngang mảnh) + nút toggle ở góc trên bên phải.
Nội dung bên trong panel có thể là placeholder đơn giản (ví dụ một vài dòng text) để kiểm chứng hành vi.

Ưu tiên dùng react-native-gesture-handler + react-native-reanimated để có tương tác kéo mượt (UI thread). Nếu không khả dụng, fallback sang Animated + PanResponder vẫn được.
Không thêm UI library bên thứ ba cho bottom sheet (ví dụ @gorhom/bottom-sheet) — tự triển khai component nhẹ.
TypeScript, functional components, tuân thủ style hiện có (không thay đổi kiến trúc không cần thiết).

Tạo component components/DraggablePanel.tsx với các props:
- minHeightPct?: number (mặc định 0.1)
- maxHeightPct?: number (mặc định 0.5)
- initialState?: 'min' | 'max' (mặc định 'min')
- onExpandedChange?: (expanded: boolean) => void
Trong DraggablePanel, tính chiều cao theo phần trăm màn hình bằng useWindowDimensions hoặc Dimensions.get('window').height.
Nếu dùng Reanimated: dùng useSharedValue cho height hoặc translateY, withTiming khi click, và withSpring/withTiming khi kéo. Clamp giá trị vào [min, max].
Nếu dùng Animated: dùng Animated.Value + Animated.timing và PanResponder để cập nhật height theo cử chỉ, clamp trong [min, max].
Thêm header có drag handle và nút toggle ở góc trên phải:
- Click header hoặc click nút: toggle giữa min (10%) và max (50%).
- Vuốt: cập nhật theo delta cử chỉ; khi thả tay nếu vượt ngưỡng giữa thì snap về 50%, ngược lại về 10%.
Đặt panel overlay lên Map ở app/(tabs)/index.tsx bằng position: 'absolute', left: 0, right: 0, bottom: 0, height do animation điều khiển. Đảm bảo pointerEvents phù hợp để không chặn thao tác trên map bên ngoài panel.

Panel xuất hiện trên Map, bám đáy, bo góc trên, có bóng đổ nhẹ.
Chiều cao ban đầu là ~10% màn hình; click mở hoặc click nút toggle lập tức chuyển lên ~50% (animation ~200ms, mượt).
Vuốt kéo panel thay đổi chiều cao theo ngón tay, bị chặn trong khoảng [10%, 50%]. Thả tay, panel snap về 10% hoặc 50% theo vị trí/độ nhanh.
Nút ở góc trên phải hoạt động đúng: chuyển qua lại giữa 10% và 50%.
Tương tác map vẫn bình thường ở vùng ngoài panel; trong panel, vuốt không làm map pan.
Không crash, không warning/ lỗi TypeScript mới do thay đổi này.

File mới: components/DraggablePanel.tsx.
Sửa file: app/(tabs)/index.tsx để chèn panel overlay.
Không thay đổi các phần không liên quan.
Nếu cần cài đặt react-native-reanimated/react-native-gesture-handler, cung cấp hướng dẫn và chỉnh cấu hình cần thiết cho Expo (nhưng chỉ thực hiện nếu bắt buộc).