@hoddy-ui/core 1.1.3 → 2.0.0

package/src/Components/Animators/hooks/useGrowAnimation.ts

@@ -1,5 +1,12 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing, Platform } from "react-native";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseGrowAnimationProps {
@@ -12,43 +19,48 @@ interface UseGrowAnimationProps {
 export const useGrowAnimation = ({
   duration = 500,
   delay = 0,
-  closeAfter = 2000,
+  closeAfter = null,
   initialScale = 0,
 }: UseGrowAnimationProps = {}) => {
-  const scale = useRef(new Animated.Value(initialScale)).current;
+  const scale = useSharedValue(initialScale);
   const { isActive } = useAppState();
 
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }],
+    };
+  });
+
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      scale.stopAnimation();
+      scale.value = initialScale;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     // Start grow-in animation with easing
-    Animated.timing(scale, {
-      toValue: 1,
-      duration,
+    scale.value = withDelay(
       delay,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: true,
-    }).start(() => {
-      if (closeAfter) {
-        setTimeout(() => {
-          Animated.timing(scale, {
-            toValue: initialScale,
-            duration,
-            easing: Easing.out(Easing.ease),
-            useNativeDriver: true,
-          }).start();
-        }, closeAfter);
-      }
-    });
-
-    return () => scale.stopAnimation();
-  }, [scale, duration, delay, closeAfter, initialScale]);
+      withTiming(
+        1,
+        {
+          duration,
+          easing: Easing.out(Easing.ease),
+        },
+        () => {
+          if (closeAfter) {
+            setTimeout(() => {
+              scale.value = withTiming(initialScale, {
+                duration,
+                easing: Easing.out(Easing.ease),
+              });
+            }, closeAfter);
+          }
+        }
+      )
+    );
+  }, [scale, duration, delay, closeAfter, initialScale, isActive]);
 
   return {
-    animatedStyle: { transform: [{ scale }] },
+    animatedStyle,
   };
 };

package/src/Components/Animators/hooks/useRollAnimation.ts

@@ -1,5 +1,13 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing, Platform } from "react-native";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseRollAnimationProps {
@@ -13,74 +21,82 @@ interface UseRollAnimationProps {
 export const useRollAnimation = ({
   duration = 500,
   delay = 0,
-  closeAfter = 2000,
+  closeAfter = null,
   initialTranslateY = 100,
   initialRotate = "0deg",
 }: UseRollAnimationProps = {}) => {
-  const translateY = useRef(new Animated.Value(initialTranslateY)).current;
-  const rotate = useRef(new Animated.Value(0.5)).current;
+  const translateY = useSharedValue(initialTranslateY);
+  const rotate = useSharedValue(0);
   const { isActive } = useAppState();
 
+  const animatedStyle = useAnimatedStyle(() => {
+    // Interpolate rotation from 0-1 to initial rotation to 360deg
+    const rotateInterpolated = interpolate(
+      rotate.value,
+      [0, 1],
+      [parseFloat(initialRotate.replace("deg", "")), 360]
+    );
+
+    return {
+      transform: [
+        { translateY: translateY.value },
+        { rotate: `${rotateInterpolated}deg` },
+      ],
+    };
+  });
+
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      rotate.stopAnimation();
-      translateY.stopAnimation();
+      translateY.value = initialTranslateY;
+      rotate.value = 0;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
-    // Start roll-in animation with easing
-    Animated.parallel([
-      Animated.timing(translateY, {
-        toValue: 0.5,
+    // Start roll-in animation with easing (parallel animations)
+    translateY.value = withDelay(
+      delay,
+      withTiming(0, {
         duration,
-        delay,
         easing: Easing.out(Easing.ease),
-        useNativeDriver: true,
-      }),
-      Animated.timing(rotate, {
-        toValue: 1,
-        duration,
-        delay,
-        easing: Easing.out(Easing.ease),
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      if (closeAfter) {
-        setTimeout(() => {
-          Animated.parallel([
-            Animated.timing(translateY, {
-              toValue: initialTranslateY,
-              duration,
-              easing: Easing.out(Easing.ease),
-              useNativeDriver: true,
-            }),
-            Animated.timing(rotate, {
-              toValue: 0,
-              duration,
-              easing: Easing.out(Easing.ease),
-              useNativeDriver: true,
-            }),
-          ]).start();
-        }, closeAfter);
-      }
-    });
+      })
+    );
 
-    return () => {
-      translateY.stopAnimation();
-      rotate.stopAnimation();
-    };
-  }, [translateY, rotate, duration, delay, closeAfter, initialTranslateY]);
-
-  // Interpolate the rotation value to degrees
-  const rotateInterpolation = rotate.interpolate({
-    inputRange: [0, 1],
-    outputRange: [initialRotate, "360deg"],
-  });
+    rotate.value = withDelay(
+      delay,
+      withTiming(
+        1,
+        {
+          duration,
+          easing: Easing.out(Easing.ease),
+        },
+        () => {
+          if (closeAfter) {
+            setTimeout(() => {
+              translateY.value = withTiming(initialTranslateY, {
+                duration,
+                easing: Easing.out(Easing.ease),
+              });
+              rotate.value = withTiming(0, {
+                duration,
+                easing: Easing.out(Easing.ease),
+              });
+            }, closeAfter);
+          }
+        }
+      )
+    );
+  }, [
+    translateY,
+    rotate,
+    duration,
+    delay,
+    closeAfter,
+    initialTranslateY,
+    initialRotate,
+    isActive,
+  ]);
 
   return {
-    animatedStyle: {
-      transform: [{ translateY }, { rotate: rotateInterpolation }],
-    },
+    animatedStyle,
   };
 };

package/src/Components/Animators/hooks/useSlideAnimation.ts

@@ -1,5 +1,12 @@
-import { useEffect, useRef } from "react";
-import { Animated, Dimensions, Easing, Platform } from "react-native";
+import { useEffect } from "react";
+import { Dimensions, Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 const { width, height } = Dimensions.get("window");
@@ -34,55 +41,60 @@ export const useSlideAnimation = ({
   closeAfter,
   initialValue,
 }: UseSlideAnimationProps = {}) => {
-  const translateValue = useRef(new Animated.Value(0)).current;
+  const translateValue = useSharedValue(0);
   const { isActive } = useAppState();
 
+  const animatedStyle = useAnimatedStyle(() => {
+    const slideStyle =
+      direction === "up" || direction === "down"
+        ? { transform: [{ translateY: translateValue.value }] }
+        : { transform: [{ translateX: translateValue.value }] };
+
+    return slideStyle;
+  });
+
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      translateValue.stopAnimation();
+      const initialPosition = initialValue || getInitialPosition(direction);
+      translateValue.value = initialPosition;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     const initialPosition = initialValue || getInitialPosition(direction);
-    translateValue.setValue(initialPosition);
+    translateValue.value = initialPosition;
 
     // Slide-in animation with ease-out effect
-    Animated.timing(translateValue, {
-      toValue: 0,
-      duration,
+    translateValue.value = withDelay(
       delay,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: true,
-    }).start();
+      withTiming(0, {
+        duration,
+        easing: Easing.out(Easing.ease),
+      })
+    );
 
     if (closeAfter) {
       const timer = setTimeout(() => {
-        Animated.timing(translateValue, {
-          toValue: initialPosition,
+        translateValue.value = withTiming(initialPosition, {
           duration,
           easing: Easing.out(Easing.ease),
-          useNativeDriver: true,
-        }).start();
+        });
       }, closeAfter + duration + delay);
 
       return () => {
-        translateValue.stopAnimation();
         clearTimeout(timer);
       };
     }
-
-    return () => {
-      translateValue.stopAnimation();
-    };
-  }, [translateValue, duration, delay, direction, closeAfter]);
-
-  const slideStyle =
-    direction === "up" || direction === "down"
-      ? { transform: [{ translateY: translateValue }] }
-      : { transform: [{ translateX: translateValue }] };
+  }, [
+    translateValue,
+    duration,
+    delay,
+    direction,
+    closeAfter,
+    initialValue,
+    isActive,
+  ]);
 
   return {
-    animatedStyle: slideStyle,
+    animatedStyle,
   };
 };

package/src/Components/Animators/hooks/useThrownUpAnimation.ts

@@ -1,5 +1,12 @@
 import { useEffect, useRef } from "react";
-import { Animated, Platform } from "react-native";
+import { Platform } from "react-native";
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseThrownUpAnimationProps {
@@ -9,74 +16,63 @@ interface UseThrownUpAnimationProps {
 
 export const useThrownUpAnimation = ({
   delay = 0,
-  closeAfter = 3000,
+  closeAfter = null,
 }: UseThrownUpAnimationProps = {}) => {
-  const translateY = useRef(new Animated.Value(600)).current;
-  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useSharedValue(600);
+  const opacity = useSharedValue(0);
   const isUnmounting = useRef(false);
   const { isActive } = useAppState();
 
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value,
+    };
+  });
+
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      translateY.stopAnimation();
-      opacity.stopAnimation();
+      translateY.value = 600;
+      opacity.value = 0;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     // Animate up and fade in when component mounts
-    Animated.parallel([
-      Animated.spring(translateY, {
-        toValue: 0,
+    translateY.value = withDelay(
+      delay,
+      withSpring(0, {
         velocity: 1,
-        tension: 0.001,
-        friction: 2,
-        useNativeDriver: true,
-        delay,
-      }),
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: true,
-        delay,
-      }),
-    ]).start();
+        stiffness: 100,
+        damping: 15,
+      })
+    );
+
+    opacity.value = withDelay(delay, withTiming(1, { duration: 500 }));
 
     // Start timer to animate out after duration
     let timer: NodeJS.Timeout | null = null;
     if (closeAfter) {
       timer = setTimeout(() => {
         if (!isUnmounting.current) {
-          Animated.parallel([
-            Animated.spring(translateY, {
-              toValue: 800,
-              velocity: 1,
-              tension: 10,
-              friction: 7,
-              useNativeDriver: true,
-            }),
-            Animated.timing(opacity, {
-              toValue: 0,
-              duration: 500,
-              useNativeDriver: true,
-            }),
-          ]).start();
+          translateY.value = withSpring(800, {
+            velocity: 1,
+            stiffness: 200,
+            damping: 20,
+          });
+          opacity.value = withTiming(0, { duration: 500 });
         }
       }, closeAfter);
     }
 
     return () => {
       if (timer) clearTimeout(timer);
-      translateY.stopAnimation();
-      opacity.stopAnimation();
+      translateY.value = 600;
+      opacity.value = 0;
       isUnmounting.current = true;
     };
-  }, [translateY, opacity, delay, closeAfter]);
+  }, [translateY, opacity, delay, closeAfter, isActive]);
 
   return {
-    animatedStyle: {
-      transform: [{ translateY }],
-      opacity,
-    },
+    animatedStyle,
   };
 };

package/src/Components/OTPInput.tsx

@@ -25,14 +25,10 @@ export const OTPInput: FC<OTPInputProps> = ({
     [length]
   );
 
-  console.log("v", value);
-
   const onChangeHandler = (val: string, index: number) => {
     if (value.length >= length && val.length > 0) return;
     // Handle pasting of full OTP
     if (val.length > 1) {
-      console.log("reached", val);
-
       const digits = val.replace(/\D/g, "").slice(0, length);
       onChange(digits);
       if (digits.length === length) {