Custom modal with position absolute is overlapping Toast

Describe the bug I have a custom modal with absolute position and z-index: 9999. The issue is that the Toast is under the modal.

Steps to reproduce Steps to reproduce the behavior:

1. Configure any Toast
2. Create a fullscreen modal on the same level with position: absolute and z-index: 9999
3. Try to show a Toast message

Expected behavior The Toast component should be visible

Code sample It’s a simple issue, so I won’t provide you with a sample.

Environment (please complete the following information):

    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4570S CPU @ 2.90GHz
    Memory: 65.77 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
    Platforms: iOS 14.2
    react: 17.0.2
    react-native: 0.66.3

Additional context I would really like to have the possibility to change the styles of AnimatedContainer component. A custom prop for z-index isn’t a good idea. Maybe there will be other issues that will need some other tweaks of the styles.

https://github.com/calintamas/react-native-toast-message/blob/main/src/components/AnimatedContainer.tsx

[calintamas]

I assume you render your absolute positioned <View /> conditionally based on some isVisible state. In that case, <Toast /> instance refs are tracked internally and cleaned up on unmount.

[calintamas]

You can follow this guide - How to show the Toast inside a Modal?