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(() => {
-    return isTablet
     ? {right: 50, bottom: 50}
-      : {
+    : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
-          right: 24,
+
-          bottom: clamp(insets.bottom, 15, 60) + 15,
+  const scale = useAnimatedStyle(() => ({
-        }
+    transform: [{scale: withTiming(pressed ? 0.95 : 1)}],
-  }, [insets.bottom, isTablet])
+  }))
 
   return (
-    <TouchableWithoutFeedback testID={testID} {...props}>
+    <TouchableWithoutFeedback
+      testID={testID}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      {...props}>
       <Animated.View
         style={[
           styles.outer,
@@ -42,6 +50,7 @@ export function FABInner({testID, icon, ...props}: FABProps) {
           tabletSpacing,
           isMobile && fabMinimalShellTransform,
         ]}>
+        <Animated.View style={scale}>
           <LinearGradient
             colors={[gradients.blueLight.start, gradients.blueLight.end]}
             start={{x: 0, y: 0}}
@@ -50,6 +59,7 @@ export function FABInner({testID, icon, ...props}: FABProps) {
             {icon}
           </LinearGradient>
         </Animated.View>
+      </Animated.View>
     </TouchableWithoutFeedback>
   )
 }