1 files changed, 30 insertions, 25 deletions
diff --git a/src/view/com/util/FAB.tsx b/src/view/com/util/FAB.tsx
index 1129f3361..007ca0ee4 100644
--- a/src/view/com/util/FAB.tsx
+++ b/src/view/com/util/FAB.tsx
@@ -1,41 +1,53 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
 import {
+  Animated,
   GestureResponderEvent,
   StyleSheet,
   TouchableWithoutFeedback,
-  View,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import {colors, gradients} from '../../lib/styles'
-import {useStores} from '../../../state'
+import {colors, gradients} from 'lib/styles'
+import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {useStores} from 'state/index'
 
 type OnPress = ((event: GestureResponderEvent) => void) | undefined
 export const FAB = observer(
-  ({icon, onPress}: {icon: IconProp; onPress: OnPress}) => {
+  ({
+    testID,
+    icon,
+    onPress,
+  }: {
+    testID?: string
+    icon: IconProp
+    onPress: OnPress
+  }) => {
     const store = useStores()
+    const interp = useAnimatedValue(0)
+    React.useEffect(() => {
+      Animated.timing(interp, {
+        toValue: store.shell.minimalShellMode ? 1 : 0,
+        duration: 100,
+        useNativeDriver: true,
+        isInteraction: false,
+      }).start()
+    }, [interp, store.shell.minimalShellMode])
+    const transform = {
+      transform: [{translateY: Animated.multiply(interp, 60)}],
+    }
     return (
-      <TouchableWithoutFeedback onPress={onPress}>
-        <View
-          style={[
-            styles.outer,
-            store.shell.minimalShellMode ? styles.lower : undefined,
-          ]}>
+      <TouchableWithoutFeedback testID={testID} onPress={onPress}>
+        <Animated.View style={[styles.outer, transform]}>
           <LinearGradient
             colors={[gradients.blueLight.start, gradients.blueLight.end]}
             start={{x: 0, y: 0}}
             end={{x: 1, y: 1}}
             style={styles.inner}>
-            <FontAwesomeIcon
-              size={24}
-              icon={icon}
-              color={colors.white}
-              style={styles.icon}
-            />
+            <FontAwesomeIcon size={24} icon={icon} color={colors.white} />
           </LinearGradient>
-        </View>
+        </Animated.View>
       </TouchableWithoutFeedback>
     )
   },
@@ -46,16 +58,10 @@ const styles = StyleSheet.create({
     position: 'absolute',
     zIndex: 1,
     right: 22,
-    bottom: 84,
+    bottom: 94,
     width: 60,
     height: 60,
     borderRadius: 30,
-    shadowColor: '#000',
-    shadowOpacity: 0.3,
-    shadowOffset: {width: 0, height: 1},
-  },
-  lower: {
-    bottom: 34,
   },
   inner: {
     width: 60,
@@ -64,5 +70,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  icon: {},
 })