S.M_Emamian
S.M_Emamian

Reputation: 17393

zIndex doesot work on Card of native-base - react native

I'm using native-base. this is my code:

                     <View style={{width:'100%',height:45}}>
                      <Card style={{position:'absolute',zIndex:90,paddingTop: 0, marginRight:10,width: '100%', alignSelf: 'center',borderRadius:10,padding:10,height:45 }}>
                        <CardItem style={{ position:'absolute', zIndex:1,backgroundColor: '#fff', height: 45, width: '100%', paddingTop: 0, paddingBottom: 0, justifyContent: 'flex-end' }}>
                          <TouchableOpacity onPress={() => this.onClickSubs(sub)} style={{height:'100%',width:'100%'}}>
                            <Text onPress={() => this.onClickSubs(sub)} style={{ textAlign: 'center', fontSize: 16, color: colorConstants.GRAY_LIGHT_COLOR }}>{sub.title}</Text>
                          </TouchableOpacity>
                        </CardItem>
                      </Card>
                      <View style={{position:'absolute',zIndex:999,right:0,width:20,height:20,borderRadius:10,borderWidth:2,borderColor:'#fff',backgroundColor:colorConstants.PRIMARY_COLOR,alignSelf:'center',justifyContent:'center',alignItems:'center'}}>
                      </View> //circle view

                      </View>

but my circle view is background of Card:

Upvotes: 0

Views: 1986

Answers (1)

Paras Korat
Paras Korat

Reputation: 2065

Just add elevation value in your circle view style

        <View
          style={{
            position: "absolute",
            zIndex: 999,
            right: 0,
            width: 20,
            height: 20,
            borderRadius: 10,
            borderWidth: 2,
            borderColor: "#fff",
            backgroundColor: "red",
            alignSelf: "center",
            justifyContent: "center",
            alignItems: "center",
            elevation:3  <-----------elevation in circle view---------
          }}
        />

without elevation

enter image description here

with elevation

enter image description here

Upvotes: 1

Related Questions