about summary refs log tree commit diff
path: root/src/lib/hooks/useMinimalShellTransform.ts
diff options
context:
space:
mode:
authordan <dan.abramov@gmail.com>2024-11-17 15:06:28 +0000
committerGitHub <noreply@github.com>2024-11-17 15:06:28 +0000
commit474c4eff29b6a2454a20febf78a1edd5cf58663a (patch)
tree43a189a8101cf3f5265d967ad46182cf8cbde9a0 /src/lib/hooks/useMinimalShellTransform.ts
parentd575a2fdaaa4d9c93d6b739dfe3377cdd5985dc1 (diff)
downloadvoidsky-474c4eff29b6a2454a20febf78a1edd5cf58663a.tar.zst
Use compiler-safe Reanimated get/set APIs (#6391)
* Convert lightbox to get/set

* Work around software-mansion/react-native-reanimated#6613

* Use get/set in more places

* Port MainScrollProvider to get/set

* Port more to get/set

* Port composer to get/set

* Remove unnecessary thread hops in composer

* Port more things to get/set

* Convert more to get/set, remove redundant runOnJS

* Convert remaining cases to get/set
Diffstat (limited to 'src/lib/hooks/useMinimalShellTransform.ts')
-rw-r--r--src/lib/hooks/useMinimalShellTransform.ts20
1 files changed, 11 insertions, 9 deletions
diff --git a/src/lib/hooks/useMinimalShellTransform.ts b/src/lib/hooks/useMinimalShellTransform.ts
index 678776755..6f16fa0f9 100644
--- a/src/lib/hooks/useMinimalShellTransform.ts
+++ b/src/lib/hooks/useMinimalShellTransform.ts
@@ -10,15 +10,16 @@ export function useMinimalShellHeaderTransform() {
   const {headerHeight} = useShellLayout()
 
   const headerTransform = useAnimatedStyle(() => {
+    const headerModeValue = headerMode.get()
     return {
-      pointerEvents: headerMode.value === 0 ? 'auto' : 'none',
-      opacity: Math.pow(1 - headerMode.value, 2),
+      pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
+      opacity: Math.pow(1 - headerModeValue, 2),
       transform: [
         {
           translateY: interpolate(
-            headerMode.value,
+            headerModeValue,
             [0, 1],
-            [0, -headerHeight.value],
+            [0, -headerHeight.get()],
           ),
         },
       ],
@@ -33,15 +34,16 @@ export function useMinimalShellFooterTransform() {
   const {footerHeight} = useShellLayout()
 
   const footerTransform = useAnimatedStyle(() => {
+    const footerModeValue = footerMode.get()
     return {
-      pointerEvents: footerMode.value === 0 ? 'auto' : 'none',
-      opacity: Math.pow(1 - footerMode.value, 2),
+      pointerEvents: footerModeValue === 0 ? 'auto' : 'none',
+      opacity: Math.pow(1 - footerModeValue, 2),
       transform: [
         {
           translateY: interpolate(
-            footerMode.value,
+            footerModeValue,
             [0, 1],
-            [0, footerHeight.value],
+            [0, footerHeight.get()],
           ),
         },
       ],
@@ -58,7 +60,7 @@ export function useMinimalShellFabTransform() {
     return {
       transform: [
         {
-          translateY: interpolate(footerMode.value, [0, 1], [-44, 0]),
+          translateY: interpolate(footerMode.get(), [0, 1], [-44, 0]),
         },
       ],
     }