From b688da8d5860569108a7f487dc97c5f0b403aee1 Mon Sep 17 00:00:00 2001
From: Francesco Lodovici <2643961+frncs-eu@users.noreply.github.com>
Date: Mon, 10 Jun 2024 17:19:28 +0200
Subject: 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>
---
 src/lib/hooks/useMinimalShellMode.tsx     | 45 ------------------------
 src/lib/hooks/useMinimalShellTransform.ts | 58 +++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 45 deletions(-)
 delete mode 100644 src/lib/hooks/useMinimalShellMode.tsx
 create mode 100644 src/lib/hooks/useMinimalShellTransform.ts

(limited to 'src/lib/hooks')

diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx
deleted file mode 100644
index e81fc434f..000000000
--- a/src/lib/hooks/useMinimalShellMode.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
-import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
-import {useShellLayout} from '#/state/shell/shell-layout'
-
-export function useMinimalShellMode() {
-  const mode = useMinimalShellModeState()
-  const {footerHeight, headerHeight} = useShellLayout()
-
-  const footerMinimalShellTransform = 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]),
-        },
-      ],
-    }
-  })
-  const headerMinimalShellTransform = 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]),
-        },
-      ],
-    }
-  })
-  const fabMinimalShellTransform = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          translateY: interpolate(mode.value, [0, 1], [-44, 0]),
-        },
-      ],
-    }
-  })
-  return {
-    footerMinimalShellTransform,
-    headerMinimalShellTransform,
-    fabMinimalShellTransform,
-  }
-}
diff --git a/src/lib/hooks/useMinimalShellTransform.ts b/src/lib/hooks/useMinimalShellTransform.ts
new file mode 100644
index 000000000..9875840d6
--- /dev/null
+++ b/src/lib/hooks/useMinimalShellTransform.ts
@@ -0,0 +1,58 @@
+import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
+
+import {useMinimalShellMode} from '#/state/shell/minimal-mode'
+import {useShellLayout} from '#/state/shell/shell-layout'
+
+// Keep these separated so that we only pay for useAnimatedStyle that gets used.
+
+export function useMinimalShellHeaderTransform() {
+  const mode = useMinimalShellMode()
+  const {headerHeight} = useShellLayout()
+
+  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, -headerHeight.value]),
+        },
+      ],
+    }
+  })
+
+  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, footerHeight.value]),
+        },
+      ],
+    }
+  })
+  return footerTransform
+}
+
+export function useMinimalShellFabTransform() {
+  const mode = useMinimalShellMode()
+
+  const fabTransform = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(mode.value, [0, 1], [-44, 0]),
+        },
+      ],
+    }
+  })
+  return fabTransform
+}
-- 
cgit 1.4.1