Hide/show header and footer without re-renders, take two (#1849)

* Remove callsites using the state value

* Remove unused code

* Change shell mode without re-renders

* Adjust "write your reply" for mode

2 files changed, 35 insertions, 31 deletions

diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx
index ada934a26..4738b8e2c 100644
--- a/src/lib/hooks/useMinimalShellMode.tsx
+++ b/src/lib/hooks/useMinimalShellMode.tsx
@@ -1,60 +1,61 @@
-import React from 'react'
-import {autorun} from 'mobx'
 import {
-  Easing,
+  AnimatableValue,
   interpolate,
   useAnimatedStyle,
-  useSharedValue,
   withTiming,
+  Easing,
 } 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),
+  })
+}
+
 export function useMinimalShellMode() {
-  const minimalShellMode = useMinimalShellModeState()
-  const minimalShellInterp = useSharedValue(0)
+  const mode = useMinimalShellModeState()
   const footerMinimalShellTransform = useAnimatedStyle(() => {
     return {
-      opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
+      pointerEvents: mode.value ? 'none' : 'auto',
+      opacity: withShellTiming(interpolate(mode.value ? 1 : 0, [0, 1], [1, 0])),
       transform: [
-        {translateY: interpolate(minimalShellInterp.value, [0, 1], [0, 25])},
+        {
+          translateY: withShellTiming(
+            interpolate(mode.value ? 1 : 0, [0, 1], [0, 25]),
+          ),
+        },
       ],
     }
   })
   const headerMinimalShellTransform = useAnimatedStyle(() => {
     return {
-      opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
+      pointerEvents: mode.value ? 'none' : 'auto',
+      opacity: withShellTiming(interpolate(mode.value ? 1 : 0, [0, 1], [1, 0])),
       transform: [
-        {translateY: interpolate(minimalShellInterp.value, [0, 1], [0, -25])},
+        {
+          translateY: withShellTiming(
+            interpolate(mode.value ? 1 : 0, [0, 1], [0, -25]),
+          ),
+        },
       ],
     }
   })
   const fabMinimalShellTransform = useAnimatedStyle(() => {
     return {
       transform: [
-        {translateY: interpolate(minimalShellInterp.value, [0, 1], [-44, 0])},
+        {
+          translateY: withShellTiming(
+            interpolate(mode.value ? 1 : 0, [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,
diff --git a/src/lib/hooks/useOnMainScroll.ts b/src/lib/hooks/useOnMainScroll.ts
index 2eab4b250..a213d5317 100644
--- a/src/lib/hooks/useOnMainScroll.ts
+++ b/src/lib/hooks/useOnMainScroll.ts
@@ -33,9 +33,12 @@ export function useOnMainScroll(): [OnScrollCb, boolean, ResetCb] {
         const dy = y - (lastY.current || 0)
         lastY.current = y
 
-        if (!minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
+        if (!minimalShellMode.value && dy > dyLimitDown && y > Y_LIMIT) {
           setMinimalShellMode(true)
-        } else if (minimalShellMode && (dy < dyLimitUp * -1 || y <= Y_LIMIT)) {
+        } else if (
+          minimalShellMode.value &&
+          (dy < dyLimitUp * -1 || y <= Y_LIMIT)
+        ) {
           setMinimalShellMode(false)
         }