diff --git a/src/view/com/util/fab/FAB.web.tsx b/src/view/com/util/fab/FAB.web.tsx index 0a8831fa92..601d505a8d 100644 --- a/src/view/com/util/fab/FAB.web.tsx +++ b/src/view/com/util/fab/FAB.web.tsx @@ -1,7 +1,8 @@ import React from 'react' import {View} from 'react-native' + +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {FABInner, FABProps} from './FABInner' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' export const FAB = (_opts: FABProps) => { const {isDesktop} = useWebMediaQueries() diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index 5d8aac81af..bc89ddb603 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/src/view/com/util/fab/FABInner.tsx @@ -1,9 +1,10 @@ import React, {ComponentProps} from 'react' import {StyleSheet, TouchableWithoutFeedback} from 'react-native' -import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated' +import Animated from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {LinearGradient} from 'expo-linear-gradient' +import {PressableScale} from '#/lib/custom-animations/PressableScale' import {useHaptics} from '#/lib/haptics' import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' @@ -11,7 +12,6 @@ import {clamp} from '#/lib/numbers' import {gradients} from '#/lib/styles' import {isWeb} from '#/platform/detection' import {useHapticsDisabled} from '#/state/preferences' -import {useInteractionState} from '#/components/hooks/useInteractionState' export interface FABProps extends ComponentProps { @@ -25,11 +25,6 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) { const playHaptic = useHaptics() const isHapticsDisabled = useHapticsDisabled() const fabMinimalShellTransform = useMinimalShellFabTransform() - const { - state: pressed, - onIn: onPressIn, - onOut: onPressOut, - } = useInteractionState() const size = isTablet ? styles.sizeLarge : styles.sizeRegular @@ -37,43 +32,36 @@ export function FABInner({testID, icon, onPress, ...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)}], - })) - return ( - { - playHaptic('Light') - setTimeout( - () => { - onPress?.(e) - }, - isHapticsDisabled ? 0 : 75, - ) - }} - {...props}> - - - - {icon} - - - - + + { + playHaptic('Light') + setTimeout( + () => { + onPress?.(e) + }, + isHapticsDisabled ? 0 : 75, + ) + }} + targetScale={0.9} + {...props}> + + {icon} + + + ) }