Starting to go crazy, can´t find a way of making a border and borderColor on my Avatar from react native elements. What im i doing wrong ? This must have an easy solution ?

<Avatar
      medium
      rounded
      source={{ uri: this.props.profile[0].profile_picture }}
      onPress={this.toggleModal.bind(this)}
      iconStyle={{ borderColor: 'white', borderTopLeftRadius: 1,borderStyle:'solid' }}
      containerStyle={{ borderColor:'white', borderTopLeftRadius: 1, borderStyle:'solid'  }}
      avatarStyle={{borderColor: 'white', borderTopLeftRadius: 1,borderStyle:'solid' }}
/>

Starting to go crazy, can´t find a way of making a border and borderColor on my Avatar from react native elements. What im i doing wrong ? This must have an easy solution ?

<Avatar
      medium
      rounded
      source={{ uri: this.props.profile[0].profile_picture }}
      onPress={this.toggleModal.bind(this)}
      iconStyle={{ borderColor: 'white', borderTopLeftRadius: 1,borderStyle:'solid' }}
      containerStyle={{ borderColor:'white', borderTopLeftRadius: 1, borderStyle:'solid'  }}
      avatarStyle={{borderColor: 'white', borderTopLeftRadius: 1,borderStyle:'solid' }}
/>

• javascript
• css
• reactjs
• react-native
• avatar

• avatarStyle={{ border: '1px solid #fff', borderTopLeftRadius: 1 }} – Liam Commented Apr 24, 2018 at 22:23

1 Answer 1

You need to add a borderWidth. E.g.

avatarStyle={{ borderWidth: 2, borderColor: 'white', borderTopLeftRadius: 1, borderStyle:'solid' }}