1 files changed, 45 insertions, 21 deletions
diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx
index 68f405dc4..475d165d3 100644
--- a/src/lib/hooks/useMinimalShellMode.tsx
+++ b/src/lib/hooks/useMinimalShellMode.tsx
@@ -1,36 +1,60 @@
 import React from 'react'
 import {autorun} from 'mobx'
 import {useStores} from 'state/index'
-import {Animated} from 'react-native'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
 
 export function useMinimalShellMode() {
   const store = useStores()
-  const minimalShellInterp = useAnimatedValue(0)
-  const footerMinimalShellTransform = {
-    opacity: Animated.subtract(1, minimalShellInterp),
-    transform: [{translateY: Animated.multiply(minimalShellInterp, 50)}],
-  }
+  const minimalShellInterp = useSharedValue(0)
+  const footerMinimalShellTransform = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
+      transform: [
+        {translateY: interpolate(minimalShellInterp.value, [0, 1], [0, 25])},
+      ],
+    }
+  })
+  const headerMinimalShellTransform = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
+      transform: [
+        {translateY: interpolate(minimalShellInterp.value, [0, 1], [0, -25])},
+      ],
+    }
+  })
+  const fabMinimalShellTransform = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {translateY: interpolate(minimalShellInterp.value, [0, 1], [-44, 0])},
+      ],
+    }
+  })
 
   React.useEffect(() => {
     return autorun(() => {
       if (store.shell.minimalShellMode) {
-        Animated.timing(minimalShellInterp, {
-          toValue: 1,
-          duration: 150,
-          useNativeDriver: true,
-          isInteraction: false,
-        }).start()
+        minimalShellInterp.value = withTiming(1, {
+          duration: 125,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+        })
       } else {
-        Animated.timing(minimalShellInterp, {
-          toValue: 0,
-          duration: 150,
-          useNativeDriver: true,
-          isInteraction: false,
-        }).start()
+        minimalShellInterp.value = withTiming(0, {
+          duration: 125,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+        })
       }
     })
-  }, [minimalShellInterp, store])
+  }, [minimalShellInterp, store.shell.minimalShellMode])
 
-  return {footerMinimalShellTransform}
+  return {
+    footerMinimalShellTransform,
+    headerMinimalShellTransform,
+    fabMinimalShellTransform,
+  }
 }