Menu
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?
279
To use z-index in React Native, we can use the zIndex style. to add 2 View s that has different zIndex values. The component with the higher zIndex value is laid over the component with the lower zIndex value. So the green square goes on top of the red square.
The zIndex is used to specify the stack order of an element in react native applications. The elements can be placed in front of the other elements by giving them the higher value of the zIndex . If we want to display an element between 2 elements, we can assign a larger zIndex value.
To change zIndex of the items in a react-select drop down, we can set the menuPortalTarget , menuPosition and styles props. We set menuPortalTarget to render the menu as the direct child of the body element. menuPosition is set to 'fixed' to set the position CSS property of the drop down menu to fixed .
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With