diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index a01756da..ccf2f31d 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/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 { @@ -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(() => { - return isTablet ? styles.sizeLarge : styles.sizeRegular - }, [isTablet]) - const tabletSpacing = React.useMemo(() => { - return isTablet - ? {right: 50, bottom: 50} - : { - right: 24, - bottom: clamp(insets.bottom, 15, 60) + 15, - } - }, [insets.bottom, isTablet]) + const size = isTablet ? styles.sizeLarge : styles.sizeRegular + + const tabletSpacing = isTablet + ? {right: 50, bottom: 50} + : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15} + + const scale = useAnimatedStyle(() => ({ + transform: [{scale: withTiming(pressed ? 0.95 : 1)}], + })) return ( - + - - {icon} - + + + {icon} + + )