feat(pressable-feedback): handle riple progress settings

Author: vvv-sss

example/src/app/(home)/components/pressable-feedback.tsx

@@ -13,7 +13,7 @@ const DefaultContent = () => {
     <View className="flex-1 px-5 items-center justify-center">
       <View className="flex-row items-center justify-center gap-4">
         <PressableFeedback
-          className="bg-surface rounded-2xl h-[100px] w-full items-center justify-center"
+          className="bg-surface rounded-2xl h-[500px] w-full items-center justify-center"
           variant="ripple"
         />
         {/* <PressableFeedback className="bg-accent rounded-2xl h-24 w-24 items-center justify-center">

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

@@ -3,6 +3,7 @@ import { Gesture } from 'react-native-gesture-handler';
 import {
   interpolate,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
@@ -14,6 +15,7 @@ import {
   getAnimationValueProperty,
   getStyleTransform,
 } from '../../helpers/utils/animation';
+import { BASE_RIPPLE_PROGRESS_DURATION } from './pressable-feedback.constants';
 import type {
   PressableFeedbackAnimation,
   PressableFeedbackAnimationContextValue,
@@ -48,7 +50,7 @@ export function usePressableFeedbackRootAnimation(options: {
   const scaleValue = getAnimationValueProperty({
     animationValue: animationConfig?.scale,
     property: 'value',
-    defaultValue: 0.99,
+    defaultValue: 0.98,
   });
 
   const scaleTimingConfig = getAnimationValueMergedConfig({
@@ -57,6 +59,41 @@ export function usePressableFeedbackRootAnimation(options: {
     defaultValue: { duration: 200 },
   });
 
+  const ignoreScaleCoefficient = getAnimationValueProperty({
+    animationValue: animationConfig?.scale,
+    property: 'ignoreScaleCoefficient',
+    defaultValue: false,
+  });
+
+  // Ripple progress animation values
+  const rippleProgressBaseDuration = getAnimationValueProperty({
+    animationValue:
+      variant === 'ripple'
+        ? (
+            animationConfig as Extract<
+              PressableFeedbackRippleRootAnimation,
+              Record<string, any>
+            >
+          )?.ripple?.progress
+        : undefined,
+    property: 'baseDuration',
+    defaultValue: BASE_RIPPLE_PROGRESS_DURATION,
+  });
+
+  const ignoreDurationCoefficient = getAnimationValueProperty({
+    animationValue:
+      variant === 'ripple'
+        ? (
+            animationConfig as Extract<
+              PressableFeedbackRippleRootAnimation,
+              Record<string, any>
+            >
+          )?.ripple?.progress
+        : undefined,
+    property: 'ignoreDurationCoefficient',
+    defaultValue: false,
+  });
+
   // Shared values
   const isPressed = useSharedValue(false);
   const scale = useSharedValue(0);
@@ -66,6 +103,19 @@ export function usePressableFeedbackRootAnimation(options: {
   const containerHeight = useSharedValue(0);
   const rippleProgress = useSharedValue(0);
 
+  // Calculate duration coefficient based on diagonal to maintain consistent ripple speed
+  // across different container sizes. Base diagonal is 450px.
+  // Can be disabled by setting ignoreDurationCoefficient to true.
+  const durationCoefficient = useDerivedValue(() => {
+    if (ignoreDurationCoefficient) return 1;
+
+    const baseDiagonal = 450;
+    const currentDiagonal = Math.sqrt(
+      containerWidth.get() ** 2 + containerHeight.get() ** 2
+    );
+    return currentDiagonal > 0 ? currentDiagonal / baseDiagonal : 1;
+  });
+
   // Gesture handling
   const gesture = Gesture.Pan()
     .onBegin((event) => {
@@ -78,7 +128,11 @@ export function usePressableFeedbackRootAnimation(options: {
       pressedCenterX.set(event.x);
       pressedCenterY.set(event.y);
       if (rippleProgress.get() === 0) {
-        rippleProgress.set(withTiming(1, { duration: 250 }));
+        const adjustedDuration = Math.min(
+          rippleProgressBaseDuration * durationCoefficient.get(),
+          rippleProgressBaseDuration * 2
+        );
+        rippleProgress.set(withTiming(1, { duration: adjustedDuration }));
       }
     })
     .onFinalize(() => {
@@ -87,15 +141,23 @@ export function usePressableFeedbackRootAnimation(options: {
 
       if (variant === 'highlight') return;
 
-      rippleProgress.set(withTiming(2, { duration: 400 }));
+      const adjustedDuration = Math.min(
+        rippleProgressBaseDuration * durationCoefficient.get(),
+        rippleProgressBaseDuration * 2
+      );
+      rippleProgress.set(withTiming(2, { duration: adjustedDuration }));
     });
 
   const styleTransform = getStyleTransform(style);
 
   const rContainerStyle = useAnimatedStyle(() => {
-    const baseWidth = 300;
-    const coefficient =
-      containerWidth.get() > 0 ? baseWidth / containerWidth.get() : 1;
+    // Calculate scale coefficient to maintain consistent scale effect across different sizes
+    // Can be disabled by setting ignoreScaleCoefficient to true
+    const coefficient = ignoreScaleCoefficient
+      ? 1
+      : containerWidth.get() > 0
+        ? 300 / containerWidth.get()
+        : 1;
     const adjustedScaleValue = 1 - (1 - scaleValue) * coefficient;
 
     if (isAnimationDisabled) {

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

@@ -5,3 +5,5 @@ export const DISPLAY_NAME = {
   ROOT: 'HeroUINative.PressableFeedback.Root',
   HIGHLIGHT: 'HeroUINative.PressableFeedback.Highlight',
 } as const;
+
+export const BASE_RIPPLE_PROGRESS_DURATION = 500;

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

@@ -17,14 +17,35 @@ export type PressableFeedbackVariant = 'highlight' | 'ripple';
 export type PressableFeedbackScaleAnimation = AnimationValue<{
   /**
    * Scale value when pressed
-   * @default 0.99
+   * @default 0.98
+   *
+   * Note: The actual scale is automatically adjusted based on the container's width
+   * using a scale coefficient. This ensures the scale effect feels consistent across different
+   * container sizes:
+   * - Base width: 300px
+   * - If container width > 300px: scale adjustment decreases (less noticeable scale down)
+   * - If container width < 300px: scale adjustment increases (more noticeable scale down)
+   * - Example: 600px width → 0.5x coefficient → adjustedScale = 1 - (1 - 0.98) * 0.5 = 0.99
+   * - Example: 150px width → 2x coefficient → adjustedScale = 1 - (1 - 0.98) * 2 = 0.96
+   *
+   * This automatic scaling creates the same visual feel on different sized containers
+   * by adjusting the scale effect relative to the container size.
    */
   value?: number;
   /**
    * Animation timing configuration
    * @default { duration: 200 }
    */
   timingConfig?: WithTimingConfig;
+  /**
+   * Ignore the scale coefficient and use the scale value directly
+   *
+   * When set to true, the scale coefficient will return 1, meaning the actual scale
+   * will always equal the value regardless of the container's width.
+   *
+   * @default false
+   */
+  ignoreScaleCoefficient?: boolean;
 }>;
 
 /**
@@ -72,6 +93,46 @@ export type PressableFeedbackRippleAnimation = AnimationValue<{
      */
     value?: string;
   }>;
+  /**
+   * Progress animation configuration for the ripple effect
+   *
+   * This controls how the ripple progresses over time from the center to the edges.
+   * The progress is represented as a shared value that animates from 0 to 2:
+   * - 0 to 1: Initial expansion phase (press begins)
+   * - 1 to 2: Final expansion and fade out phase (press ends)
+   */
+  progress?: AnimationValue<{
+    /**
+     * Base duration for the ripple progress animation in milliseconds
+     *
+     * This value controls how fast the ripple progresses across the container.
+     * Lower values mean faster ripple expansion, higher values mean slower expansion.
+     *
+     * @default 500
+     *
+     * Note: The actual duration is automatically adjusted based on the container's diagonal size
+     * using a durationCoefficient. This ensures the ripple feels consistent across different
+     * container sizes:
+     * - Base diagonal: 450px
+     * - If container diagonal > 450px: duration increases proportionally (max 2x baseDuration)
+     * - If container diagonal < 450px: duration decreases proportionally
+     * - Example: 900px diagonal → 2x coefficient → duration = baseDuration * 2 (capped at 2x)
+     * - Example: 225px diagonal → 0.5x coefficient → duration = baseDuration * 0.5
+     *
+     * This automatic scaling creates the same visual feel on different sized containers
+     * by making the ripple travel at a consistent speed relative to the container size.
+     */
+    baseDuration?: number;
+    /**
+     * Ignore the duration coefficient and use the base duration directly
+     *
+     * When set to true, the durationCoefficient will return 1, meaning the actual duration
+     * will always equal baseDuration regardless of the container's diagonal size.
+     *
+     * @default false
+     */
+    ignoreDurationCoefficient?: boolean;
+  }>;
   /**
    * Opacity animation for the ripple effect
    */