toastify-react-native icon indicating copy to clipboard operation
toastify-react-native copied to clipboard

How to show multiple toasts at the same time?

Open VimalSwaroop opened this issue 8 months ago โ€ข 6 comments

when i try to trigget multiple toasts, the new one overrides the previous one. <Button onPress={() => { Toast.show({ type: 'success', text1: 'Hello', position: 'bottom', }) Toast.show({ type: 'error', text1: 'Hello', position: 'top', }) // addToast() }} > <Text>Toast</Text> </Button>

VimalSwaroop avatar Apr 15 '25 18:04 VimalSwaroop

Hey @VimalSwaroop โ€” thanks for bringing this up!

Currently, toastify-react-native only supports displaying one toast at a time, so a new toast will override the previous one. This was a design decision to keep things simple and avoid overlapping toasts creating UI clutter.

That said, support for multiple simultaneous toasts is on the roadmap, and I plan to implement it in a future version. Iโ€™ll keep this thread updated as soon as thereโ€™s progress on that.

Appreciate your patience โ€” and feel free to drop any thoughts or suggestions! ๐Ÿ™Œ

zahidalidev avatar Apr 16 '25 20:04 zahidalidev

Thanks a lot @zahidalidev. One more question. I see the props type is any, I guess this has to be ToastManagerProps should export default function ToastProvider(props: any) be written as export default function ToastProvider(props: ToastManagerProps)

Currently i am using it as below `import ToastManager from 'toastify-react-native' import { ToastManagerProps } from 'toastify-react-native/utils/interfaces'

const toastManagerConfig: ToastManagerProps = { theme: theme, position: 'bottom', }

<ToastManager {...toastManagerConfig} />`

VimalSwaroop avatar Apr 16 '25 20:04 VimalSwaroop

I seccond that this is a must !! AND PLEASE ... !!! Show toast in 'stack' order (oldest -> newest) this way if a onpress or onclose creates dependency for the 2nd onpress or close its not gonna break.

Also if people want the 'inverse' stack order a props to the manager is considerable like 'queueOrder: "fifo" | "lifo"'

As i understand for the 'multiple' behavior it would just need a ToastRef cache ? And the manager would just have to render forEach => 'activeRef'

Izocel avatar Jul 24 '25 11:07 Izocel

This behaviour is required in the project i am working on. is there a way to have multiple toasts in with this package?

ndukachukz avatar Sep 10 '25 12:09 ndukachukz

@zahidalidev Please how do I show multiple toasts

ndukachukz avatar Sep 10 '25 12:09 ndukachukz

+1

v1narth avatar Oct 08 '25 13:10 v1narth