How to use zIndex in react-native

Use elevation instead of zIndex for android devices

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

This worked fine for me!

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>

I finally solved this by creating a second object that imitates B.

My schema now looks like this:

I now have B1 (within parent of A) and B2 outside of it.

B1 and B2 are right next to one another, so to the naked eye it looks as if it's just 1 object.

UPDATE: Supposedly, zIndex has been added to the react-native library. I've been trying to get it to work without success. Check here for details of the fix.