CODEWITHSUNDEEP
react-nativez-index
knotri
knotri

Reputation: 253

How zIndex work in react-native?

This code work different on iOS and Android - And I don`t understand why? I try to make autocomplete, and list of suggestion render inside header component - but should be over header+Content

<View style={{flex: 1}}>
  <View style={{
      height: 50,
      backgroundColor: 'red',
      left: 0,
      position: 'absolute',
      right: 0,
      top: 0,
      zIndex: 1
  }}>
    <Text>Header</Text>
    <View style={{
        backgroundColor: '#3F9',
        left: 50,
        position: 'absolute',
        height: 100,
        right: 50,
        top: 25,
        zIndex: 1
    }}><Text>Should overlay Content</Text></View>
  </View>
  <View style={{flex: 1, backgroundColor: 'yellow'}} >
    <Text>Content</Text>
  </View>

Upvotes: 0

Views: 8447

Answers (2)

Lakshitha Ruwan
Lakshitha Ruwan

Reputation: 969

It's better to stay away from "zIndex" since it won't work as expected in Android. instead use the order of the elements along with position:'absolute' . it'll work fine.

reference - How to overlap in react-native

Upvotes: 3

knotri
knotri

Reputation: 253

I think I found what happens.

As I read on Facebook documentation

The overflow style property defaults to hidden and cannot be changed on Android

Upvotes: 0

Related Questions