@hoddy-ui/core 1.1.4 → 2.0.35

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,86 @@ 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) {
+            translateY.value = withDelay(
+              closeAfter,
+              withTiming(initialTranslateY, {
+                duration,
+                easing: Easing.out(Easing.ease),
+              })
+            );
+            rotate.value = withDelay(
+              closeAfter,
+              withTiming(0, {
+                duration,
+                easing: Easing.out(Easing.ease),
+              })
+            );
+          }
+        }
+      )
+    );
+  }, [
+    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,57 @@ 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 = withDelay(
+        closeAfter + duration + delay,
+        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,60 @@ 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();
-        }
-      }, closeAfter);
+      translateY.value = withDelay(
+        closeAfter,
+        withSpring(800, {
+          velocity: 1,
+          stiffness: 200,
+          damping: 20,
+        })
+      );
+      opacity.value = withDelay(closeAfter, withTiming(0, { duration: 500 }));
     }
 
     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/Avatar.tsx

@@ -1,7 +1,7 @@
 import { AntDesign } from "@expo/vector-icons";
-import React from "react";
+import React, { useState } from "react";
 import { Image, View } from "react-native";
-import { ScaledSheet } from "react-native-size-matters";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { AvatarProps } from "../types";
 import Typography from "./Typography";
@@ -15,11 +15,12 @@ const Avatar: React.FC<AvatarProps> = ({
   style = {},
 }) => {
   const colors = useColors();
+  const [imageError, setImageError] = useState(false);
   const styles: any = ScaledSheet.create({
     root: {
       borderRadius: 150,
-      height: size + "@ms",
-      width: size + "@ms",
+      height: ms(size),
+      width: ms(size),
       alignItems: "center",
       justifyContent: "center",
       overflow: "hidden",
@@ -27,7 +28,7 @@ const Avatar: React.FC<AvatarProps> = ({
       borderColor: variant === "outlined" ? "#fff" : "#0000",
       backgroundColor:
         variant === "outlined"
-          ? null
+          ? undefined
           : label
           ? colors[color].main
           : colors.white[4],
@@ -41,8 +42,13 @@ const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <View style={styles.root}>
-      {source ? (
-        <Image resizeMode="cover" style={styles.image} source={source} />
+      {source && !imageError ? (
+        <Image
+          resizeMode="cover"
+          style={styles.image}
+          source={source}
+          onError={() => setImageError(true)}
+        />
       ) : label ? (
         <Typography style={{ color: colors[color].text }}>
           {label[0]}

package/src/Components/Button.tsx

@@ -1,17 +1,18 @@
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import React, { forwardRef } from "react";
 import { ActivityIndicator, Text, TouchableOpacity } from "react-native";
-import { ScaledSheet, moderateScale } from "react-native-size-matters";
+import { ScaledSheet, moderateScale, ms } from "react-native-size-matters";
 import { getConfig } from "../config/KeyManager";
 import { useColors, useTheme } from "../hooks";
 import { ButtonProps, IconButtonProps, LinkButtonProps } from "../types";
+import { getFontFamily } from "../utility";
 
 export const LinkButton: React.FC<LinkButtonProps> = ({
   title,
   style = {},
   color = "blue",
   fontSize = 12,
-  fontWeight = "400",
+  fontWeight = 400,
   disabled,
   onPress = () => {},
 }) => {
@@ -20,8 +21,8 @@ export const LinkButton: React.FC<LinkButtonProps> = ({
   const styles: any = ScaledSheet.create({
     text: {
       fontSize: moderateScale(fontSize),
-      fontWeight: fontWeight,
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontWeight: fontWeight.toString() as any,
+      fontFamily: getFontFamily(fontWeight),
       color: disabled ? "#777" : colors[color].main,
     },
   });
@@ -51,7 +52,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
     container: {
       alignSelf: "flex-start",
       flexGrow: 0,
-      backgroundColor: bg ? bgColor : elevation! > 0 ? bgColor : null,
+      backgroundColor: bg ? bgColor : elevation! > 0 ? bgColor : undefined,
       padding: "5@ms",
       shadowColor: "#000",
       shadowOpacity: 0.1,
@@ -59,8 +60,8 @@ export const IconButton: React.FC<IconButtonProps> = ({
         height: 1,
         width: 0,
       },
-      height: bg ? size + 20 + "@ms" : undefined,
-      width: bg ? size + 20 + "@ms" : undefined,
+      height: bg ? ms(size + 20) : undefined,
+      width: bg ? ms(size + 20) : undefined,
       alignItems: "center",
       justifyContent: "center",
       shadowRadius: elevation,
@@ -118,7 +119,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
         justifyContent: "center",
         backgroundColor:
           variant === "text" || variant === "outlined"
-            ? null
+            ? undefined
             : translucent
             ? translucent === "dark"
               ? colors.white[3] + "22"
@@ -131,7 +132,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
         borderRadius: rounded ? 30 : 10,
         elevation: variant === "text" ? 0 : elevation,
         paddingVertical:
-          size === "small" ? 8 : size === "large" ? "15@ms" : "13@ms",
+          size === "small" ? 8 : size === "large" ? "15@mvs" : "13@mvs",
         paddingHorizontal: size === "small" ? "10@ms" : "18@ms",
         borderColor: colors[color].main,
         borderWidth: variant === "outlined" ? 1 : 0,
@@ -143,7 +144,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
           width: 0,
         },
         shadowOpacity: variant === "text" ? 0 : 0.3,
-        width: fullWidth ? "100%" : null,
+        width: fullWidth ? "100%" : undefined,
         ...style,
       },
       text: {
@@ -155,8 +156,8 @@ const Button: React.FC<ButtonProps> = forwardRef(
               variant === "text" || variant === "outlined" ? "main" : "text"
             ],
         fontWeight: variant === "outlined" ? "700" : "500",
-        fontSize: size === "small" ? "12@ms" : "16@ms",
-        fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+        fontSize: size === "small" ? "12@ms" : "13@ms",
+        fontFamily: getFontFamily(variant === "outlined" ? 700 : 500),
       },
     });