@hoddy-ui/core 1.0.51 → 1.0.53

package/package.json

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

package/src/Components/Button.tsx

@@ -2,7 +2,7 @@ import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import React from "react";
 import { ActivityIndicator, Text, TouchableOpacity } from "react-native";
 import { ScaledSheet, moderateScale } from "react-native-size-matters";
-import { useColors } from "../hooks";
+import { useColors, useTheme } from "../hooks";
 import { ButtonProps, IconButtonProps, LinkButtonProps } from "../types";
 
 export const LinkButton: React.FC<LinkButtonProps> = ({
@@ -43,16 +43,13 @@ export const IconButton: React.FC<IconButtonProps> = ({
   iconType = "material",
 }) => {
   const colors = useColors();
-
+  const bgColor = heme === "light" ? "#fff" : "#222";
+  const theme = useTheme();
   const styles: any = ScaledSheet.create({
     container: {
       alignSelf: "flex-start",
       flexGrow: 0,
-      backgroundColor: bg
-        ? colors.white[1]
-        : elevation! > 0
-        ? colors.white[1]
-        : null,
+      backgroundColor: bg ? bgColor : elevation! > 0 ? bgColor : null,
       padding: "5@ms",
       shadowColor: "#000",
       shadowOpacity: 0.1,
@@ -66,7 +63,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
       justifyContent: "center",
       shadowRadius: elevation,
       elevation: elevation,
-      borderRadius: size,
+      borderRadius: size * 5,
     },
     text: {
       color: disabled ? "#777" : colors[color].main,

package/src/Components/Popup.tsx

@@ -23,12 +23,14 @@ export const Popup: React.FC<PopupProps> = ({
 }) => {
   const colors = useColors();
   const [show, setShow] = useState(open);
+  const [showSecondary, setShowSecondary] = useState(false);
 
   const styles: any = ScaledSheet.create({
     avoidingView: {
       marginTop: sheet ? "auto" : "50%",
       minHeight: typeof sheet === "number" ? sheet : undefined,
       maxHeight: "80%",
+      zIndex: 1000,
       alignSelf: "center",
       maxWidth: sheet ? undefined : "90%",
       width: sheet ? "100%" : undefined,
@@ -56,14 +58,17 @@ export const Popup: React.FC<PopupProps> = ({
     backdrop: {
       position: "absolute",
       height: "100%",
+      zIndex: -1,
       width: "100%",
-      zIndex: 10000,
       backgroundColor: "#000b",
     },
   });
 
   React.useEffect(() => {
     setShow(open);
+    setTimeout(() => {
+      setShowSecondary(open);
+    }, 500);
   }, [open]);
 
   const closeAction = () => {
@@ -79,11 +84,12 @@ export const Popup: React.FC<PopupProps> = ({
         visible={show}
         onRequestClose={() => setShow(false)}
       >
-        <Pressable style={styles.backdrop} />
+        <View style={styles.backdrop} />
+
         <Modal
           transparent
           animationType="slide"
-          visible={show}
+          visible={showSecondary}
           onRequestClose={() => setShow(false)}
         >
           {open && (