Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Revert change in FAB animation (#5465)

authored by

Hailey and committed by
GitHub
b57ddd09 53b095ad

+14 -25
+2 -2
src/lib/haptics.ts
··· 1 1 import React from 'react' 2 2 import {impactAsync, ImpactFeedbackStyle} from 'expo-haptics' 3 3 4 - import {isIOS, isWeb} from 'platform/detection' 5 - import {useHapticsDisabled} from 'state/preferences/disable-haptics' 4 + import {isIOS, isWeb} from '#/platform/detection' 5 + import {useHapticsDisabled} from '#/state/preferences/disable-haptics' 6 6 7 7 export function useHaptics() { 8 8 const isHapticsDisabled = useHapticsDisabled()
+12 -23
src/view/com/util/fab/FABInner.tsx
··· 1 1 import React, {ComponentProps} from 'react' 2 2 import {StyleSheet, TouchableWithoutFeedback} from 'react-native' 3 - import Animated, { 4 - Easing, 5 - useAnimatedStyle, 6 - withTiming, 7 - } from 'react-native-reanimated' 3 + import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated' 8 4 import {useSafeAreaInsets} from 'react-native-safe-area-context' 9 5 import {LinearGradient} from 'expo-linear-gradient' 10 6 7 + import {useHaptics} from '#/lib/haptics' 11 8 import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform' 12 9 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 13 10 import {clamp} from '#/lib/numbers' 14 11 import {gradients} from '#/lib/styles' 15 12 import {isWeb} from '#/platform/detection' 16 - import {useHaptics} from 'lib/haptics' 17 - import {useHapticsDisabled} from 'state/preferences' 13 + import {useHapticsDisabled} from '#/state/preferences' 18 14 import {useInteractionState} from '#/components/hooks/useInteractionState' 19 15 20 16 export interface FABProps ··· 26 22 export function FABInner({testID, icon, onPress, ...props}: FABProps) { 27 23 const insets = useSafeAreaInsets() 28 24 const {isMobile, isTablet} = useWebMediaQueries() 25 + const playHaptic = useHaptics() 26 + const isHapticsDisabled = useHapticsDisabled() 29 27 const fabMinimalShellTransform = useMinimalShellFabTransform() 30 28 const { 31 - state: isPressed, 29 + state: pressed, 32 30 onIn: onPressIn, 33 31 onOut: onPressOut, 34 32 } = useInteractionState() 35 - const playHaptic = useHaptics() 36 - const isHapticsDisabled = useHapticsDisabled() 37 33 38 34 const size = isTablet ? styles.sizeLarge : styles.sizeRegular 39 35 ··· 41 37 ? {right: 50, bottom: 50} 42 38 : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15} 43 39 44 - const animatedStyle = useAnimatedStyle(() => ({ 45 - transform: [ 46 - { 47 - scale: withTiming(isPressed ? 1.1 : 1, { 48 - duration: 250, 49 - easing: Easing.out(Easing.quad), 50 - }), 51 - }, 52 - ], 40 + const scale = useAnimatedStyle(() => ({ 41 + transform: [{scale: withTiming(pressed ? 0.95 : 1)}], 53 42 })) 54 43 55 44 return ( 56 45 <TouchableWithoutFeedback 57 46 testID={testID} 47 + onPressIn={onPressIn} 48 + onPressOut={onPressOut} 58 49 onPress={e => { 59 - playHaptic() 50 + playHaptic('Light') 60 51 setTimeout( 61 52 () => { 62 53 onPress?.(e) ··· 64 55 isHapticsDisabled ? 0 : 75, 65 56 ) 66 57 }} 67 - onPressIn={onPressIn} 68 - onPressOut={onPressOut} 69 58 {...props}> 70 59 <Animated.View 71 60 style={[ ··· 74 63 tabletSpacing, 75 64 isMobile && fabMinimalShellTransform, 76 65 ]}> 77 - <Animated.View style={animatedStyle}> 66 + <Animated.View style={scale}> 78 67 <LinearGradient 79 68 colors={[gradients.blueLight.start, gradients.blueLight.end]} 80 69 start={{x: 0, y: 0}}