claude ios app-style drawer

package.json

@@ -212,6 +212,7 @@
     "react-native-qrcode-styled": "^0.3.3",
     "react-native-reanimated": "^3.19.1",
     "react-native-safe-area-context": "~5.6.0",
+    "react-native-screen-corner-radius": "^0.2.3",
     "react-native-screens": "^4.19.0",
     "react-native-svg": "15.12.1",
     "react-native-uitextview": "^1.4.0",

src/view/shell/Drawer.tsx

@@ -265,7 +265,11 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
   return (
     <View
       testID="drawer"
-      style={[a.flex_1, a.border_r, t.atoms.bg, t.atoms.border_contrast_low]}>
+      style={[
+        a.flex_1,
+        t.atoms.bg,
+        web([a.border_r, t.atoms.border_contrast_low]),
+      ]}>
       <ScrollView
         style={[a.flex_1]}
         contentContainerStyle={[

src/view/shell/index.tsx

@@ -4,8 +4,10 @@ import {Drawer} from 'react-native-drawer-layout'
 import {SystemBars} from 'react-native-edge-to-edge'
 import {Gesture} from 'react-native-gesture-handler'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {ScreenCornerRadius} from 'react-native-screen-corner-radius'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
+import {useHaptics} from '#/lib/haptics'
 import {useDedupe} from '#/lib/hooks/useDedupe'
 import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
 import {useNotificationsHandler} from '#/lib/hooks/useNotificationHandler'
@@ -136,6 +138,7 @@ function ShellInner() {
 
 function DrawerLayout({children}: {children: React.ReactNode}) {
   const t = useTheme()
+  const playHaptic = useHaptics()
   const isDrawerOpen = useIsDrawerOpen()
   const setIsDrawerOpen = useSetDrawerOpen()
   const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
@@ -191,8 +194,11 @@ function DrawerLayout({children}: {children: React.ReactNode}) {
       swipeEdgeWidth={winDim.width}
       swipeMinVelocity={100}
       swipeMinDistance={10}
-      drawerType={IS_IOS ? 'slide' : 'front'}
+      drawerType="back"
+      onGestureEnd={() => playHaptic('light')}
       overlayStyle={{
+        overflow: 'hidden',
+        borderRadius: ScreenCornerRadius,
         backgroundColor: select(t.name, {
           light: 'rgba(0, 57, 117, 0.1)',
           dark: IS_ANDROID

yarn.lock

@@ -17403,6 +17403,11 @@ react-native-safe-area-context@~5.6.0:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-5.6.1.tgz#cb4d249ef1a6f7e8fd0cfdfa9764838dffda26b6"
   integrity sha512-/wJE58HLEAkATzhhX1xSr+fostLsK8Q97EfpfMDKo8jlOc1QKESSX/FQrhk7HhQH/2uSaox4Y86sNaI02kteiA==
 
+react-native-screen-corner-radius@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/react-native-screen-corner-radius/-/react-native-screen-corner-radius-0.2.3.tgz#e4568d0d2d4ebfe103e2026e6dfe2da4fb3a7a03"
+  integrity sha512-8JgiHI/S2Xf6swquEjopHW//wI4a/nV/dEImJMR8YXQVWVdnjbhcMi0NGk1s1cW8xuunwlFT173PozsS3Gvgxg==
+
 react-native-screens@^4.19.0:
   version "4.19.0"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-4.19.0.tgz#d00f2ec070d7426204eaf34ef6c64396a6871e1d"