@hoddy-ui/core 2.5.9 → 2.5.11

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.51",
+  "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.9",
+  "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,25 +11,27 @@ import {
 
 import React, { useEffect, useState } from "react";
 import Animated, {
+  CurvedTransition,
   LinearTransition,
   runOnJS,
+  SequencedTransition,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ms, ScaledSheet } from "react-native-size-matters";
 import { useColors, useTheme } from "../hooks";
 import { UIThemeProvider } from "../theme";
 import { PopupProps } from "../types";
 import { IconButton } from "./Button";
 import Typography from "./Typography";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export const Popup: React.FC<PopupProps> = ({
   title,
   sheet,
   bare = false,
-  keyboardVerticalOffset = -10,
+  keyboardVerticalOffset,
   children,
   open,
   onClose = () => {},
@@ -40,12 +42,38 @@ export const Popup: React.FC<PopupProps> = ({
   const theme = useTheme();
   const colors = useColors();
   const [modalVisible, setModalVisible] = useState(false);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
   const { bottom } = useSafeAreaInsets();
 
   // Animation values
   const backdropOpacity = useSharedValue(0);
   const contentTranslateY = useSharedValue(1000);
 
+  // Memoized keyboard vertical offset based on platform and keyboard state
+  const keyboardVerticalOffsetValue =
+    Platform.OS === "ios" ? -bottom : -bottom * 2;
+
+  // Keyboard event listeners
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      "keyboardDidShow",
+      () => {
+        setKeyboardVisible(true);
+      }
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      "keyboardDidHide",
+      () => {
+        setKeyboardVisible(false);
+      }
+    );
+
+    return () => {
+      keyboardDidHideListener?.remove();
+      keyboardDidShowListener?.remove();
+    };
+  }, []);
+
   // Trigger animations when open prop changes
   useEffect(() => {
     if (open) {
@@ -86,14 +114,16 @@ 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,
+      marginBottom: Platform.OS === "android" && keyboardVisible ? bottom : 0,
     },
     container: {
       paddingBottom: sheet && !bare ? bottom + ms(10) : undefined,
@@ -141,29 +171,31 @@ 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"}
-          keyboardVerticalOffset={keyboardVerticalOffset}
+          keyboardVerticalOffset={
+            keyboardVerticalOffset || keyboardVerticalOffsetValue
+          }
         >
           <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}
+                layout={LinearTransition.springify()
+                  .stiffness(200)
+                  .mass(0.5)
+                  .damping(100)}
               >
-                <Animated.View
-                  // layout={LinearTransition}
-                  style={styles.container}
-                >
+                <View style={styles.container}>
                   {!bare && (
                     <View style={styles.title}>
                       <View style={styles.titleIcon}>
@@ -180,7 +212,7 @@ export const Popup: React.FC<PopupProps> = ({
                   )}
 
                   <View style={styles.content}>{children}</View>
-                </Animated.View>
+                </View>
               </Animated.View>
             </View>
           </TouchableWithoutFeedback>