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

1 files changed, 14 insertions, 5 deletions

diff --git a/src/state/shell/minimal-mode.tsx b/src/state/shell/minimal-mode.tsx
index b506c21db..2c2f60b52 100644
--- a/src/state/shell/minimal-mode.tsx
+++ b/src/state/shell/minimal-mode.tsx
@@ -1,11 +1,16 @@
 import React from 'react'
-import {useSharedValue, SharedValue} from 'react-native-reanimated'
+import {
+  Easing,
+  SharedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
 
-type StateContext = SharedValue<boolean>
+type StateContext = SharedValue<number>
 type SetContext = (v: boolean) => void
 
 const stateContext = React.createContext<StateContext>({
-  value: false,
+  value: 0,
   addListener() {},
   removeListener() {},
   modify() {},
@@ -13,10 +18,14 @@ const stateContext = React.createContext<StateContext>({
 const setContext = React.createContext<SetContext>((_: boolean) => {})
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const mode = useSharedValue(false)
+  const mode = useSharedValue(0)
   const setMode = React.useCallback(
     (v: boolean) => {
-      mode.value = v
+      'worklet'
+      mode.value = withTiming(v ? 1 : 0, {
+        duration: 400,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+      })
     },
     [mode],
   )