After toast shown within Modal, main instance outside of Modal doesn't work anymore
See original GitHub issueFirst of all, this lib is fantastic. And v2 is great. Thank you!
Describe the bug
I have two Toast
instances setup. One alongside NavigationContainer
from react-navigation
, and one within Modal
.
When I show a toast outside of the modal, it shows fine. And when I show a toast inside of the Modal when it’s visible, it works fine. However, when I try to show a toast again outside of the Modal, it doesn’t show. Bringing up the Modal again shows the modals within the modal fine still.
So it’s almost as if it’s not tracking the correct instance and only tracks the Modal instance once Modal shows a toast.
Steps to reproduce Steps to reproduce the behavior:
- Show a toast when a Modal is not visible.
- Make a Modal visible.
- Show a toast. It shows on top of the Modal.
- Make the modal not visible anymore.
- Show a toast. It doesn’t show.
- Make the Modal visible again. It shows on top of the Modal.
Expected behavior The toasts once a modal is no longer visible should show/hide properly.
Screenshots This video shows this happening with a demo screen i have.
https://user-images.githubusercontent.com/5117473/140588648-938b1a60-876e-4d99-b0ff-55400eda0319.mp4
Code sample I can provide this next week if needed. It would take some time to replicate what I’ve done and extract to a sample project. But let me know if it’s not easily reproducible with more tests.
Environment (please complete the following information):
- OS: iOS, Android
- react-native-toast-message version: v2.0.1
- react-native version: v0.64.2
Additional context
Likely related, but if you try to call Toast.hide()
(like in a close button’s onPress) on a toast that was shown and still on screen when a Modal becomes visible, it doesn’t hide. The close button tap doesn’t work. Swiping to dismiss still works, however.
This is showing a toast being shown just before the bottom modal appears, and how it can’t be dismissed using Toast.hide()
afterwards.
https://user-images.githubusercontent.com/5117473/140588724-3b9403ac-e5c5-4204-97c7-e59ac0828da8.mp4
Possibly also related, but I noticed that if I pass autoHide: false
via Toast.show
for the Toast instance within the Modal (which has autoHide set to true), it still auto hides despite indicating to not.
Issue Analytics
- State:
- Created 2 years ago
- Comments:15 (13 by maintainers)
Top GitHub Comments
Here’s a demo project that works like the videos i put above! https://github.com/jstheoriginal/RNToastMessageExample
@jstheoriginal Taking a deeper look today. I like the idea of completely handling refs internally 👍