@hoddy-ui/core 1.1.4 → 2.0.35

package/src/Components/FlashMessage.tsx

@@ -1,47 +1,111 @@
-import React, { useEffect, useState } from "react";
-import {
-  LayoutAnimation,
-  Touchable,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
-import { MaterialIcons } from "@expo/vector-icons";
 import { FlashMessageProps } from "../types";
 import Typography from "./Typography";
 
-export let showFlashMessage: (msg: FlashMessageProps) => void = () => {};
+// Event-based API to decouple the trigger from the component instance
+type FlashListener = (msg: FlashMessageProps) => void;
+const flashListeners = new Set<FlashListener>();
+
+export const showFlashMessage = (msg: FlashMessageProps) => {
+  flashListeners.forEach((listener) => listener(msg));
+};
+
+const subscribeToFlashMessages = (listener: FlashListener) => {
+  flashListeners.add(listener);
+  return () => {
+    flashListeners.delete(listener);
+  };
+};
 
 const FlashMessage: React.FC = () => {
   const { top } = useSafeAreaInsets();
   const [message, setMessage] = useState<null | FlashMessageProps>(null);
-  const [show, setShow] = useState(false);
   const colors = useColors();
   const type = message?.type || "success";
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Animated values
+  const translateY = useSharedValue(-200);
+  const opacity = useSharedValue(0);
+
+  const hideMessage = () => {
+    setMessage(null);
+  };
+
+  const closeMessage = () => {
+    // Clear existing timeout if any
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
 
-  showFlashMessage = (msg: FlashMessageProps) => {
-    setMessage(msg);
-    setTimeout(() => {
-      setShow(true);
-    }, 50);
-
-    setTimeout(() => {
-      setShow(false);
-      setTimeout(() => {
-        setMessage(null);
-      }, 500);
-    }, msg.duration || 3000);
+    // Animate out immediately
+    translateY.value = withTiming(-200, { duration: 300 });
+    opacity.value = withTiming(0, { duration: 300 }, () => {
+      runOnJS(hideMessage)();
+    });
   };
+
   useEffect(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  }, [show]);
+    const listener: FlashListener = (msg) => {
+      // Clear existing timeout if any
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+
+      // Reset position immediately before starting new animation
+      translateY.value = -200;
+      opacity.value = 0;
+
+      setMessage(msg);
+
+      // Animate in
+      translateY.value = withTiming(0, { duration: 300 });
+      opacity.value = withTiming(1, { duration: 300 });
+
+      // Animate out after duration
+      const duration = msg.duration || 3000;
+      timeoutRef.current = setTimeout(() => {
+        translateY.value = withTiming(-200, { duration: 300 });
+        opacity.value = withTiming(0, { duration: 300 }, () => {
+          runOnJS(hideMessage)();
+        });
+        timeoutRef.current = null;
+      }, duration);
+    };
+
+    const unsubscribe = subscribeToFlashMessages(listener);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      unsubscribe();
+    };
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value,
+    };
+  });
 
   const styles = ScaledSheet.create({
     root: {
       position: "absolute",
-      top: show ? 0 : -200,
+      top: 0,
       zIndex: 1000,
       left: 0,
       paddingTop: top + 10,
@@ -64,33 +128,46 @@ const FlashMessage: React.FC = () => {
     },
   });
 
+  if (!message) return null;
+
   return (
-    <View style={styles.root}>
-      <View style={{ flexDirection: "row" }}>
-        <View style={{ flex: 1, marginRight: 10 }}>
-          {message?.title && (
-            <Typography
-              variant="h6"
-              fontWeight={600}
-              gutterBottom={3}
-              style={{ color: "#fff" }}
-            >
-              {message?.title}
+    <Animated.View style={[styles.root, animatedStyle]}>
+      <TouchableOpacity onPress={closeMessage} activeOpacity={0.9}>
+        <View style={{ flexDirection: "row" }}>
+          <View style={{ flex: 1, marginRight: 10 }}>
+            {message?.title && (
+              <Typography
+                variant="h6"
+                fontWeight={600}
+                gutterBottom={3}
+                style={{ color: "#fff" }}
+              >
+                {message?.title}
+              </Typography>
+            )}
+            <Typography style={{ color: "#fff" }}>
+              {message?.message}
             </Typography>
-          )}
-          <Typography style={{ color: "#fff" }}>{message?.message}</Typography>
+          </View>
+          {/* <MaterialIcons color="#fff" size={36} name="error-outline" /> */}
         </View>
-        {/* <MaterialIcons color="#fff" size={36} name="error-outline" /> */}
-      </View>
+      </TouchableOpacity>
 
       {message?.actions?.map((cur, i) => (
-        <TouchableOpacity key={i} style={styles.action} onPress={cur.onPress}>
+        <TouchableOpacity
+          key={i}
+          style={styles.action}
+          onPress={() => {
+            cur.onPress?.();
+            closeMessage();
+          }}
+        >
           <Typography fontWeight={700} style={{ color: "#fff" }}>
             {cur.title}
           </Typography>
         </TouchableOpacity>
       ))}
-    </View>
+    </Animated.View>
   );
 };
 

package/src/Components/FormWrapper.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import { ScaledSheet } from "react-native-size-matters";
 import { FormWrapperProps } from "../types";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 export const FormWrapper: React.FC<FormWrapperProps> = ({
   children,
   behavior = Platform.OS === "ios" ? "padding" : "height",
@@ -17,6 +18,9 @@ export const FormWrapper: React.FC<FormWrapperProps> = ({
   style = {},
   onScroll,
 }) => {
+  const { bottom } = useSafeAreaInsets();
+
+  const defaultOffset = Platform.OS === "ios" ? -bottom : -bottom * 2;
   const styles = ScaledSheet.create({
     root: {
       width: "100%",
@@ -24,13 +28,14 @@ export const FormWrapper: React.FC<FormWrapperProps> = ({
       ...style,
     },
   });
+
   return mode === "static" ? (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
       <KeyboardAvoidingView
         style={styles.root}
         behavior={behavior}
         contentContainerStyle={styles.root}
-        keyboardVerticalOffset={keyboardVerticalOffset}
+        keyboardVerticalOffset={keyboardVerticalOffset || defaultOffset}
       >
         {children}
       </KeyboardAvoidingView>
@@ -39,7 +44,7 @@ export const FormWrapper: React.FC<FormWrapperProps> = ({
     <KeyboardAvoidingView
       behavior={behavior}
       style={styles.root}
-      keyboardVerticalOffset={keyboardVerticalOffset}
+      keyboardVerticalOffset={keyboardVerticalOffset || defaultOffset}
     >
       <ScrollView
         onScroll={onScroll}

package/src/Components/Grid.tsx

@@ -1,6 +1,6 @@
-import { View, Text } from "react-native";
 import React from "react";
-import { ScaledSheet } from "react-native-size-matters";
+import { View } from "react-native";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { GridItemProps, GridProps } from "../types";
 
 export const GridItem: React.FC<GridItemProps> = ({
@@ -12,8 +12,8 @@ export const GridItem: React.FC<GridItemProps> = ({
 }) => {
   const styles = ScaledSheet.create({
     gridItem: {
-      width: 100 / col + "%",
-      padding: spacing * 10 + "@ms",
+      width: `${100 / col}%`,
+      padding: ms(spacing * 10),
       alignItems: alignItems,
     },
   });
@@ -27,7 +27,7 @@ export const Grid: React.FC<GridProps> = ({
   const styles = ScaledSheet.create({
     grid: {
       flexWrap: "wrap",
-      margin: -spacing * 10 + "@ms",
+      margin: `${-spacing * 10}@ms`,
       flexDirection: "row",
     },
   });

package/src/Components/Locator.tsx

@@ -15,6 +15,7 @@ import Typography from "./Typography";
 export type predictionType = {
   id: string;
   description: string;
+  types: string[];
 };
 export const getPredictionsFromCoords = async (coords: {
   latitude: number;
@@ -36,10 +37,15 @@ export const getPredictionsFromCoords = async (coords: {
   const p = [];
 
   for (let key in res.results) {
-    const { formatted_address: description, place_id } = res.results[key];
+    const {
+      formatted_address: description,
+      place_id,
+      types,
+    } = res.results[key];
     p.push({
       description,
       id: place_id,
+      types,
       latLng: { lst: coords.latitude, lng: coords.longitude },
     });
   }
@@ -57,10 +63,11 @@ export const getPredictionsFromQuery = async (
 
   const p = [];
   for (let key in res.predictions) {
-    const { description, place_id } = res.predictions[key];
+    const { description, place_id, types } = res.predictions[key];
     p.push({
       description,
       id: place_id,
+      types,
     });
   }
   return p;
@@ -115,6 +122,7 @@ export const Locator: React.FC<LocatorProps> = ({
       shadowRadius: float ? 15 : 0,
       shadowOffset: {
         height: 10,
+        width: 0,
       },
       borderRadius: 10,
       marginBottom: 10,

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) {

package/src/Components/Popup.tsx

@@ -9,28 +9,110 @@ import {
   View,
 } from "react-native";
 
-import React, { useState } from "react";
-import { ScaledSheet } from "react-native-size-matters";
+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 { UIThemeProvider } from "../theme";
 
 export const Popup: React.FC<PopupProps> = ({
   title,
-  sheet,
+  sheet = true,
   bare = false,
   keyboardVerticalOffset,
   children,
   open,
   onClose = () => {},
   style,
+  onModalShow,
+  onModalHide,
+  disableAutoKeyboardManagement = false,
 }) => {
   const theme = useTheme();
   const colors = useColors();
-  const [show, setShow] = useState(open);
-  const [showSecondary, setShowSecondary] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalOpen, setModalOpen] = 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();
+    };
+  }, []);
+
+  const _onModalShow = () => {
+    setModalVisible(true);
+    onModalShow?.();
+  };
+  const _onModalHide = () => {
+    onModalHide?.();
+    setModalOpen(false);
+  };
+
+  // Trigger animations when open prop changes
+  useEffect(() => {
+    if (open) {
+      setModalOpen(true);
+      // Opening animation
+      backdropOpacity.value = withTiming(1, { duration: 300 });
+      contentTranslateY.value = withTiming(0, { duration: 300 }, () => {
+        runOnJS(_onModalShow)();
+      });
+    } else {
+      // Closing animation
+      setModalVisible(false);
+
+      backdropOpacity.value = withTiming(0, { duration: 200 });
+      contentTranslateY.value = withTiming(1000, { duration: 200 }, () => {
+        runOnJS(_onModalHide)();
+      });
+    }
+  }, [open]);
+
+  // Animated styles
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  const contentAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: contentTranslateY.value }],
+  }));
 
   const styles: any = ScaledSheet.create({
     root: {
@@ -38,28 +120,32 @@ export const Popup: React.FC<PopupProps> = ({
       width: "100%",
       justifyContent: sheet ? "flex-end" : "center",
     },
+    keyboardView: {
+      flex: 1,
+      zIndex: 1000,
+    },
     avoidingView: {
+      zIndex: 2,
       minHeight: typeof sheet === "number" ? sheet : undefined,
-      maxHeight: "80%",
-      zIndex: 1000,
+      maxHeight: "90%",
       alignSelf: "center",
       maxWidth: sheet ? undefined : "90%",
-
       width: sheet ? "100%" : undefined,
+      marginBottom: Platform.OS === "android" && keyboardVisible ? bottom : 0,
     },
     container: {
-      paddingBottom: sheet ? "30@ms" : 0,
-      backgroundColor: theme === "dark" ? "#111" : colors.white[2],
+      paddingBottom: sheet && !bare ? bottom + ms(10) : undefined,
+      backgroundColor: theme === "dark" ? "#111" : colors.white[1],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
       borderBottomLeftRadius: sheet ? 0 : 20,
       width: "100%",
+      overflow: "hidden",
       ...style,
     },
     content: {
       paddingHorizontal: bare ? undefined : "15@ms",
-      // flex: 1,
     },
     title: {
       flexDirection: "row",
@@ -74,87 +160,79 @@ export const Popup: React.FC<PopupProps> = ({
     backdrop: {
       position: "absolute",
       height: "100%",
-      zIndex: -1,
+      zIndex: 1,
       width: "100%",
       backgroundColor: "#000b",
     },
   });
 
-  React.useEffect(() => {
-    if (open) {
-      setShow(open);
-      setTimeout(() => {
-        setShowSecondary(open);
-      }, 500);
-    } else {
-      closeAction();
-    }
-  }, [open]);
-
   const closeAction = () => {
-    setShowSecondary(false);
-    setTimeout(() => {
-      setShow(false);
-      onClose();
-    }, 300);
+    onClose();
   };
 
   return (
-    <>
-      <Modal
-        transparent
-        animationType="fade"
-        statusBarTranslucent
-        visible={show}
-        onRequestClose={closeAction}
-      >
-        <View style={styles.backdrop} />
-        <UIThemeProvider>
-          <Modal
-            transparent
-            animationType="slide"
-            statusBarTranslucent
-            visible={showSecondary}
-            onRequestClose={closeAction}
+    <Modal
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      visible={modalOpen}
+      onRequestClose={closeAction}
+    >
+      <UIThemeProvider>
+        <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
+        <KeyboardAvoidingView
+          style={styles.keyboardView}
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          keyboardVerticalOffset={
+            keyboardVerticalOffset || keyboardVerticalOffsetValue
+          }
+        >
+          <TouchableWithoutFeedback
+            onPress={Keyboard.dismiss}
+            disabled={disableAutoKeyboardManagement}
           >
-            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-              <View style={styles.root}>
-                {open && (
-                  <Pressable
-                    style={StyleSheet.absoluteFill}
-                    onPress={closeAction}
-                  />
-                )}
-
-                <KeyboardAvoidingView
-                  style={styles.avoidingView}
-                  keyboardVerticalOffset={keyboardVerticalOffset}
-                  behavior={Platform.OS === "ios" ? "position" : "padding"}
-                >
-                  <View style={styles.container}>
-                    {!bare && (
-                      <View style={styles.title}>
-                        <View style={styles.titleIcon}>
-                          <IconButton
-                            size={20}
-                            icon="close"
-                            onPress={closeAction}
-                          />
-                        </View>
-                        <Typography align="center" fontWeight={500}>
-                          {title}
-                        </Typography>
+            <View style={styles.root}>
+              {modalOpen && (
+                <Pressable
+                  style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
+                  onPress={closeAction}
+                />
+              )}
+
+              <Animated.View
+                style={[styles.avoidingView, contentAnimatedStyle]}
+                layout={
+                  modalVisible
+                    ? LinearTransition.springify()
+                        .stiffness(200)
+                        .mass(0.5)
+                        .damping(100)
+                    : undefined
+                }
+              >
+                <View style={styles.container}>
+                  {!bare && (
+                    <View style={styles.title}>
+                      <View style={styles.titleIcon}>
+                        <IconButton
+                          size={20}
+                          icon="close"
+                          onPress={closeAction}
+                        />
                       </View>
-                    )}
-
-                    <View style={styles.content}>{children}</View>
-                  </View>
-                </KeyboardAvoidingView>
-              </View>
-            </TouchableWithoutFeedback>
-          </Modal>
-        </UIThemeProvider>
-      </Modal>
-    </>
+                      <Typography align="center" fontWeight={500}>
+                        {title}
+                      </Typography>
+                    </View>
+                  )}
+
+                  <View style={styles.content}>{children}</View>
+                </View>
+              </Animated.View>
+            </View>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </UIThemeProvider>
+    </Modal>
   );
 };

package/src/Components/SafeAreaView.tsx

@@ -1,20 +1,20 @@
-import { SafeAreaView as Safe } from "react-native";
 import React from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import { Platform, StyleSheet } from "react-native";
-import { moderateScale } from "react-native-size-matters";
+import { StyleSheet, View } from "react-native";
 import { SafeAreaViewProps } from "../types";
 
-const styles = StyleSheet.create({
-  droidSafeArea: {
-    flex: 1,
-    paddingTop: Platform.OS === "android" ? moderateScale(35) : 0,
-  },
-});
-
 export const SafeAreaView: React.FC<SafeAreaViewProps> = ({
   children,
   style,
 }) => {
-  return <Safe style={{ ...styles.droidSafeArea, ...style }}>{children}</Safe>;
+  const { top, bottom } = useSafeAreaInsets();
+  const styles = StyleSheet.create({
+    root: {
+      paddingTop: top,
+      paddingBottom: bottom,
+      flex: 1,
+    },
+  });
+  return <View style={[styles.root, style]}>{children}</View>;
 };