CODEWITHSUNDEEP
react-nativereact-native-elements
Leem.fin
Leem.fin

Reputation: 42602

Have a circle around Avatar component

In my react-native project, I am using react-native-elements library render an Avatar rounded component. Something like below:

<Avatar
  size="small"
  rounded
  title="MT"
  activeOpacity={0.7}
/>

The above code renders a circle like this:

enter image description here

Now I need to have a green color circle around the above Avatar to make the Avatar looks like having a green thick border around it. How to achieve that?

==== update ====

I tried:

<Avatar
  size="small"
  rounded
  title="User"
  avatarStyle={{
    borderWidth: 3,
    borderColor: 'green',
  }}
/>

on iOS it looks like: enter image description here

on Android it looks like : enter image description here

So, on Android it doesn't look like a circle border, how to resolve that issue on Android?

Upvotes: 2

Views: 2954

Answers (2)

bas
bas

Reputation: 15722

proxidem's exact solution didn't work for me. The border didn't extend to the corners. This is what worked for me:

<Avatar
  size="small"
  rounded
  title="User"
  avatarStyle={{
    borderWidth: 1,
    borderColor: 'green',
    ...Platform.select({
       android: {
          borderTopWidth: 0,
          borderLeftWidth: 0,
          borderRightWidth: 0,
          borderBottomWidth: 0,
       },
    }),
  }}
/>

For other trying this solution. If the text doesn't fit, choose a word 2 characters long or shorter or add the titleStyle property and change the fontSize:

titleStyle={{
   fontSize: 10,
   color: 'black',
}}

Upvotes: 2

4743a324-b004-488e-88ed-3fb99e
4743a324-b004-488e-88ed-3fb99e

Reputation: 51

You may use the avatarStyle prop on your Avatar. This adds style to the underlying image. Example to make a 1px solid green border:

  <Avatar
    size="small"
    rounded
    title="MT"
    activeOpacity={0.7}
    avatarStyle={{ borderWidth: 1, borderColor: 'green', borderRadius: 5, borderStyle:'solid' }}
  />

Upvotes: 0

Related Questions