borderColor attribute overrides other ones

[Nor01]

I've encountered styling issues while using the utility function to display notifications. Specifically, I noticed unexpected behavior regarding border colors.

Current behaviour

In the code example, observe the defaultToastStyle variable. I set the borderColor, intending to apply it to all sides, and then attempted to specify a different color for the left border using borderLeftColor. However, the left border color does not override the borderColor as expected.

Expected behaviour

I anticipated seeing gray border colors on all sides except for the left border, which should be other.

Code sample

import { colors } from "@theme"

import { TextStyle, ViewStyle } from "react-native"
import { Toast } from "react-native-toast-notifications"

type ToastType = "normal" | "success" | "warning" | "danger" | "custom"

interface CustomToastOptions {
  message: string
  type?: ToastType
  placement?: "top" | "bottom"
  duration?: number
  style?: ViewStyle
  animationType?: "slide-in" | "zoom-in"
  fontStyle?: TextStyle
}

const defaultFontStyle: TextStyle = {
  fontSize: 16,
  color: colors.toast_font_color,
  fontFamily: "Poppins-400",
}

const defaultToastStyle: ViewStyle = {
  borderColor: "gray",
  borderStyle: "solid",
  borderWidth: 1,
  backgroundColor: "white",
  width: "100%",
  shadowColor: "#000",
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 8,
  elevation: 5,
}

const toastTypeStyles: Record<ToastType, Partial<ViewStyle>> = {
  success: {
    borderLeftColor: "green",
    borderLeftWidth: 5,
  },
  danger: {
    borderLeftColor: "red",
    borderLeftWidth: 5,
  },
  normal: {
    borderLeftColor: "blue",
    borderLeftWidth: 5,
  },
  warning: {
    borderLeftColor: "yellow",
    borderLeftWidth: 5,
  },
  custom: {},
}

export function showToast({
  message,
  type,
  placement = "top",
  duration = 3000,
  style = {},
  animationType = "zoom-in",
  fontStyle = defaultFontStyle,
}: CustomToastOptions) {
  const toastMessage = message

  const mergedStyle: ViewStyle = {
    ...defaultToastStyle,
    ...style,
    ...toastTypeStyles[type || "normal"],
  }

  Toast.show(toastMessage, {
    type,
    placement,
    duration,
    style: mergedStyle,
    animationType,
    textStyle: fontStyle,
  })
}

Screenshots (if applicable)

This is the bug:

This is the expected result:

What have you tried

While individually specifying colors for each border (borderLeftColor, borderRightColor, borderTopColor, borderBottomColor) works correctly, using borderColor followed by modifying a specific border color does not produce the expected result.

I have also tried to do something like:

const defaultToastStyle: ViewStyle = {
  borderColor: "gray",
  borderLeftColor: "red",
  borderStyle: "solid",
  borderWidth: 1,
  backgroundColor: "white",
  width: "100%",
  shadowColor: "#000",
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 8,
  elevation: 5,
}

Your Environment

software	version
ios or android	both
react-native	0.71.14
react-native-toast-notifications	^3.4.0
node	v20.11.0
npm or yarn	npm 10.5.0