zahidalidev
Feature Request: Support customizing close icon via icons prop in ToastManager & iOS icon rendering issue
Currently, the icons prop in ToastManager allows customization of the icons for success, error, info, warn, and default toast types. However, there is no way to customize the close icon using this prop. The close icon is always rendered as the default (e.g., "close" from the default icon family), and adding a close key to the icons object has no effect. Additionally, there is an issue on iOS where icons do not render at all unless the icons prop is explicitly set in ToastManager. This can lead to missing icons for success, error, etc., even when the default icon family is available and properly linked. Proposed Solution: Allow the icons prop to accept a close key. If icons.close is provided, use it as the icon name for the close button. If not provided, fall back to the current default close icon. Ensure that icons render correctly on iOS even if the icons prop is not explicitly set, using sensible defaults.
Example Usage:
<ToastManager icons={{ success: "check-circle", error: "error", info: "info", warn: "warning", default: "notifications", close: "cancel", // <-- new: customize close icon }} iconFamily="MaterialIcons" iconSize={24} />
Benifits: Benefits: Consistent icon customization for all toast elements, including the close icon. No need to use a custom toast component just to change the close icon. Ensures icons always render correctly on iOS, improving cross-platform consistency. Easier to match app branding or accessibility requirements.
References: https://www.npmjs.com/package/toastify-react-native#customizing-icons
Thank you for your work on this library!
Issue: When u use ToastManager with "icons" and "iconFamily" as "MaterialIcons" prop as below, in ios, close icon is not rendered and showing ? in place of icon when showCloseIcon set to true
<ToastManager icons={{ success: "check-circle", error: "error", info: "info", warn: "warning", default: "notifications" }} iconFamily="MaterialIcons" iconSize={24} showCloseIcon={true} />
Workaround:
Use ionicons as iconFamily and use corresponding icons for success, error, info and warn as below and it works.
<ToastManager theme={isDarkMode ? "dark" : "light"} position="top" showProgressBar={true} showCloseIcon={true} icons={{ success: "checkmark-circle", error: "alert-circle", info: "information-circle", warn: "warning", default: "notifications", }} iconFamily="ionicons" iconSize={24} duration={3000} />
