@hoddy-ui/core 2.5.10 → 2.5.11

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.52",
+  "version": "2.0.58",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

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

@@ -40,9 +40,7 @@ export const useFadeAnimation = ({
       withTiming(1, { duration }, () => {
         if (closeAfter) {
           // Schedule fade-out after closeAfter duration
-          setTimeout(() => {
-            opacity.value = withTiming(0, { duration });
-          }, closeAfter);
+          opacity.value = withDelay(closeAfter, withTiming(0, { duration }));
         }
       })
     );

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

@@ -64,11 +64,6 @@ export const useFloatAnimation = ({
     }
   };
 
-  const stopFloating = () => {
-    isFloating.current = false;
-    translateY.value = withTiming(0, { duration: 200 });
-  };
-
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
       opacity.value = 0;
@@ -84,10 +79,15 @@ export const useFloatAnimation = ({
         startFloating();
 
         if (closeAfter) {
-          setTimeout(() => {
-            stopFloating();
-            opacity.value = withTiming(0, { duration: closeDuration });
-          }, closeAfter);
+          opacity.value = withDelay(
+            closeAfter,
+            withTiming(0, { duration: closeDuration })
+          );
+          translateY.value = withDelay(
+            closeAfter,
+            withTiming(0, { duration: closeDuration })
+          );
+          isFloating.current = false;
         }
       })
     );

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

@@ -48,12 +48,13 @@ export const useGrowAnimation = ({
         },
         () => {
           if (closeAfter) {
-            setTimeout(() => {
-              scale.value = withTiming(initialScale, {
+            scale.value = withDelay(
+              closeAfter,
+              withTiming(initialScale, {
                 duration,
                 easing: Easing.out(Easing.ease),
-              });
-            }, closeAfter);
+              })
+            );
           }
         }
       )

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

@@ -71,16 +71,20 @@ export const useRollAnimation = ({
         },
         () => {
           if (closeAfter) {
-            setTimeout(() => {
-              translateY.value = withTiming(initialTranslateY, {
+            translateY.value = withDelay(
+              closeAfter,
+              withTiming(initialTranslateY, {
                 duration,
                 easing: Easing.out(Easing.ease),
-              });
-              rotate.value = withTiming(0, {
+              })
+            );
+            rotate.value = withDelay(
+              closeAfter,
+              withTiming(0, {
                 duration,
                 easing: Easing.out(Easing.ease),
-              });
-            }, closeAfter);
+              })
+            );
           }
         }
       )

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

@@ -73,16 +73,13 @@ export const useSlideAnimation = ({
     );
 
     if (closeAfter) {
-      const timer = setTimeout(() => {
-        translateValue.value = withTiming(initialPosition, {
+      translateValue.value = withDelay(
+        closeAfter + duration + delay,
+        withTiming(initialPosition, {
           duration,
           easing: Easing.out(Easing.ease),
-        });
-      }, closeAfter + duration + delay);
-
-      return () => {
-        clearTimeout(timer);
-      };
+        })
+      );
     }
   }, [
     translateValue,

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

@@ -50,22 +50,19 @@ export const useThrownUpAnimation = ({
     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) {
-          translateY.value = withSpring(800, {
-            velocity: 1,
-            stiffness: 200,
-            damping: 20,
-          });
-          opacity.value = withTiming(0, { duration: 500 });
-        }
-      }, 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.value = 600;
       opacity.value = 0;
       isUnmounting.current = true;

package/src/Components/Popup.tsx

@@ -11,8 +11,10 @@ import {
 
 import React, { useEffect, useState } from "react";
 import Animated, {
+  CurvedTransition,
   LinearTransition,
   runOnJS,
+  SequencedTransition,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -48,7 +50,8 @@ export const Popup: React.FC<PopupProps> = ({
   const contentTranslateY = useSharedValue(1000);
 
   // Memoized keyboard vertical offset based on platform and keyboard state
-  const keyboardVerticalOffsetValue = Platform.OS === "ios" ? -10 : -bottom * 2;
+  const keyboardVerticalOffsetValue =
+    Platform.OS === "ios" ? -bottom : -bottom * 2;
 
   // Keyboard event listeners
   useEffect(() => {
@@ -111,11 +114,12 @@ export const Popup: React.FC<PopupProps> = ({
     },
     keyboardView: {
       flex: 1,
+      zIndex: 1000,
     },
     avoidingView: {
+      zIndex: 2,
       minHeight: typeof sheet === "number" ? sheet : undefined,
       maxHeight: "90%",
-      zIndex: 1000,
       alignSelf: "center",
       maxWidth: sheet ? undefined : "90%",
       width: sheet ? "100%" : undefined,
@@ -167,6 +171,7 @@ export const Popup: React.FC<PopupProps> = ({
       onRequestClose={closeAction}
     >
       <UIThemeProvider>
+        <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
         <KeyboardAvoidingView
           style={styles.keyboardView}
           behavior={Platform.OS === "ios" ? "padding" : "height"}
@@ -176,22 +181,21 @@ export const Popup: React.FC<PopupProps> = ({
         >
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.root}>
-              <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
               {open && (
                 <Pressable
-                  style={[StyleSheet.absoluteFill, { zIndex: 2 }]}
+                  style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
                   onPress={closeAction}
                 />
               )}
 
               <Animated.View
                 style={[styles.avoidingView, contentAnimatedStyle]}
-                layout={LinearTransition.springify(1)}
+                layout={LinearTransition.springify()
+                  .stiffness(200)
+                  .mass(0.5)
+                  .damping(100)}
               >
-                <View
-                  // layout={LinearTransition}
-                  style={styles.container}
-                >
+                <View style={styles.container}>
                   {!bare && (
                     <View style={styles.title}>
                       <View style={styles.titleIcon}>