Menu
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?
785
You have have to use position:'absolute' and put the circle element as the last element of the elements list so it comes to top (no need to use zIndex). also the container div must have styles for child elements to be centered.
To use z-index in React Native, we can use the zIndex style. to add 2 View s that has different zIndex values. The component with the higher zIndex value is laid over the component with the lower zIndex value. So the green square goes on top of the red square.
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
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
