Reputation: 23313

How to use zIndex in react-native

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...!

Upvotes: 105

Answers (7)

Codemaker2015

Reputation: 15659

Try to use zIndex for iOS and elevation for android devices to stack the view on top of one another.

element: {
  zIndex: 1, // 1 for stacking the element on top of the previous element and -1 
             // for stacking the element under the above previous element.
  elevation: 1,
}

Upvotes: 0

Matt Aft

Reputation: 8936

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>

Upvotes: 54

Rogerio Gelonezi

Reputation: 344

You can use the Elevation property in your StyleSheet

containerText: {
    elevation: 3,
    backgroundColor: '#FB8500',
    padding: 3,
    borderRadius: 15,
    marginTop: -30,
    marginLeft: -10,
  },

Upvotes: 0

Suleiman AbdulMajeed

Reputation: 1131

Use elevation instead of zIndex for android devices

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

This worked fine for me!

Upvotes: 101

1pocketaces1

Reputation: 147

You cannot achieve the desired solution with CSS z-index either, as z-index is only relative to the parent element. So if you have parents A and B with respective children a and b, b's z-index is only relative to other children of B and a's z-index is only relative to other children of A.

The z-index of A and B are relative to each other if they share the same parent element, but all of the children of one will share the same relative z-index at this level.

Upvotes: 1

Mike S.

Reputation: 2818

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.

Upvotes: 3

SudoPlz

Reputation: 23313

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.

Upvotes: 5

How to use zIndex in react-native

Answers (7)

Related Questions