Add custom snackbar

components/common/CustomSnackbar.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import { Snackbar, Portal } from "react-native-paper";
+import { StyleSheet, Text } from "react-native";
+
+interface CustomSnackbarProps {
+  message: string;
+  bgColor: string;
+  textColor: string;
+  duration: number;
+  visible: boolean;
+  onDismiss: () => void;
+}
+
+const CustomSnackbar: React.FC<CustomSnackbarProps> = ({
+  message,
+  bgColor,
+  textColor,
+  duration,
+  visible,
+  onDismiss,
+}) => {
+  useEffect(() => {
+    if (visible) {
+      const timer = setTimeout(() => {
+        onDismiss();
+      }, duration * 1000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [visible, duration, onDismiss]);
+
+  return (
+    <Snackbar
+      visible={true}
+      onDismiss={onDismiss}
+      style={[
+        styles.snackbar,
+        { backgroundColor: bgColor, zIndex: 999, elevation: 999 },
+      ]}
+      duration={Snackbar.DURATION_SHORT}
+    >
+      <Text style={{ color: textColor, ...styles.message }}>{message}</Text>
+    </Snackbar>
+  );
+};
+
+const styles = StyleSheet.create({
+  message: {
+    fontStyle: "normal",
+    fontWeight: "bold",
+  },
+  success: {
+    color: "#242C3B",
+  },
+  error: {
+    color: "#D51D10",
+  },
+  snackbar: {
+    borderRadius: 5,
+    marginBottom: 60,
+    color: "#242C3B",
+  },
+});
+
+export default CustomSnackbar;

components/home/CustomerSupportModal.tsx

@@ -97,10 +97,10 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
   },
   header: {
-    height: 56,
     borderBottomWidth: 1,
     borderBottomColor: "#E5E9F0",
     paddingHorizontal: 16,
+    paddingVertical: 8,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",

contexts/Snackbar.tsx

@@ -0,0 +1,73 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+import CustomSnackbar from "../components/common/CustomSnackbar";
+
+interface SnackbarContextProps {
+  showSnackbar: (message: string, type: "success" | "error") => void;
+}
+
+const SnackbarContext = createContext<SnackbarContextProps | undefined>(
+  undefined
+);
+
+export const useSnackbar = () => {
+  const context = useContext(SnackbarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return context;
+};
+
+interface SnackbarProviderProps {
+  children: ReactNode;
+}
+
+export const SnackbarProvider: React.FC<SnackbarProviderProps> = ({
+  children,
+}) => {
+  const [snackbar, setSnackbar] = useState({
+    message: "",
+    bgColor: "",
+    textColor: "",
+    duration: 2,
+    visible: false,
+  });
+
+  const showSnackbar = (
+    message: string,
+    type: "success" | "error" | "info"
+  ) => {
+    const bgColor =
+      type === "success" ? "#DFF2E9" : type === "error" ? "#FDEDED" : "#E0F7FA";
+    const textColor =
+      type === "success" ? "#242C3B" : type === "error" ? "#D51D10" : "#00796B";
+    setSnackbar({
+      message,
+      bgColor,
+      textColor,
+      duration: 2,
+      visible: true,
+    });
+  };
+
+  const hideSnackbar = () => {
+    setSnackbar((prevSnackbar) => ({
+      ...prevSnackbar,
+      visible: false,
+    }));
+  };
+
+  return (
+    <SnackbarContext.Provider value={{ showSnackbar }}>
+      {children}
+      <CustomSnackbar
+        message={snackbar.message}
+        bgColor={snackbar.bgColor}
+        textColor={snackbar.textColor}
+        duration={snackbar.duration}
+        visible={snackbar.visible}
+        onDismiss={hideSnackbar}
+      />
+    </SnackbarContext.Provider>
+  );
+};
+export default SnackbarProvider;