@hoddy-ui/core 2.5.9 → 2.5.10

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.51",
+  "version": "2.0.52",
   "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.10",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/Popup.tsx

@@ -17,19 +17,19 @@ import Animated, {
   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 +40,37 @@ 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" ? -10 : -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) {
@@ -94,6 +119,7 @@ export const Popup: React.FC<PopupProps> = ({
       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,
@@ -144,7 +170,9 @@ export const Popup: React.FC<PopupProps> = ({
         <KeyboardAvoidingView
           style={styles.keyboardView}
           behavior={Platform.OS === "ios" ? "padding" : "height"}
-          keyboardVerticalOffset={keyboardVerticalOffset}
+          keyboardVerticalOffset={
+            keyboardVerticalOffset || keyboardVerticalOffsetValue
+          }
         >
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.root}>
@@ -158,9 +186,9 @@ export const Popup: React.FC<PopupProps> = ({
 
               <Animated.View
                 style={[styles.avoidingView, contentAnimatedStyle]}
-                layout={LinearTransition}
+                layout={LinearTransition.springify(1)}
               >
-                <Animated.View
+                <View
                   // layout={LinearTransition}
                   style={styles.container}
                 >
@@ -180,7 +208,7 @@ export const Popup: React.FC<PopupProps> = ({
                   )}
 
                   <View style={styles.content}>{children}</View>
-                </Animated.View>
+                </View>
               </Animated.View>
             </View>
           </TouchableWithoutFeedback>