Fix (#4430): Use separate hooks for shell mode animated styles (#4451)

* Fix (#4430): Use separate hooks for shell mode animated styles

* Consolidate in one file

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 27 insertions, 14 deletions

diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellTransform.ts
index e81fc434f..9875840d6 100644
--- a/src/lib/hooks/useMinimalShellMode.tsx
+++ b/src/lib/hooks/useMinimalShellTransform.ts
@@ -1,34 +1,51 @@
 import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
-import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
+
+import {useMinimalShellMode} from '#/state/shell/minimal-mode'
 import {useShellLayout} from '#/state/shell/shell-layout'
 
-export function useMinimalShellMode() {
-  const mode = useMinimalShellModeState()
-  const {footerHeight, headerHeight} = useShellLayout()
+// Keep these separated so that we only pay for useAnimatedStyle that gets used.
+
+export function useMinimalShellHeaderTransform() {
+  const mode = useMinimalShellMode()
+  const {headerHeight} = useShellLayout()
 
-  const footerMinimalShellTransform = useAnimatedStyle(() => {
+  const headerTransform = useAnimatedStyle(() => {
     return {
       pointerEvents: mode.value === 0 ? 'auto' : 'none',
       opacity: Math.pow(1 - mode.value, 2),
       transform: [
         {
-          translateY: interpolate(mode.value, [0, 1], [0, footerHeight.value]),
+          translateY: interpolate(mode.value, [0, 1], [0, -headerHeight.value]),
         },
       ],
     }
   })
-  const headerMinimalShellTransform = useAnimatedStyle(() => {
+
+  return headerTransform
+}
+
+export function useMinimalShellFooterTransform() {
+  const mode = useMinimalShellMode()
+  const {footerHeight} = useShellLayout()
+
+  const footerTransform = useAnimatedStyle(() => {
     return {
       pointerEvents: mode.value === 0 ? 'auto' : 'none',
       opacity: Math.pow(1 - mode.value, 2),
       transform: [
         {
-          translateY: interpolate(mode.value, [0, 1], [0, -headerHeight.value]),
+          translateY: interpolate(mode.value, [0, 1], [0, footerHeight.value]),
         },
       ],
     }
   })
-  const fabMinimalShellTransform = useAnimatedStyle(() => {
+  return footerTransform
+}
+
+export function useMinimalShellFabTransform() {
+  const mode = useMinimalShellMode()
+
+  const fabTransform = useAnimatedStyle(() => {
     return {
       transform: [
         {
@@ -37,9 +54,5 @@ export function useMinimalShellMode() {
       ],
     }
   })
-  return {
-    footerMinimalShellTransform,
-    headerMinimalShellTransform,
-    fabMinimalShellTransform,
-  }
+  return fabTransform
 }