gluestack-ui
gluestack-ui copied to clipboard
gluestack
useToast not available when used in a component rendered inside a Modal
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 <Modal>
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.
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)
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:
Hi, I have the same issue like @vaniyokk. It would be nice if it's possible to use a toast for a modal.
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).
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?
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.
@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.
