diff --git a/src/lib/haptics.ts b/src/lib/haptics.ts index 390b76a0e7..f588808fc3 100644 --- a/src/lib/haptics.ts +++ b/src/lib/haptics.ts @@ -1,8 +1,8 @@ import React from 'react' import {impactAsync, ImpactFeedbackStyle} from 'expo-haptics' -import {isIOS, isWeb} from 'platform/detection' -import {useHapticsDisabled} from 'state/preferences/disable-haptics' +import {isIOS, isWeb} from '#/platform/detection' +import {useHapticsDisabled} from '#/state/preferences/disable-haptics' export function useHaptics() { const isHapticsDisabled = useHapticsDisabled() diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index d1675b428c..5d8aac81af 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/src/view/com/util/fab/FABInner.tsx @@ -1,20 +1,16 @@ import React, {ComponentProps} from 'react' import {StyleSheet, TouchableWithoutFeedback} from 'react-native' -import Animated, { - Easing, - useAnimatedStyle, - withTiming, -} 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' +import {useHaptics} from '#/lib/haptics' import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform' 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 {useHapticsDisabled} from '#/state/preferences' import {useInteractionState} from '#/components/hooks/useInteractionState' export interface FABProps @@ -26,14 +22,14 @@ export interface FABProps export function FABInner({testID, icon, onPress, ...props}: FABProps) { const insets = useSafeAreaInsets() const {isMobile, isTablet} = useWebMediaQueries() + const playHaptic = useHaptics() + const isHapticsDisabled = useHapticsDisabled() const fabMinimalShellTransform = useMinimalShellFabTransform() const { - state: isPressed, + state: pressed, onIn: onPressIn, onOut: onPressOut, } = useInteractionState() - const playHaptic = useHaptics() - const isHapticsDisabled = useHapticsDisabled() const size = isTablet ? styles.sizeLarge : styles.sizeRegular @@ -41,22 +37,17 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) { ? {right: 50, bottom: 50} : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15} - const animatedStyle = useAnimatedStyle(() => ({ - transform: [ - { - scale: withTiming(isPressed ? 1.1 : 1, { - duration: 250, - easing: Easing.out(Easing.quad), - }), - }, - ], + const scale = useAnimatedStyle(() => ({ + transform: [{scale: withTiming(pressed ? 0.95 : 1)}], })) return ( { - playHaptic() + playHaptic('Light') setTimeout( () => { onPress?.(e) @@ -64,8 +55,6 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) { isHapticsDisabled ? 0 : 75, ) }} - onPressIn={onPressIn} - onPressOut={onPressOut} {...props}> - +