SeaGateway-App/config/toast.tsx

import { MaterialIcons } from "@expo/vector-icons";
import { View } from "react-native";
import {
  BaseToast,
  BaseToastProps,
  SuccessToast,
} from "react-native-toast-message";

export const Colors: any = {
  light: {
    text: "#000",
    back: "#ffffff",
  },
  dark: {
    text: "#ffffff",
    back: "#2B2D2E",
  },
  default: "#3498db",
  info: "#3498db",
  success: "#07bc0c",
  warn: {
    background: "#ffffff",
    text: "black",
    iconColor: "#f1c40f",
  },
  error: {
    background: "#ffffff",
    text: "black",
    iconColor: "#e74c3c",
  },
  textDefault: "#4c4c4c",
  textDark: "black",
};

export const toastConfig = {
  success: (props: BaseToastProps) => (
    <SuccessToast
      {...props}
      style={{
        borderLeftColor: Colors.success,
        backgroundColor: Colors.success,
        borderRadius: 10,
      }}
      contentContainerStyle={{
        paddingHorizontal: 10,
      }}
      text1Style={{
        color: "white",
        fontSize: 16,
        fontWeight: "600",
      }}
      text2Style={{
        color: "#f0f0f0",
      }}
      renderLeadingIcon={() => (
        <View
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            width: 40,
            height: "100%",
          }}
        >
          <MaterialIcons name="check-circle" size={30} color="white" />
        </View>
      )}
    />
  ),
  default: (props: BaseToastProps) => (
    <BaseToast
      {...props}
      style={{
        borderLeftColor: Colors.default,
        backgroundColor: Colors.default,
        borderRadius: 10,
      }}
      contentContainerStyle={{
        paddingHorizontal: 10,
      }}
      text1Style={{
        color: "white",
        fontSize: 16,
        fontWeight: "600",
      }}
      text2Style={{
        color: "#f0f0f0",
      }}
      renderLeadingIcon={() => (
        <View
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            width: 50,
            height: "100%",
          }}
        >
          <MaterialIcons name="info" size={30} color="white" />
        </View>
      )}
    />
  ),
  info: (props: BaseToastProps) => (
    <BaseToast
      {...props}
      style={{
        borderLeftColor: Colors.info,
        backgroundColor: Colors.info,
        borderRadius: 10,
      }}
      contentContainerStyle={{
        paddingHorizontal: 10,
      }}
      text1Style={{
        color: "white",
        fontSize: 16,
        fontWeight: "600",
      }}
      text2Style={{
        color: "#f0f0f0",
      }}
      renderLeadingIcon={() => (
        <View
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            width: 50,
            height: "100%",
          }}
        >
          <MaterialIcons name="info-outline" size={30} color="white" />
        </View>
      )}
    />
  ),
  warn: (props: BaseToastProps) => (
    <BaseToast
      {...props}
      style={{
        borderLeftColor: Colors.warn.background,
        backgroundColor: Colors.warn.background,
        borderRadius: 10,
      }}
      contentContainerStyle={{
        paddingHorizontal: 10,
      }}
      text1Style={{
        color: Colors.warn.text,
        fontSize: 16,
        fontWeight: "600",
      }}
      text2Style={{
        color: "#333",
      }}
      renderLeadingIcon={() => (
        <View
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            width: 50,
            height: "100%",
          }}
        >
          <MaterialIcons
            name="warning"
            size={30}
            color={Colors.warn.iconColor}
          />
        </View>
      )}
    />
  ),
  error: (props: BaseToastProps) => (
    <BaseToast
      {...props}
      style={{
        borderLeftColor: Colors.error.background,
        backgroundColor: Colors.error.background,
        borderRadius: 10,
      }}
      contentContainerStyle={{
        paddingHorizontal: 10,
      }}
      text1Style={{
        color: Colors.error.text,
        fontSize: 16,
        fontWeight: "600",
      }}
      text2Style={{
        color: "#f0f0f0",
      }}
      renderLeadingIcon={() => (
        <View
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            width: 50,
            height: "100%",
          }}
        >
          <MaterialIcons
            name="error"
            size={30}
            color={Colors.error.iconColor}
          />
        </View>
      )}
    />
  ),
};