From 7a55ca613347680cd94add01faa5dc3f216b9bd2 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Thu, 9 Nov 2023 20:15:05 +0000
Subject: Sync top/bottom bar disappearance to the scroll (#1855)

* Disable existing code that toggles shell

* Make shell mode a float

* Translate based on the gesture

* Track header and footer heights

* Add web support

* Fix types and cleanup

* Add back isScrolled logic

* Add comments
---
 src/lib/hooks/useMinimalShellMode.tsx | 40 ++++++++++-------------------------
 1 file changed, 11 insertions(+), 29 deletions(-)

(limited to 'src/lib/hooks/useMinimalShellMode.tsx')

diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx
index 4738b8e2c..e81fc434f 100644
--- a/src/lib/hooks/useMinimalShellMode.tsx
+++ b/src/lib/hooks/useMinimalShellMode.tsx
@@ -1,45 +1,29 @@
-import {
-  AnimatableValue,
-  interpolate,
-  useAnimatedStyle,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated'
-
+import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
 import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
-
-function withShellTiming<T extends AnimatableValue>(value: T): T {
-  'worklet'
-  return withTiming(value, {
-    duration: 125,
-    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-  })
-}
+import {useShellLayout} from '#/state/shell/shell-layout'
 
 export function useMinimalShellMode() {
   const mode = useMinimalShellModeState()
+  const {footerHeight, headerHeight} = useShellLayout()
+
   const footerMinimalShellTransform = useAnimatedStyle(() => {
     return {
-      pointerEvents: mode.value ? 'none' : 'auto',
-      opacity: withShellTiming(interpolate(mode.value ? 1 : 0, [0, 1], [1, 0])),
+      pointerEvents: mode.value === 0 ? 'auto' : 'none',
+      opacity: Math.pow(1 - mode.value, 2),
       transform: [
         {
-          translateY: withShellTiming(
-            interpolate(mode.value ? 1 : 0, [0, 1], [0, 25]),
-          ),
+          translateY: interpolate(mode.value, [0, 1], [0, footerHeight.value]),
         },
       ],
     }
   })
   const headerMinimalShellTransform = useAnimatedStyle(() => {
     return {
-      pointerEvents: mode.value ? 'none' : 'auto',
-      opacity: withShellTiming(interpolate(mode.value ? 1 : 0, [0, 1], [1, 0])),
+      pointerEvents: mode.value === 0 ? 'auto' : 'none',
+      opacity: Math.pow(1 - mode.value, 2),
       transform: [
         {
-          translateY: withShellTiming(
-            interpolate(mode.value ? 1 : 0, [0, 1], [0, -25]),
-          ),
+          translateY: interpolate(mode.value, [0, 1], [0, -headerHeight.value]),
         },
       ],
     }
@@ -48,9 +32,7 @@ export function useMinimalShellMode() {
     return {
       transform: [
         {
-          translateY: withShellTiming(
-            interpolate(mode.value ? 1 : 0, [0, 1], [-44, 0]),
-          ),
+          translateY: interpolate(mode.value, [0, 1], [-44, 0]),
         },
       ],
     }
-- 
cgit 1.4.1

