Encircle react-native-vector-icons

2
votes

I want to encircle react-native-vector icons. I have added a border radius in the style but it not helpful for all devices and also with every icon it behaves different. 

    <Icon  name={'ios-grid-outline'} style={{ color: "rgb(170, 207, 202)", 
 borderRadius:10,
  borderWidth: 2,
  borderColor: 'rgb(170, 207, 202)',
}} />

Link to react native vector icons: https://oblador.github.io/react-native-vector-icons/

enter image description here

2
react-native
Could you describe your expected behaviour and actual behaviour? – Mighty

2 Answers

4
votes

Try adding the overflow:"hidden" option to your style

<Icon  name={'ios-grid-outline'} style={{ 
  color: "rgb(170, 207, 202)", 
  borderRadius:10,
  borderWidth: 2,
  borderColor: 'rgb(170, 207, 202)',
  overflow: "hidden"
}} />
2
votes

Try to wrap it inside a View as a container

<View 
    style={{
        width: 10, 
        height: 10, 
        borderRadius: 5, 
        borderWidth: 2, 
        borderColor: 'rgb(170, 207, 202)'
    }}>
    <Icon name={'ios-grid-outline'} style={{...}} />
</View>

Change the width and height to your own preference of course.