diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index ed2a6cfb7e..7b7fac397e 100644
--- a/src/view/shell/Drawer.tsx
+++ b/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,76 +265,98 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
-
-
- {hasSession && currentAccount ? (
-
+
+
+
+ {hasSession && currentAccount ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {hasSession ? (
+ <>
+
+
+
+
+
+
+
+
+
+ >
) : (
-
-
-
+ <>
+
+
+
+ >
)}
-
-
+
+
+
+
+
- {hasSession ? (
- <>
-
-
-
-
-
-
-
-
-
- >
- ) : (
- <>
-
-
-
- >
- )}
-
-
-
-
-
-
-
-
+
+
)
}
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 (
+ {children}
+ )
+}
+
let DrawerFooter = ({
onPressFeedback,
onPressHelp,
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index 5075f05cb5..2e0aefd0f3 100644
--- a/src/view/shell/index.tsx
+++ b/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)',