Scale property nt working on border android 7.0 react-native

Question

i am trying to scale circle but its not working for android 7.0 it showing this beh see attached image https://i.stack.imgur.com/Q2C90.png

 

Actually i have two circles and on click i want to scale that circle and if that circle already scaled then scale back to that. for this purpose i created two class with name select and unselect.

 

when user click on circle then select class use and when user click again on that circle the unselect class apply.

 

Below code is working fine on all devices expect android 7.0.

 

selected: {

borderWidth: 4,

zIndex: 2,

fontSize: 25,

marginLeft: 10,

transform: [{ scale: 1.3 }],

backgroundColor: LIGHTGREYCOLOR,

position: 'relative'

},

unSelected: {

marginLeft: 10,

borderWidth: 2,

fontSize: 20,

zIndex: 1,

position: 'relative',

backgroundColor: WHITECOLOR,

transform: [{ scale: 1 }]

},

circleStyle: {

borderRadius: Math.round(SCREEN_WIDTH + SCREEN_HEIGHT) / 2,

justifyContent: 'center',

alignItems: 'center',

borderWidth: 2,

padding: 5,

width: SCREEN_WIDTH * 0.4,

height: SCREEN_WIDTH * 0.4

},