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/state/shell/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {Provider as ShellLayoutProvder} from './shell-layout'
 import {Provider as DrawerOpenProvider} from './drawer-open'
 import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled'
 import {Provider as MinimalModeProvider} from './minimal-mode'
@@ -16,14 +17,16 @@ export {useOnboardingState, useOnboardingDispatch} from './onboarding'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
-    <DrawerOpenProvider>
-      <DrawerSwipableProvider>
-        <MinimalModeProvider>
-          <ColorModeProvider>
-            <OnboardingProvider>{children}</OnboardingProvider>
-          </ColorModeProvider>
-        </MinimalModeProvider>
-      </DrawerSwipableProvider>
-    </DrawerOpenProvider>
+    <ShellLayoutProvder>
+      <DrawerOpenProvider>
+        <DrawerSwipableProvider>
+          <MinimalModeProvider>
+            <ColorModeProvider>
+              <OnboardingProvider>{children}</OnboardingProvider>
+            </ColorModeProvider>
+          </MinimalModeProvider>
+        </DrawerSwipableProvider>
+      </DrawerOpenProvider>
+    </ShellLayoutProvder>
   )
 }

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],
   )

src/state/shell/shell-layout.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import {SharedValue, useSharedValue} from 'react-native-reanimated'
+
+type StateContext = {
+  headerHeight: SharedValue<number>
+  footerHeight: SharedValue<number>
+}
+
+const stateContext = React.createContext<StateContext>({
+  headerHeight: {
+    value: 0,
+    addListener() {},
+    removeListener() {},
+    modify() {},
+  },
+  footerHeight: {
+    value: 0,
+    addListener() {},
+    removeListener() {},
+    modify() {},
+  },
+})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const headerHeight = useSharedValue(0)
+  const footerHeight = useSharedValue(0)
+
+  const value = React.useMemo(
+    () => ({
+      headerHeight,
+      footerHeight,
+    }),
+    [headerHeight, footerHeight],
+  )
+
+  return <stateContext.Provider value={value}>{children}</stateContext.Provider>
+}
+
+export function useShellLayout() {
+  return React.useContext(stateContext)
+}