使用带有 React-Native 的 zIndex 样式将视图置于 Modal 之上

Question

zIndex has been introduced recently to React-Native to change the position of a View in the stack of layers.

Although, I'm not able to bring a View on top of a Modal component.

My code looks like this:

render() {
  return (
    <View>
      <Modal visible>
        {props.children}
      </Modal>
      <View style={{ zIndex: 1000 }}>
        <Text>Loading...</Text>
      </View>
    </View>
  );
}

I guess I could stop using <Modal> and create a regular animated <View> that would behave like the Modal , but I'd rather find another solution.

Any idea?

Answer 1

No amount of zIndex manipulation will bring something above a react-native Modal , unfortunately. The Modal component is a native view that sits on top of the rest of your react-native application. The only way to put something above it is to put something in the modal itself, or alternately to use a js only implementation of a Modal.

Incidentally, the react-native-community version of modal is also built on the react-native modal, so would have the same issue. There's a discussion about different js implementation here: https://github.com/react-native-community/react-native-modal/issues/145

Answer 2

Not possible with modal. As the modal should always shown regardless of whatever the zIndex is given to it and other components in the screen

It will always shown you unless you make visible=false

To implement what you want. You could use a absolutely positioned view with some zIndex trick to move this view back and front.

render() {
  return (
    <View>
       <View style={{position:'absolute',top:0,bottom:0,left:0,right:0,zIndex:visible?-1:2}}>
          {props.children}
       </View>
       <View style={{ zIndex: 1 }}>
          <Text>Loading...</Text>
       </View>
     </View>
  );
}

Answer 3

I was struggling with the same problem and finally, I solved it. here's what I found:

First, the problem: the problem is the modal appears on top of all screen layers which means it will show on all app elements, so if you open two modals at the same time the app will make it all on each other cuz the app don't know what the modals order it should be, for that reason, you see your modal behind the other one.

Second, the solution: to make the second modal opens on the first modal you need to arrange the order of the modals opening, which means you open the parent modal then open the child modal. and for doing that I'm using promise which allow me to do that like this steps example:-

1 - create promise

const [isOpen, setOpen] = useState({ backDrop: false, modal: false }); // modals open state

function openDialog() {
    return new Promise((resolve) => {
        setOpen((previous) => ({ ...previous, backDrop: props.isOpen }))
        resolve()
    })
}

2 - I use useEffect() to trigger modal opening props and then invoke an async function which will await the openDialog() function at the first step above and then will set open state after the first function invoked.

useEffect(() => {
    (async function () {
        await openDialog()
        setOpen((previous) => ({ ...previous, modal: props.isOpen }))
    }())
}, [props.isOpen])

this how you can control opening the modals pre-arranged and on top of each other

Answer 4

 const styles = StyleSheet.create({ modal: { backgroundColor: 'white', margin: 0, // This is the important style you need to set alignItems: undefined, justifyContent: undefined, } <Modal isVisible={true} style={styles.modal}> <View style={{ flex: 1 }}> <Text>Hello!</Text> </View> </Modal>

Answer 5

You have to change the z-index of the modal not the one of the view (and a z-index of value 1 would suffice):

render() {
  return (
    <View>
      <Modal visible style={{ zIndex: 1 }}>
        {props.children}
      </Modal>
      <View>
        <Text>Loading...</Text>
      </View>
    </View>
  );
}

An element with a larger z-index generally covers an element with a lower one ( MDN docs ).

EDIT:

Another solution is to change the order of the elements:

render() {
  return (
    <View>
      <View>
        <Text>Loading...</Text>
      </View>
      <Modal visible>
        {props.children}
      </Modal>
    </View>
  );
}

With this solution you don't need z-index because the modal is already on top of the view.