Selected flag border

[sfm2222]

I'm trying to put border around selected flag. How can I achieve the same circular border on all devices.

Currently I'm doing this:

<ListView 
 horizontal={true}
          dataSource={this.state.siteLangdataSource}
          renderRow={ 
            (item) => 
              <TouchableOpacity  button onPress={() => this.setLang(item.LanguageId)} key = {item.LanguageName}>
              <Flag style={item.isSelect == true ? styles.flagRoundedItem: styles.flagItem} code = {item.LanguageCode == 'EN'? 'GB' : item.LanguageCode}  />
                 </TouchableOpacity>
             }
        />

Style.js

HEIGHT & WIDTH are screen h&w.

flagItem:
{
  height: HEIGHT/16,
  width: WIDTH/10,
  margin:WIDTH/20,
},
flagRoundedItem:
{
  borderRadius: WIDTH/10,
  height: HEIGHT/16,
  width: WIDTH/10,
  borderWidth: 5,
  borderColor: secondarycolor,
  margin:WIDTH/20,
},

The radius is not correct for few devices:

On some devices it looks absolutely fine: