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

• [x] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Affected platforms

• [x] 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 :)