1 files changed, 18 insertions, 35 deletions
diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx
index ada934a26..e81fc434f 100644
--- a/src/lib/hooks/useMinimalShellMode.tsx
+++ b/src/lib/hooks/useMinimalShellMode.tsx
@@ -1,60 +1,43 @@
-import React from 'react'
-import {autorun} from 'mobx'
-import {
-  Easing,
-  interpolate,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated'
-
+import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
 import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
+import {useShellLayout} from '#/state/shell/shell-layout'
 
 export function useMinimalShellMode() {
-  const minimalShellMode = useMinimalShellModeState()
-  const minimalShellInterp = useSharedValue(0)
+  const mode = useMinimalShellModeState()
+  const {footerHeight, headerHeight} = useShellLayout()
+
   const footerMinimalShellTransform = useAnimatedStyle(() => {
     return {
-      opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
+      pointerEvents: mode.value === 0 ? 'auto' : 'none',
+      opacity: Math.pow(1 - mode.value, 2),
       transform: [
-        {translateY: interpolate(minimalShellInterp.value, [0, 1], [0, 25])},
+        {
+          translateY: interpolate(mode.value, [0, 1], [0, footerHeight.value]),
+        },
       ],
     }
   })
   const headerMinimalShellTransform = useAnimatedStyle(() => {
     return {
-      opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
+      pointerEvents: mode.value === 0 ? 'auto' : 'none',
+      opacity: Math.pow(1 - mode.value, 2),
       transform: [
-        {translateY: interpolate(minimalShellInterp.value, [0, 1], [0, -25])},
+        {
+          translateY: interpolate(mode.value, [0, 1], [0, -headerHeight.value]),
+        },
       ],
     }
   })
   const fabMinimalShellTransform = useAnimatedStyle(() => {
     return {
       transform: [
-        {translateY: interpolate(minimalShellInterp.value, [0, 1], [-44, 0])},
+        {
+          translateY: interpolate(mode.value, [0, 1], [-44, 0]),
+        },
       ],
     }
   })
-
-  React.useEffect(() => {
-    return autorun(() => {
-      if (minimalShellMode) {
-        minimalShellInterp.value = withTiming(1, {
-          duration: 125,
-          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-        })
-      } else {
-        minimalShellInterp.value = withTiming(0, {
-          duration: 125,
-          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-        })
-      }
-    })
-  }, [minimalShellInterp, minimalShellMode])
-
   return {
-    minimalShellMode,
     footerMinimalShellTransform,
     headerMinimalShellTransform,
     fabMinimalShellTransform,