0

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:

S.M_Emamian
  • 17,005
  • 37
  • 135
  • 254
  • did you try elevation? for example elevation: 2 – Sarmad Shah Jan 27 '19 at 11:33
  • I think the problem is elevation. https://stackoverflow.com/questions/51821016/react-native-elevation-and-position-absolute – S.M_Emamian Jan 27 '19 at 11:49
  • @S.M_Emamian it's not a problem of zIndex – Paras Korat Feb 12 '19 at 06:06
  • yes, the problem is `elevation`. when you use `elevation` property and if you have a `zIndex` property, you should use `elevation` for all element's of inside of parent element. I think this is a bug and I reported it to github: https://github.com/facebook/react-native/issues/23173 – S.M_Emamian Feb 12 '19 at 09:41

1 Answers1

1

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

Paras Korat
  • 2,011
  • 2
  • 18
  • 36
  • yes, the problem is `elevation`. when you use `elevation` property and if you have a `zIndex` property, you should use `elevation` for all element's of inside of parent element. I think this is a bug and I reported it to github: https://github.com/facebook/react-native/issues/23173 – S.M_Emamian Feb 12 '19 at 09:40