useToast not available when used in a component rendered inside a Modal

[milesingrams]

Description

useToast not available when used in a component rendered inside a Modal

CodeSandbox/Snack link

No response

Steps to reproduce

Create a component that calls useToast and put in inside a

gluestack-ui Version

@gluestack-ui/themed 1.1.8

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

This is probably because the overlay provider renders modals outside the toast provider? Not 100% sure but a guess. Ideally useToast could be used by modals or any other overlay.

[Viraj-10]

Hey @milesingrams , Thanks for reporting the issue. We will have a look.

[gregamann]

Hey ! Same behaviour for me with a screen rendered as a modal (presentation: 'modal') Toast appears behind (when I drag down modal to close it)

[vaniyokk]

Same issue for React Native CLI, if using useToast inside Modal. It's not a presentation issue, it's something related to Modal vs Toast rendering context / providers.

Error is:

[ruettenm]

Hi, I have the same issue like @vaniyokk. It would be nice if it's possible to use a toast for a modal.

[tmaly1980]

Hey @milesingrams , Thanks for reporting the issue. We will have a look.

Any update? It's been a month since this was reported and I can't use toasts when a modal is open (it appears underneath).

[vaniyokk]

I was able to get rid of AnimatePresence null pointer exception by monkey-patching node_modules/@gluestack-ui/actionsheet/src/Actionsheet.tsx and wrapping children into ToastProvider exported from node_modules/@gluestack-ui/toast/src/Toast.tsx.

I'm not sure about consequences to performance and design but seems like it helps to mitigate all errors.

BTW I don't have issue with Toast being shown under the modal, as @gregamann reported.

@Viraj-10 maybe you can consider adding Toast providers to every native modal components to allow Toast usage inside?

[lhguerra]

That sounds weird, we shouldn't need more than one toast provider. Or it sould be exported so we can at least use it in these weird contexts.

[vaniyokk]

@lhguerra it's a common pattern due to nature of native modals in RN and pretty much every toast library relying on separate toast providers inside context of native modals https://github.com/calintamas/react-native-toast-message/blob/HEAD/docs/modal-usage.md https://github.com/arnnis/react-native-toast-notifications?tab=readme-ov-file#--how-to-show-toast-inside-a-modal https://github.com/backpackapp-io/react-native-toast?tab=readme-ov-file#providerkey-string--optional

I believe there is no better solution out there, and probably gluestack could handle this as well on library level, implementing toast providers in modal components.

[zainuwachtig]

Any updates on this?