feat(pressable-feedback): add usePressableFeedbackRippleAnimation hook

Author: vvv-sss

src/components/pressable-feedback/pressable-feedback.animation.ts

@@ -1,6 +1,7 @@
 import { Gesture } from 'react-native-gesture-handler';
 import {
   Easing,
+  interpolate,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -45,7 +46,9 @@ export function usePressableFeedbackRootAnimation() {
       pressedCenterX.set(event.x);
       pressedCenterY.set(event.y);
       isPressed.set(true);
-      rippleProgress.set(withTiming(1, { duration: 200 }));
+      if (rippleProgress.get() === 0) {
+        rippleProgress.set(withTiming(1, { duration: 250 }));
+      }
     })
     .onFinalize(() => {
       isPressed.set(false);
@@ -128,3 +131,55 @@ export function usePressableFeedbackHighlightAnimation(options: {
     isPressed,
   };
 }
+
+// --------------------------------------------------
+
+/**
+ * Animation hook for PressableFeedback ripple effect
+ * Handles ripple circle animation with radial gradient
+ */
+export function usePressableFeedbackRippleAnimation() {
+  const {
+    pressedCenterX,
+    pressedCenterY,
+    containerWidth,
+    containerHeight,
+    rippleProgress,
+  } = usePressableFeedbackAnimation();
+
+  const rContainerStyle = useAnimatedStyle(() => {
+    const circleRadius =
+      Math.sqrt(containerWidth.get() ** 2 + containerHeight.get() ** 2) * 1.25;
+
+    const translateX = pressedCenterX.get() - circleRadius;
+    const translateY = pressedCenterY.get() - circleRadius;
+
+    return {
+      width: circleRadius * 2,
+      height: circleRadius * 2,
+      borderRadius: circleRadius,
+      opacity: withTiming(
+        interpolate(rippleProgress.get(), [0, 1, 2], [0, 1, 0]),
+        { duration: 40 }
+      ),
+      transform: [
+        {
+          translateX,
+        },
+        {
+          translateY,
+        },
+        {
+          scale: withTiming(
+            interpolate(rippleProgress.get(), [0, 1, 2], [0, 1, 1]),
+            { duration: 40 }
+          ),
+        },
+      ],
+    };
+  });
+
+  return {
+    rContainerStyle,
+  };
+}

src/components/pressable-feedback/pressable-feedback.tsx

@@ -1,20 +1,16 @@
 import { forwardRef, useCallback, useMemo, type FC } from 'react';
 import { Pressable, StyleSheet, type LayoutChangeEvent } from 'react-native';
 
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-  withTiming,
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import Svg, { Defs, RadialGradient, Rect, Stop } from 'react-native-svg';
 
 import { GestureDetector } from 'react-native-gesture-handler';
 import { useThemeColor } from '../../helpers/theme';
 import type { PressableRef } from '../../helpers/types';
 import {
   PressableFeedbackAnimationProvider,
-  usePressableFeedbackAnimation,
   usePressableFeedbackHighlightAnimation,
+  usePressableFeedbackRippleAnimation,
   usePressableFeedbackRootAnimation,
 } from './pressable-feedback.animation';
 import { DISPLAY_NAME } from './pressable-feedback.constants';
@@ -116,48 +112,10 @@ const PressableFeedbackHighlight: FC<{
 // --------------------------------------------------
 
 const PressableFeedbackRipple: FC<{}> = () => {
-  const {
-    pressedCenterX,
-    pressedCenterY,
-    containerWidth,
-    containerHeight,
-    rippleProgress,
-  } = usePressableFeedbackAnimation();
+  const { rContainerStyle } = usePressableFeedbackRippleAnimation();
 
   const themeColorSurfaceSecondary = useThemeColor('on-surface-hover');
 
-  const rContainerStyle = useAnimatedStyle(() => {
-    const circleRadius =
-      Math.sqrt(containerWidth.get() ** 2 + containerHeight.get() ** 2) * 1.25;
-
-    const translateX = pressedCenterX.get() - circleRadius;
-    const translateY = pressedCenterY.get() - circleRadius;
-
-    return {
-      width: circleRadius * 2,
-      height: circleRadius * 2,
-      borderRadius: circleRadius,
-      opacity: withTiming(
-        interpolate(rippleProgress.get(), [0, 1, 2], [0, 1, 0]),
-        { duration: 40 }
-      ),
-      transform: [
-        {
-          translateX,
-        },
-        {
-          translateY,
-        },
-        {
-          scale: withTiming(
-            interpolate(rippleProgress.get(), [0, 1, 2], [0, 1, 1]),
-            { duration: 40 }
-          ),
-        },
-      ],
-    };
-  });
-
   return (
     <Animated.View
       pointerEvents="none"
@@ -169,18 +127,18 @@ const PressableFeedbackRipple: FC<{}> = () => {
           <RadialGradient id="rippleGradient" cx="50%" cy="50%" r="50%">
             <Stop
               offset="0%"
-              stopColor={themeColorSurfaceSecondary}
               stopOpacity="1"
+              stopColor={themeColorSurfaceSecondary}
             />
             <Stop
-              offset="75%"
+              offset="80%"
+              stopOpacity="0.8"
               stopColor={themeColorSurfaceSecondary}
-              stopOpacity="0.75"
             />
             <Stop
               offset="100%"
-              stopColor={themeColorSurfaceSecondary}
               stopOpacity="0"
+              stopColor={themeColorSurfaceSecondary}
             />
           </RadialGradient>
         </Defs>