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:
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',
}}
/>
So, on Android it doesn't look like a circle border, how to resolve that issue on Android?
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',
}}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments