I'm trying to have a card shown on top of a card in React Native and set zIndex = 1
for the top card and zIndex = 0
for the bottom card and placed them in a view like below:
<View style={{paddingVertical: MARGIN_1, justifyContent: 'center'}}>
{this.props.subscribed ? (
<CardSubscribe
style={{zIndex: 2}}
/>
) : (null)}
{this._renderTextItems()}
</View>
However, there's no overlap between two cards. The bottom card starts after the top card:
I have also tried to debug with inspector and it shows the top card has the property of zIndex = 1
:
and the bottom card has the property of zIndex = 0
:
I have also tried to place the top card after the bottom card but it just shows below the bottom card, like zIndex
isn't doing anything. How should I fix this?
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>