zIndex isn't working for a react native project
z-index working fine in IOS. but again you will get isssue in android. In android z-index is not working you need to use elevation. But please do not forget to add z-index.
<TouchableOpacity
style={{
alignSelf: 'center',
position: 'absolute',
right: 10,
top: 10,
zIndex: 15,
elevation: (Platform.OS === 'android') ? 50 : 0
}}
onPress={() => {}}
>
<Image
source={require('dummy.png')}
/>
</TouchableOpacity>
In React Native we have position: relative
by default. If you want to make the correct use of zIndex
, you might need to add position: 'absolute'
, for them to overlap as described in your use case.
For example:
<View style={{flex: 1}}>
<View style={{width: 200, height: 200, zIndex: 1, position: 'absolute', backgroundColor: 'red'}} />
<View style={{width: 200, height: 200, zIndex: 2, position: 'absolute', backgroundColor: 'blue'}} />
</View>