question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

After toast shown within Modal, main instance outside of Modal doesn't work anymore

See original GitHub issue

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:

  1. Show a toast when a Modal is not visible.
  2. Make a Modal visible.
  3. Show a toast. It shows on top of the Modal.
  4. Make the modal not visible anymore.
  5. Show a toast. It doesn’t show.
  6. 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:closed
  • Created 2 years ago
  • Comments:15 (13 by maintainers)

github_iconTop GitHub Comments

3reactions
jstheoriginalcommented, Nov 6, 2021

Here’s a demo project that works like the videos i put above! https://github.com/jstheoriginal/RNToastMessageExample

0reactions
calintamascommented, Dec 7, 2021

@calintamas Just put up this PR. Let me know what you think. #293

@jstheoriginal Taking a deeper look today. I like the idea of completely handling refs internally 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bootstrap modal not displaying - Stack Overflow
to check, Go to your modal fade class on browser and then check if there is any custom file comes on top. such...
Read more >
Modal - Bootstrap
Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Read more >
5 Examples of the new Ionic 6 Bottom Sheet Modal
Now the modal has no background anymore, and since our simple box has margin it looks like it's floating in the air. Of...
Read more >
Bootstrap modal - CoreUI
Modals use position: fixed , which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a...
Read more >
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
In contrast, nonmodal (or modeless) dialogs and windows do not disable the main content: showing the dialog box doesn't change the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found