use PressableScale for animation (#5541)

bluesky-social · Sep 30, 2024 · 9ca2928 · 9ca2928
1 parent 587c0c6
commit 9ca2928
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 44 deletions.
diff --git 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
@@ -1,17 +1,17 @@
 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'
 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<typeof TouchableWithoutFeedback> {
@@ -25,55 +25,43 @@ 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
 
   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 (
-    <TouchableWithoutFeedback
-      testID={testID}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      onPress={e => {
-        playHaptic('Light')
-        setTimeout(
-          () => {
-            onPress?.(e)
-          },
-          isHapticsDisabled ? 0 : 75,
-        )
-      }}
-      {...props}>
-      <Animated.View
-        style={[
-          styles.outer,
-          size,
-          tabletSpacing,
-          isMobile && fabMinimalShellTransform,
-        ]}>
-        <Animated.View style={scale}>
-          <LinearGradient
-            colors={[gradients.blueLight.start, gradients.blueLight.end]}
-            start={{x: 0, y: 0}}
-            end={{x: 1, y: 1}}
-            style={[styles.inner, size]}>
-            {icon}
-          </LinearGradient>
-        </Animated.View>
-      </Animated.View>
-    </TouchableWithoutFeedback>
+    <Animated.View
+      style={[
+        styles.outer,
+        size,
+        tabletSpacing,
+        isMobile && fabMinimalShellTransform,
+      ]}>
+      <PressableScale
+        testID={testID}
+        onPress={e => {
+          playHaptic('Light')
+          setTimeout(
+            () => {
+              onPress?.(e)
+            },
+            isHapticsDisabled ? 0 : 75,
+          )
+        }}
+        targetScale={0.9}
+        {...props}>
+        <LinearGradient
+          colors={[gradients.blueLight.start, gradients.blueLight.end]}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 1}}
+          style={[styles.inner, size]}>
+          {icon}
+        </LinearGradient>
+      </PressableScale>
+    </Animated.View>
   )
 }