invert the fab animation, play a haptic (#4309)

2 files changed, 44 insertions, 16 deletions

diff --git a/src/lib/haptics.ts b/src/lib/haptics.ts
index 02940f793..390b76a0e 100644
--- a/src/lib/haptics.ts
+++ b/src/lib/haptics.ts
@@ -4,17 +4,21 @@ import {impactAsync, ImpactFeedbackStyle} from 'expo-haptics'
 import {isIOS, isWeb} from 'platform/detection'
 import {useHapticsDisabled} from 'state/preferences/disable-haptics'
 
-const hapticImpact: ImpactFeedbackStyle = isIOS
-  ? ImpactFeedbackStyle.Medium
-  : ImpactFeedbackStyle.Light // Users said the medium impact was too strong on Android; see APP-537s
-
 export function useHaptics() {
   const isHapticsDisabled = useHapticsDisabled()
 
-  return React.useCallback(() => {
-    if (isHapticsDisabled || isWeb) {
-      return
-    }
-    impactAsync(hapticImpact)
-  }, [isHapticsDisabled])
+  return React.useCallback(
+    (strength: 'Light' | 'Medium' | 'Heavy' = 'Medium') => {
+      if (isHapticsDisabled || isWeb) {
+        return
+      }
+
+      // Users said the medium impact was too strong on Android; see APP-537s
+      const style = isIOS
+        ? ImpactFeedbackStyle[strength]
+        : ImpactFeedbackStyle.Light
+      impactAsync(style)
+    },
+    [isHapticsDisabled],
+  )
 }
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}}