From d07070f81a33b68c2a99737a3e905e679f64d7fc Mon Sep 17 00:00:00 2001
From: os-zhuang <jack@objectstack.ai>
Date: Thu, 11 Jun 2026 20:17:00 +0500
Subject: [PATCH] feat(ux): spring-rise BottomSheet with fade backdrop

Replace the flat OS slide (animationType="slide") with a fade-crossed
backdrop plus a reanimated spring rise on the panel, so sort/action
sheets, quick-create, and the AI sheet arrive with the soft physical
motion top-tier sheets use. Shared BottomSheet, so every sheet benefits.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 components/ui/BottomSheet.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/ui/BottomSheet.tsx b/components/ui/BottomSheet.tsx
index 815b53d..b8f87ba 100644
--- a/components/ui/BottomSheet.tsx
+++ b/components/ui/BottomSheet.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Modal, Pressable, Text, View } from "react-native";
+import Animated, { SlideInDown } from "react-native-reanimated";
 import { useTranslation } from "react-i18next";
 import { cn } from "~/lib/utils";
 
@@ -20,10 +21,14 @@ export function BottomSheet({
 }: BottomSheetProps) {
   const { t } = useTranslation();
   return (
+    // animationType="fade" cross-fades the dimmed backdrop on open/close; the
+    // panel additionally springs up from the bottom via reanimated, so it
+    // arrives with the soft physical rise top-tier sheets use rather than a
+    // flat OS slide.
     <Modal
       visible={open}
       transparent
-      animationType="slide"
+      animationType="fade"
       onRequestClose={() => onOpenChange(false)}
     >
       <Pressable
@@ -33,7 +38,8 @@ export function BottomSheet({
         onPress={() => onOpenChange(false)}
       />
 
-      <View
+      <Animated.View
+        entering={SlideInDown.springify().damping(22).stiffness(220).mass(0.6)}
         className={cn(
           "rounded-t-2xl border-t border-border bg-background pb-8 px-6 pt-4",
           className
@@ -48,7 +54,7 @@ export function BottomSheet({
         ) : null}
 
         {children}
-      </View>
+      </Animated.View>
     </Modal>
   );
 }