Show Toast above Modals
See original GitHub issueGreat library. A feature I require, and I think many will too, is that the Toast can show above RN modals.
The use case is to have a single instance of the Toast
component in the app, that is then shown via the Toast.show
command. If I open a modal and while that modal is still open I show a toast, it currently opens behind the modal mask. Playing around with zIndex
and similar hacks doesn’t change much as RN Modal is a native component and opens above the rest of the app.
Adding the Toast
to the content of the modal allowed the toast to be in the forefront, i.e. it is not hidden behind the modal, however, it cannot go outside of the bounds of the modal content. Playing around with negative margin or absolute/relative positioning did not help as the toast then doesn’t display at all when in the mask area of the modal.
You can find a minimal demo here
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:9 (2 by maintainers)
Yes, there is a simple solution. Any full screen modal should instead simply be a screen. There’s not really any reason that a modal should be the entire size of your screen. That is a screen. Modals should only be used for “mini” screens. In fact a modal and a toast are not much different. Anyway, if you take this philosophy (took me about 10 mins of refactoring my modals to screens) you can avoid this issue that I don’t think will ever be “fixed”.
For me, it only work if I place the Toast component after the content of my modal.
For instance, this will work :
and this not :