experiment with different drawer style

src/view/shell/Drawer.tsx

@@ -1,5 +1,7 @@
 import React, {type ComponentProps, type JSX} from 'react'
 import {Linking, ScrollView, TouchableOpacity, View} from 'react-native'
+import {useDrawerProgress} from 'react-native-drawer-layout'
+import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Plural, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -13,7 +15,7 @@ import {getTabState, TabState} from '#/lib/routes/helpers'
 import {type NavigationProp} from '#/lib/routes/types'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {colors} from '#/lib/styles'
-import {isWeb} from '#/platform/detection'
+import {isIOS, isWeb} from '#/platform/detection'
 import {emitSoftReset} from '#/state/events'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
@@ -263,8 +265,10 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
     <View
       testID="drawer"
       style={[a.flex_1, a.border_r, t.atoms.bg, t.atoms.border_contrast_low]}>
+      <AnimatedDrawerContent>
         <ScrollView
           style={[a.flex_1]}
+          showsVerticalScrollIndicator={false}
           contentContainerStyle={[
             {
               paddingTop: Math.max(
@@ -327,12 +331,32 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
           onPressFeedback={onPressFeedback}
           onPressHelp={onPressHelp}
         />
+      </AnimatedDrawerContent>
     </View>
   )
 }
 DrawerContent = React.memo(DrawerContent)
 export {DrawerContent}
 
+const AnimatedDrawerContent = isIOS ? DrawerProgressAnimation : View
+
+function DrawerProgressAnimation({children}: {children: React.ReactNode}) {
+  const drawerProgress = useDrawerProgress()
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const progress = drawerProgress.get()
+
+    return {
+      opacity: progress,
+      transform: [{scale: interpolate(progress, [0, 1], [0.9, 1])}],
+    }
+  })
+
+  return (
+    <Animated.View style={[a.flex_1, animatedStyle]}>{children}</Animated.View>
+  )
+}
+
 let DrawerFooter = ({
   onPressFeedback,
   onPressHelp,

src/view/shell/index.tsx

@@ -178,7 +178,7 @@ function DrawerLayout({children}: {children: React.ReactNode}) {
       swipeEdgeWidth={winDim.width}
       swipeMinVelocity={100}
       swipeMinDistance={10}
-      drawerType={isIOS ? 'slide' : 'front'}
+      drawerType={isIOS ? 'back' : 'front'}
       overlayStyle={{
         backgroundColor: select(t.name, {
           light: 'rgba(0, 57, 117, 0.1)',