feat(pressable-feedback): adjust ripple animation hook

Author: vvv-sss

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

@@ -14,14 +14,15 @@ const DefaultContent = () => {
       <View className="flex-row items-center justify-center gap-4">
         <PressableFeedback
           className="bg-surface rounded-2xl h-[150px] w-full items-center justify-center"
-          animation={false}
-        >
-          <StyledIonicons
-            name="checkmark"
-            size={32}
-            className="text-surface-foreground"
-          />
-        </PressableFeedback>
+          variant="ripple"
+          animation={{
+            ripple: {
+              backgroundColor: {
+                value: 'pink',
+              },
+            },
+          }}
+        />
         {/* <PressableFeedback className="bg-accent rounded-2xl h-24 w-24 items-center justify-center">
           <StyledIonicons
             name="heart"

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

@@ -18,6 +18,7 @@ import type {
   PressableFeedbackAnimation,
   PressableFeedbackAnimationContextValue,
   PressableFeedbackHighlightRootAnimation,
+  PressableFeedbackRippleRootAnimation,
   PressableFeedbackVariant,
 } from './pressable-feedback.types';
 
@@ -84,7 +85,7 @@ export function usePressableFeedbackRootAnimation(options: {
       isPressed.set(false);
       scale.set(withTiming(0, scaleTimingConfig));
 
-      if (variant === 'ripple') return;
+      if (variant === 'highlight') return;
 
       rippleProgress.set(withTiming(2, { duration: 400 }));
     });
@@ -198,7 +199,13 @@ export function usePressableFeedbackHighlightAnimation(options: {
  * Animation hook for PressableFeedback ripple effect
  * Handles ripple circle animation with radial gradient
  */
-export function usePressableFeedbackRippleAnimation() {
+export function usePressableFeedbackRippleAnimation(options: {
+  animation: PressableFeedbackRippleRootAnimation | undefined;
+}) {
+  const { animation } = options;
+
+  const { theme } = useUniwind();
+
   const {
     pressedCenterX,
     pressedCenterY,
@@ -207,32 +214,77 @@ export function usePressableFeedbackRippleAnimation() {
     rippleProgress,
   } = usePressableFeedbackAnimation();
 
+  const { animationConfig, isAnimationDisabled } = getAnimationState(animation);
+
+  // Background color
+  const defaultColor = theme === 'dark' ? 'white' : 'black';
+
+  const backgroundColor = getAnimationValueProperty({
+    animationValue: animationConfig?.ripple?.backgroundColor,
+    property: 'value',
+    defaultValue: defaultColor,
+  });
+
+  // Opacity animation
+  const opacityValue = getAnimationValueProperty({
+    animationValue: animationConfig?.ripple?.opacity,
+    property: 'value',
+    defaultValue: [0, 1, 0] as [number, number, number],
+  });
+
+  const opacityTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.ripple?.opacity,
+    property: 'timingConfig',
+    defaultValue: { duration: 30 },
+  });
+
+  // Scale animation
+  const scaleValue = getAnimationValueProperty({
+    animationValue: animationConfig?.ripple?.scale,
+    property: 'value',
+    defaultValue: [0, 1, 1] as [number, number, number],
+  });
+
+  const scaleTimingConfig = getAnimationValueMergedConfig({
+    animationValue: animationConfig?.ripple?.scale,
+    property: 'timingConfig',
+    defaultValue: { duration: 30 },
+  });
+
   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;
 
+    if (isAnimationDisabled) {
+      return {};
+    }
+
     return {
       width: circleRadius * 2,
       height: circleRadius * 2,
       borderRadius: circleRadius,
       opacity: withTiming(
-        interpolate(rippleProgress.get(), [0, 1, 2], [0, 1, 0]),
-        { duration: 30 }
+        interpolate(
+          rippleProgress.get(),
+          [0, 1, 2],
+          [opacityValue[0], opacityValue[1], opacityValue[2]]
+        ),
+        opacityTimingConfig
       ),
       transform: [
-        {
-          translateX,
-        },
-        {
-          translateY,
-        },
+        { translateX },
+        { translateY },
         {
           scale: withTiming(
-            interpolate(rippleProgress.get(), [0, 1, 2], [0, 1, 1]),
-            { duration: 30 }
+            interpolate(
+              rippleProgress.get(),
+              [0, 1, 2],
+              [scaleValue[0], scaleValue[1], scaleValue[2]]
+            ),
+            scaleTimingConfig
           ),
         },
       ],
@@ -241,5 +293,6 @@ export function usePressableFeedbackRippleAnimation() {
 
   return {
     rContainerStyle,
+    backgroundColor,
   };
 }

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

@@ -10,7 +10,6 @@ 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,
@@ -23,7 +22,7 @@ import pressableFeedbackStyles from './pressable-feedback.styles';
 import type {
   PressableFeedbackHighlightRootAnimation,
   PressableFeedbackProps,
-  PressableFeedbackRippleAnimation,
+  PressableFeedbackRippleRootAnimation,
 } from './pressable-feedback.types';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
@@ -105,6 +104,11 @@ const PressableFeedback = forwardRef<PressableRef, PressableFeedbackProps>(
                 animation={animation as PressableFeedbackHighlightRootAnimation}
               />
             )}
+            {variant === 'ripple' && (
+              <PressableFeedbackRipple
+                animation={animation as PressableFeedbackRippleRootAnimation}
+              />
+            )}
             {children}
           </AnimatedPressable>
         </GestureDetector>
@@ -133,11 +137,10 @@ const PressableFeedbackHighlight: FC<{
 // --------------------------------------------------
 
 const PressableFeedbackRipple: FC<{
-  animation: PressableFeedbackRippleAnimation;
-}> = () => {
-  const { rContainerStyle } = usePressableFeedbackRippleAnimation();
-
-  const themeColorSurfaceSecondary = useThemeColor('on-surface-hover');
+  animation: PressableFeedbackRippleRootAnimation | undefined;
+}> = ({ animation }) => {
+  const { rContainerStyle, backgroundColor } =
+    usePressableFeedbackRippleAnimation({ animation });
 
   return (
     <Animated.View
@@ -148,21 +151,9 @@ const PressableFeedbackRipple: FC<{
       <Svg width="100%" height="100%">
         <Defs>
           <RadialGradient id="rippleGradient" cx="50%" cy="50%" r="50%">
-            <Stop
-              offset="0%"
-              stopOpacity="1"
-              stopColor={themeColorSurfaceSecondary}
-            />
-            <Stop
-              offset="80%"
-              stopOpacity="0.8"
-              stopColor={themeColorSurfaceSecondary}
-            />
-            <Stop
-              offset="100%"
-              stopOpacity="0"
-              stopColor={themeColorSurfaceSecondary}
-            />
+            <Stop offset="0%" stopOpacity="1" stopColor={backgroundColor} />
+            <Stop offset="80%" stopOpacity="0.8" stopColor={backgroundColor} />
+            <Stop offset="100%" stopOpacity="0" stopColor={backgroundColor} />
           </RadialGradient>
         </Defs>
         <Rect