2 files changed, 44 insertions, 15 deletions

diff --git a/src/view/com/util/MainScrollProvider.tsx b/src/view/com/util/MainScrollProvider.tsx
index b602da432..3163d8544 100644
--- a/src/view/com/util/MainScrollProvider.tsx
+++ b/src/view/com/util/MainScrollProvider.tsx
@@ -4,11 +4,13 @@ import {
   cancelAnimation,
   interpolate,
   useSharedValue,
+  withSpring,
 } from 'react-native-reanimated'
 import EventEmitter from 'eventemitter3'
 
 import {ScrollProvider} from '#/lib/ScrollContext'
-import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell'
+import {useGate} from '#/lib/statsig/statsig'
+import {useMinimalShellMode} from '#/state/shell'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {isNative, isWeb} from 'platform/detection'
 
@@ -21,11 +23,29 @@ function clamp(num: number, min: number, max: number) {
 
 export function MainScrollProvider({children}: {children: React.ReactNode}) {
   const {headerHeight} = useShellLayout()
-  const mode = useMinimalShellMode()
-  const setMode = useSetMinimalShellMode()
+  const {headerMode, footerMode} = useMinimalShellMode()
   const startDragOffset = useSharedValue<number | null>(null)
   const startMode = useSharedValue<number | null>(null)
   const didJustRestoreScroll = useSharedValue<boolean>(false)
+  const gate = useGate()
+  const isFixedBottomBar = gate('fixed_bottom_bar')
+
+  const setMode = React.useCallback(
+    (v: boolean) => {
+      'worklet'
+      cancelAnimation(headerMode)
+      headerMode.value = withSpring(v ? 1 : 0, {
+        overshootClamping: true,
+      })
+      if (!isFixedBottomBar) {
+        cancelAnimation(footerMode)
+        footerMode.value = withSpring(v ? 1 : 0, {
+          overshootClamping: true,
+        })
+      }
+    },
+    [headerMode, footerMode, isFixedBottomBar],
+  )
 
   useEffect(() => {
     if (isWeb) {
@@ -55,11 +75,11 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
           setMode(true)
         } else {
           // Snap to whichever state is the closest.
-          setMode(Math.round(mode.value) === 1)
+          setMode(Math.round(headerMode.value) === 1)
         }
       }
     },
-    [startDragOffset, startMode, setMode, mode, headerHeight],
+    [startDragOffset, startMode, setMode, headerMode, headerHeight],
   )
 
   const onBeginDrag = useCallback(
@@ -67,10 +87,10 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
       'worklet'
       if (isNative) {
         startDragOffset.value = e.contentOffset.y
-        startMode.value = mode.value
+        startMode.value = headerMode.value
       }
     },
-    [mode, startDragOffset, startMode],
+    [headerMode, startDragOffset, startMode],
   )
 
   const onEndDrag = useCallback(
@@ -102,7 +122,10 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
       'worklet'
       if (isNative) {
         if (startDragOffset.value === null || startMode.value === null) {
-          if (mode.value !== 0 && e.contentOffset.y < headerHeight.value) {
+          if (
+            headerMode.value !== 0 &&
+            e.contentOffset.y < headerHeight.value
+          ) {
             // If we're close enough to the top, always show the shell.
             // Even if we're not dragging.
             setMode(false)
@@ -119,11 +142,15 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
           [-1, 1],
         )
         const newValue = clamp(startMode.value + dProgress, 0, 1)
-        if (newValue !== mode.value) {
+        if (newValue !== headerMode.value) {
           // Manually adjust the value. This won't be (and shouldn't be) animated.
           // Cancel any any existing animation
-          cancelAnimation(mode)
-          mode.value = newValue
+          cancelAnimation(headerMode)
+          headerMode.value = newValue
+          if (!isFixedBottomBar) {
+            cancelAnimation(footerMode)
+            footerMode.value = newValue
+          }
         }
       } else {
         if (didJustRestoreScroll.value) {
@@ -145,11 +172,13 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
     },
     [
       headerHeight,
-      mode,
+      headerMode,
+      footerMode,
       setMode,
       startDragOffset,
       startMode,
       didJustRestoreScroll,
+      isFixedBottomBar,
     ],
   )
 
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 9a47007c4..af424428d 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -167,7 +167,7 @@ function HomeScreenReady({
     }),
   )
 
-  const mode = useMinimalShellMode()
+  const {footerMode} = useMinimalShellMode()
   const {isMobile} = useWebMediaQueries()
   useFocusEffect(
     React.useCallback(() => {
@@ -177,7 +177,7 @@ function HomeScreenReady({
       }
       const listener = AppState.addEventListener('change', nextAppState => {
         if (nextAppState === 'active') {
-          if (isMobile && mode.value === 1) {
+          if (isMobile && footerMode.value === 1) {
             // Reveal the bottom bar so you don't miss notifications or messages.
             // TODO: Experiment with only doing it when unread > 0.
             setMinimalShellMode(false)
@@ -187,7 +187,7 @@ function HomeScreenReady({
       return () => {
         listener.remove()
       }
-    }, [setMinimalShellMode, mode, isMobile, gate]),
+    }, [setMinimalShellMode, footerMode, isMobile, gate]),
   )
 
   const onPageSelected = React.useCallback(