UI updates to the floating action button (#201)

* Update FAB to use a plus icon and not drop shadow

* Update FAB positioning to be more consistent in different shell modes

* Animate the FAB's repositioning

src/view/com/util/FAB.tsx

@@ -1,15 +1,16 @@
 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 {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
 import {useStores} from '../../../state'
 
 type OnPress = ((event: GestureResponderEvent) => void) | undefined
@@ -19,31 +20,34 @@ export const FAB = observer(
     icon,
     onPress,
   }: {
-    testID: string
+    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 testID={testID} onPress={onPress}>
-        <View
+        <Animated.View style={[styles.outer, transform]}>
-          style={[
-            styles.outer,
-            store.shell.minimalShellMode ? styles.lower : undefined,
-          ]}>
           <LinearGradient
             colors={[gradients.blueLight.start, gradients.blueLight.end]}
             start={{x: 0, y: 0}}
             end={{x: 1, y: 1}}
             style={styles.inner}>
-            <FontAwesomeIcon
+            <FontAwesomeIcon size={24} icon={icon} color={colors.white} />
-              size={24}
-              icon={icon}
-              color={colors.white}
-              style={styles.icon}
-            />
           </LinearGradient>
-        </View>
+        </Animated.View>
       </TouchableWithoutFeedback>
     )
   },
@@ -54,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,
@@ -72,5 +70,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  icon: {},
 })

src/view/screens/Home.tsx

@@ -125,7 +125,7 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
       ) : undefined}
       <FAB
         testID="composeFAB"
-        icon="pen-nib"
+        icon="plus"
         onPress={() => onPressCompose(false)}
       />
     </View>

src/view/screens/Profile.tsx

@@ -190,7 +190,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
       ) : (
         renderHeader()
       )}
-      <FAB icon="pen-nib" onPress={onPressCompose} />
+      <FAB icon="plus" onPress={onPressCompose} />
     </View>
   )
 })