React-native: zIndex is not working on android

[ngdlmk]

zIndex is not working on android but it is working well on IOS.
RN 0.61.5

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[kubilaykiymaci]

Hi @ngdlmk,

you should use elevation on android.

from react native docs:

elevation
(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

[ngdlmk]

Hey @kubilaykiymaci thanks for the answer as you said elevation is working but there is an other problem if I use touchableopacity and if it is overlapping to a view it is being unclickable.

<TouchableOpacity onPress={() => alert("oonon")} style={{ position: 'absolute', top:0 , left: 0, elevation: 3, zIndex: 4, backgroundColor: 'red', width: 200, height: 200 }}></TouchableOpacity> <View style={{ position: 'absolute', top:100 , left: 100, zIndex: 1, elevation: 2, backgroundColor: 'black', width: 200, height: 200 }}></View>

[kubilaykiymaci]

@ngdlmk elevation should be 1 higher than zIndex. that's why your elevation should be 5.

[ngdlmk]

@kubilaykiymaci I replaced the code like this but touchable opacity still unclickable
<TouchableOpacity onPress={() => alert("hello")} style={{ width: 200, height: 200, backgroundColor: 'red', position: 'absolute', elevation: 3, zIndex: 2 }}></TouchableOpacity> <View style={{ width: 200, height: 200, backgroundColor: 'black', position: 'absolute', elevation: 2, zIndex: 1 }}></View>

[kubilaykiymaci]

i can't say anything then. i should check your code and style file. maybe you have another transparent layer which is infront of your touchable. maybe you have a container which has higher zIndex and background color transparent. but i know that zIndex and elevation works on android, i used it in my project.

[arberK]

I have the same problem only on android. In my case, a want to dynamically change the ordering of the views.

[no-response[bot]]

It's been three weeks since we asked for additional information from the author of this issue. As it happens, we don't have enough information to take action. We are going to close this issue, but please do not hesitate to open a new issue if you are still encountering this problem.

[bardiasuny]

you should change the order of your Elements,
let's say you have.

<TouchableOpacity><Text>Close</Text></TouchableOpacity>
<View></View>

To fix it Change it to :

<View></View>
<TouchableOpacity><Text>Close</Text></TouchableOpacity>

[qam12]

Try this
xyz{
elevation: 4
}

[danielkhaleb]

@qam12 Work for me, thanks

` style={{
borderRadius: 16,
backgroundColor: '#E03400',
padding: 10,
position: 'absolute',
zIndex: 1,
marginLeft: '45%',
marginTop: 30,
width: '55%',
elevation: 4,
}}

        <Text
          style={{
            fontFamily: 'OpenSans-Semibold',
            fontSize: 10,
            color: '#FFFFFF',
          }}

          {textContent}
        </Text>
      </View>`