1 files changed, 30 insertions, 6 deletions
diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx
index ee8e1f47a..d1675b428 100644
--- a/src/view/com/util/fab/FABInner.tsx
+++ b/src/view/com/util/fab/FABInner.tsx
@@ -1,6 +1,10 @@
 import React, {ComponentProps} from 'react'
 import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
-import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
 
@@ -9,6 +13,8 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
 import {gradients} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
+import {useHaptics} from 'lib/haptics'
+import {useHapticsDisabled} from 'state/preferences'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 
 export interface FABProps
@@ -17,15 +23,17 @@ export interface FABProps
   icon: JSX.Element
 }
 
-export function FABInner({testID, icon, ...props}: FABProps) {
+export function FABInner({testID, icon, onPress, ...props}: FABProps) {
   const insets = useSafeAreaInsets()
   const {isMobile, isTablet} = useWebMediaQueries()
   const fabMinimalShellTransform = useMinimalShellFabTransform()
   const {
-    state: pressed,
+    state: isPressed,
     onIn: onPressIn,
     onOut: onPressOut,
   } = useInteractionState()
+  const playHaptic = useHaptics()
+  const isHapticsDisabled = useHapticsDisabled()
 
   const size = isTablet ? styles.sizeLarge : styles.sizeRegular
 
@@ -33,13 +41,29 @@ export function FABInner({testID, icon, ...props}: FABProps) {
     ? {right: 50, bottom: 50}
     : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
 
-  const scale = useAnimatedStyle(() => ({
-    transform: [{scale: withTiming(pressed ? 0.95 : 1)}],
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        scale: withTiming(isPressed ? 1.1 : 1, {
+          duration: 250,
+          easing: Easing.out(Easing.quad),
+        }),
+      },
+    ],
   }))
 
   return (
     <TouchableWithoutFeedback
       testID={testID}
+      onPress={e => {
+        playHaptic()
+        setTimeout(
+          () => {
+            onPress?.(e)
+          },
+          isHapticsDisabled ? 0 : 75,
+        )
+      }}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       {...props}>
@@ -50,7 +74,7 @@ export function FABInner({testID, icon, ...props}: FABProps) {
           tabletSpacing,
           isMobile && fabMinimalShellTransform,
         ]}>
-        <Animated.View style={scale}>
+        <Animated.View style={animatedStyle}>
           <LinearGradient
             colors={[gradients.blueLight.start, gradients.blueLight.end]}
             start={{x: 0, y: 0}}