scale down FAB on press (#4259)

src/view/com/util/fab/FABInner.tsx

@@ -1,6 +1,6 @@
 import React, {ComponentProps} from 'react'
 import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
-import Animated from 'react-native-reanimated'
+import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
 
@@ -9,6 +9,7 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {clamp} from 'lib/numbers'
 import {gradients} from 'lib/styles'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
 
 export interface FABProps
   extends ComponentProps<typeof TouchableWithoutFeedback> {
@@ -20,21 +21,28 @@ export function FABInner({testID, icon, ...props}: FABProps) {
   const insets = useSafeAreaInsets()
   const {isMobile, isTablet} = useWebMediaQueries()
   const {fabMinimalShellTransform} = useMinimalShellMode()
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
 
-  const size = React.useMemo(() => {
+  const size = isTablet ? styles.sizeLarge : styles.sizeRegular
-    return isTablet ? styles.sizeLarge : styles.sizeRegular
+
-  }, [isTablet])
+  const tabletSpacing = isTablet
-  const tabletSpacing = React.useMemo(() => {
+    ? {right: 50, bottom: 50}
-    return isTablet
+    : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
-      ? {right: 50, bottom: 50}
+
-      : {
+  const scale = useAnimatedStyle(() => ({
-          right: 24,
+    transform: [{scale: withTiming(pressed ? 0.95 : 1)}],
-          bottom: clamp(insets.bottom, 15, 60) + 15,
+  }))
-        }
-  }, [insets.bottom, isTablet])
 
   return (
-    <TouchableWithoutFeedback testID={testID} {...props}>
+    <TouchableWithoutFeedback
+      testID={testID}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      {...props}>
       <Animated.View
         style={[
           styles.outer,
@@ -42,13 +50,15 @@ export function FABInner({testID, icon, ...props}: FABProps) {
           tabletSpacing,
           isMobile && fabMinimalShellTransform,
         ]}>
-        <LinearGradient
+        <Animated.View style={scale}>
-          colors={[gradients.blueLight.start, gradients.blueLight.end]}
+          <LinearGradient
-          start={{x: 0, y: 0}}
+            colors={[gradients.blueLight.start, gradients.blueLight.end]}
-          end={{x: 1, y: 1}}
+            start={{x: 0, y: 0}}
-          style={[styles.inner, size]}>
+            end={{x: 1, y: 1}}
-          {icon}
+            style={[styles.inner, size]}>
-        </LinearGradient>
+            {icon}
+          </LinearGradient>
+        </Animated.View>
       </Animated.View>
     </TouchableWithoutFeedback>
   )