Bring View on top of Modal using zIndex style with React-Native

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