React Native - modals overlay

Question

Modal 1 -- Component 1
              |
           Component 2
              |
Modal 2 -- Component 3

I have a scenario like the 'drawing' above, where component 3 is initialized in component 2 which is initialized in component 1.

Component 1 and 3 each holds a component with a modal.

If component 3's modal is open. The modal from component 1 is hidden behind it if it's opened. I however want it to be on top of the stack and in the front view.

I tried with ordering things in the code, and i tried with zIndex with position either absolute or relative.

{position: 'relative/absolute', overlay: {zIndex: 99}};

but neither seems to work.

I've looked into similar posts but was unable to find an answer that work's.

How can i force modal 1 to always be visible if other modals are opened from a 'higher' component in the stack

Answer 1

You could use Modal component or some other module.

But if you want to create your own modal you can follow this pattern.

in your main component App, have 2 child components

<App>
  <Home /> //All components/navigation are here
  {
    isModalOpen && <Modal />
  }
</App>

Set Modal style to something like position:absolute, left: 0, right: 0, top: 0, bottom: 0