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

1 files changed, 30 insertions, 29 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,