How to use zIndex in react-native

Question

I've want to achieve the following:

The following images are what I can do right now, but that's NOT what I want.

Sample of code I have right now:

renderA() {     return (         <View style={ position: 'absolute', zIndex: 0 }>    // parent of A             <View style={ zIndex: 2 }>  // element A             </View>             <View style={ zIndex: 2 }>  // element A             </View>         </View>     ); }  renderB() {     return (         <View style={ position: 'absolute', zIndex: 1 }>    // element B         </View>     ); }   render() {     return (         <View>             {this.renderA()}             {this.renderB()}         </View>     ); } 

To put it in words, I want

• Parent A: to be below everything.
• Element B: to be at the above parent A but below element A.
• Element A: above everything.

Note that Parent A and Element B both have to be absolutely positioned, and both elements A and elements B have to be clickable...!

Answer 1

Use elevation instead of zIndex for android devices

elevatedElement: {   zIndex: 3, // works on ios   elevation: 3, // works on android } 

This worked fine for me!

Answer 2

I believe there are different ways to do this based on what you need exactly, but one way would be to just put both Elements A and B inside Parent A.

<View style={{ position: 'absolute' }}>    // parent of A   <View style={{ zIndex: 1 }} />  // element A   <View style={{ zIndex: 1 }} />  // element A   <View style={{ zIndex: 0, position: 'absolute' }} />  // element B </View>