Refactors Ripple animation into a reusable hook

apps/frontend/components/IconButton.tsx

@@ -1,56 +1,20 @@
-import { useRef } from 'react';
-import { Image, ImageSourcePropType, GestureResponderEvent, Pressable, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { useRipple } from '@/hooks';
+import { GestureResponderEvent, Image, ImageSourcePropType, Pressable, View } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 interface IconButtonProps {
   icon: ImageSourcePropType;
-  onPress?: (event: GestureResponderEvent) => void;
   tintColor?: string;
+  onPress?: (event: GestureResponderEvent) => void;
 }
 
 const IconButton = (props: IconButtonProps) => {
-  const scale = useSharedValue(0);
-  const opacity = useSharedValue(0.15);
-  const rippleX = useSharedValue(0);
-  const rippleY = useSharedValue(0);
-  const containerRef = useRef<View>(null);
-
-  const handlePressIn = (e: GestureResponderEvent) => {
-    containerRef.current?.measure((x, y, width, height, pageX, pageY) => {
-      const localX = e.nativeEvent.pageX - pageX;
-      const localY = e.nativeEvent.pageY - pageY;
-      rippleX.value = localX;
-      rippleY.value = localY;
-      scale.value = 0;
-      opacity.value = 0.75;
-      scale.value = withTiming(3, {
-        duration: 500,
-        easing: Easing.out(Easing.ease),
-      });
-      opacity.value = withTiming(0, {
-        duration: 500,
-        easing: Easing.out(Easing.ease),
-      });
-    });
-  };
-
-  const animatedRippleStyle = useAnimatedStyle(() => ({
-    position: 'absolute',
-    top: rippleY.value - 50,
-    left: rippleX.value - 50,
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    backgroundColor: '#0066FF',
-    transform: [{ scale: scale.value }],
-    opacity: opacity.value,
-    pointerEvents: 'none',
-  }));
+  const { rippleContainerRef, rippleStyle, triggerRipple } = useRipple();
 
   return (
-    <Pressable className='icon-btn-wrapper' onPress={props.onPress} onPressIn={handlePressIn}>
-      <View className='icon-btn-inner' ref={containerRef}>
-        <Animated.View style={animatedRippleStyle} />
+    <Pressable className='icon-btn-wrapper' onPress={props.onPress} onPressIn={triggerRipple}>
+      <View className='icon-btn-inner' ref={rippleContainerRef}>
+        <Animated.View style={rippleStyle} />
         <Image
           className='icon-btn-img'
           source={props.icon}

apps/frontend/hooks/animations/useRipple.tsx

@@ -0,0 +1,63 @@
+import { useRef } from 'react';
+import { GestureResponderEvent, View } from 'react-native';
+import { Easing, useAnimatedStyle, useSharedValue, withTiming, WithTimingConfig } from 'react-native-reanimated';
+
+interface RippleAnimationConfig {
+  color?: string;
+  opacity?: { from: number; to: number };
+  scale?: { from: number; to: number };
+  duration?: number;
+  radius?: number;
+  easing?: WithTimingConfig['easing'];
+}
+
+const useRippleAnimation = (config?: RippleAnimationConfig) => {
+  const {
+    color = '#FFFFFF',
+    opacity = { from: 0.45, to: 0 },
+    scale = { from: 0, to: 3 },
+    duration = 500,
+    radius = 50,
+    easing = Easing.out(Easing.ease),
+  } = config || {};
+
+  const scaleValue = useSharedValue(scale.from);
+  const opacityValue = useSharedValue(opacity.from);
+  const rippleX = useSharedValue(0);
+  const rippleY = useSharedValue(0);
+  const rippleContainerRef = useRef<View>(null);
+
+  const triggerRipple = (e: GestureResponderEvent) => {
+    rippleContainerRef.current?.measure((x, y, width, height, pageX, pageY) => {
+      const localX = e.nativeEvent.pageX - pageX;
+      const localY = e.nativeEvent.pageY - pageY;
+      rippleX.value = localX;
+      rippleY.value = localY;
+      scaleValue.value = scale.from;
+      opacityValue.value = opacity.from;
+      scaleValue.value = withTiming(scale.to, { duration, easing });
+      opacityValue.value = withTiming(opacity.to, { duration, easing });
+    });
+  };
+
+  const rippleStyle = useAnimatedStyle(() => ({
+    position: 'absolute',
+    top: rippleY.value - radius,
+    left: rippleX.value - radius,
+    width: radius * 2,
+    height: radius * 2,
+    borderRadius: radius,
+    backgroundColor: color,
+    transform: [{ scale: scaleValue.value }],
+    opacity: opacityValue.value,
+    pointerEvents: 'none',
+  }));
+
+  return {
+    rippleContainerRef,
+    rippleStyle,
+    triggerRipple,
+  };
+};
+
+export default useRippleAnimation;

apps/frontend/hooks/index.ts

@@ -1,3 +1,4 @@
+import useRipple from './animations/useRipple';
 import useCustomFonts from './useFonts';
 
-export { useCustomFonts };
+export { useCustomFonts, useRipple };