@hoddy-ui/core 2.5.24 → 2.5.26

package/package.json

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

package/src/Components/Popup.tsx

@@ -42,6 +42,7 @@ export const Popup: React.FC<PopupProps> = ({
   const theme = useTheme();
   const colors = useColors();
   const [modalVisible, setModalVisible] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
   const { bottom } = useSafeAreaInsets();
 
@@ -74,25 +75,31 @@ export const Popup: React.FC<PopupProps> = ({
     };
   }, []);
 
+  const _onModalShow = () => {
+    setModalVisible(true);
+    onModalShow?.();
+  };
+  const _onModalHide = () => {
+    onModalHide?.();
+    setModalOpen(false);
+  };
+
   // Trigger animations when open prop changes
   useEffect(() => {
     if (open) {
-      setModalVisible(true);
+      setModalOpen(true);
       // Opening animation
       backdropOpacity.value = withTiming(1, { duration: 300 });
       contentTranslateY.value = withTiming(0, { duration: 300 }, () => {
-        if (onModalShow) {
-          runOnJS(onModalShow)();
-        }
+        runOnJS(_onModalShow)();
       });
     } else {
       // Closing animation
+      setModalVisible(false);
+
       backdropOpacity.value = withTiming(0, { duration: 200 });
       contentTranslateY.value = withTiming(1000, { duration: 200 }, () => {
-        runOnJS(setModalVisible)(false);
-        if (onModalHide) {
-          runOnJS(onModalHide)();
-        }
+        runOnJS(_onModalHide)();
       });
     }
   }, [open]);
@@ -167,7 +174,7 @@ export const Popup: React.FC<PopupProps> = ({
       transparent
       animationType="none"
       statusBarTranslucent
-      visible={modalVisible}
+      visible={modalOpen}
       onRequestClose={closeAction}
     >
       <UIThemeProvider>
@@ -181,7 +188,7 @@ export const Popup: React.FC<PopupProps> = ({
         >
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.root}>
-              {open && (
+              {modalOpen && (
                 <Pressable
                   style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
                   onPress={closeAction}
@@ -190,10 +197,14 @@ export const Popup: React.FC<PopupProps> = ({
 
               <Animated.View
                 style={[styles.avoidingView, contentAnimatedStyle]}
-                layout={LinearTransition.springify()
-                  .stiffness(200)
-                  .mass(0.5)
-                  .damping(100)}
+                layout={
+                  modalVisible
+                    ? LinearTransition.springify()
+                        .stiffness(200)
+                        .mass(0.5)
+                        .damping(100)
+                    : undefined
+                }
               >
                 <View style={styles.container}>
                   {!bare && (

package/src/hooks.ts

@@ -3,6 +3,7 @@ import { Platform, useColorScheme } from "react-native";
 import { UIThemeContext } from "./theme";
 import colors from "./theme/colors";
 import { ThemeModes, ThemeTypes } from "./types";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export const useColors = () => {
   const { themeState } = useContext(UIThemeContext);
@@ -21,8 +22,10 @@ export const useThemeContext = () => {
   const setTheme = (theme: ThemeModes) => {
     if (theme === "default") {
       themeDispatch?.({ type: "default", payload: colorScheme });
+      AsyncStorage.setItem("theme", "default");
     } else {
       themeDispatch?.({ type: theme });
+      AsyncStorage.setItem("theme", theme);
     }
   };
   return { theme, setTheme };