Toast is displayed under the Dialog component

[mohamedGamalAbuGalala]

Description

Toast should be displayed above the Dialog component, but it's not even with z-index set

Related to

• Components
• Demo
• Docs
• Typings

Affected platforms

• Android
• iOS
• Web

[ethanshar]

Hi @mohamedGamalAbuGalala
Can you please share a code snippet and maybe a screenshot/video

Thanks

[lidord-wix]

@mohamedGamalAbuGalala
This is not a trivial case since Toast is part of the root screen while the Dialog is a modal that is pushed above the root screen.
Dev wise - you can render the Toast inside a transparent modal above the dialog:

<View>
  <Dialog .../>
  <Modal transparent visible={this.state.showToast}>
    <Toast .../>
  </Modal>
</View>

UX wise - you can dismiss the modal right before you show the toast.

Please try it and let me know if it works for you.

[mohamedGamalAbuGalala]

@lidord-wix your solution should work, I actually remember doing the UX-wise solution.

[lidord-wix]

Cool, so I'm closing this issue :)