react-native-toast-message: After toast shown within Modal, main instance outside of Modal doesn't work anymore
First 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.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 15 (13 by maintainers)
Commits related to this issue
- fix: toast ref update when showing a modal fixes #279 — committed to calintamas/react-native-toast-message by calintamas 3 years ago
- fix: toast ref update when showing a modal fixes #279 — committed to calintamas/react-native-toast-message by calintamas 3 years ago
- fix: toast ref update when showing a modal fixes #279 — committed to calintamas/react-native-toast-message by calintamas 3 years ago
- fix: toast ref update when showing a modal fixes #279 — committed to calintamas/react-native-toast-message by calintamas 3 years ago
- feat: add `nestingLevel` prop To be able to show Toasts inside multiple levels of Modal nesting. Fixes #279 — committed to calintamas/react-native-toast-message by calintamas 3 years ago
Here’s a demo project that works like the videos i put above! https://github.com/jstheoriginal/RNToastMessageExample