Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

scale down FAB on press (#4259)

authored by

Samuel Newman and committed by
GitHub
fba4a9ca e48f8e15

+30 -20
+30 -20
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 from 'react-native-reanimated' 3 + import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated' 4 4 import {useSafeAreaInsets} from 'react-native-safe-area-context' 5 5 import {LinearGradient} from 'expo-linear-gradient' 6 6 ··· 9 9 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 10 10 import {clamp} from 'lib/numbers' 11 11 import {gradients} from 'lib/styles' 12 + import {useInteractionState} from '#/components/hooks/useInteractionState' 12 13 13 14 export interface FABProps 14 15 extends ComponentProps<typeof TouchableWithoutFeedback> { ··· 20 21 const insets = useSafeAreaInsets() 21 22 const {isMobile, isTablet} = useWebMediaQueries() 22 23 const {fabMinimalShellTransform} = useMinimalShellMode() 24 + const { 25 + state: pressed, 26 + onIn: onPressIn, 27 + onOut: onPressOut, 28 + } = useInteractionState() 23 29 24 - const size = React.useMemo(() => { 25 - return isTablet ? styles.sizeLarge : styles.sizeRegular 26 - }, [isTablet]) 27 - const tabletSpacing = React.useMemo(() => { 28 - return isTablet 29 - ? {right: 50, bottom: 50} 30 - : { 31 - right: 24, 32 - bottom: clamp(insets.bottom, 15, 60) + 15, 33 - } 34 - }, [insets.bottom, isTablet]) 30 + const size = isTablet ? styles.sizeLarge : styles.sizeRegular 31 + 32 + const tabletSpacing = isTablet 33 + ? {right: 50, bottom: 50} 34 + : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15} 35 + 36 + const scale = useAnimatedStyle(() => ({ 37 + transform: [{scale: withTiming(pressed ? 0.95 : 1)}], 38 + })) 35 39 36 40 return ( 37 - <TouchableWithoutFeedback testID={testID} {...props}> 41 + <TouchableWithoutFeedback 42 + testID={testID} 43 + onPressIn={onPressIn} 44 + onPressOut={onPressOut} 45 + {...props}> 38 46 <Animated.View 39 47 style={[ 40 48 styles.outer, ··· 42 50 tabletSpacing, 43 51 isMobile && fabMinimalShellTransform, 44 52 ]}> 45 - <LinearGradient 46 - colors={[gradients.blueLight.start, gradients.blueLight.end]} 47 - start={{x: 0, y: 0}} 48 - end={{x: 1, y: 1}} 49 - style={[styles.inner, size]}> 50 - {icon} 51 - </LinearGradient> 53 + <Animated.View style={scale}> 54 + <LinearGradient 55 + colors={[gradients.blueLight.start, gradients.blueLight.end]} 56 + start={{x: 0, y: 0}} 57 + end={{x: 1, y: 1}} 58 + style={[styles.inner, size]}> 59 + {icon} 60 + </LinearGradient> 61 + </Animated.View> 52 62 </Animated.View> 53 63 </TouchableWithoutFeedback> 54 64 )