title: Have a circle around Avatar component
body: <p>In my react-native project, I am using <a href="https://react-native-elements.github.io/react-native-elements/docs/avatar.html" rel="nofollow noreferrer">react-native-elements</a> library render an Avatar rounded component. Something like below:</p>
  <pre><code>&lt;Avatar
    size=&quot;small&quot;
    rounded
    title=&quot;MT&quot;
    activeOpacity={0.7}
  /&gt;
  </code></pre>
  <p>The above code renders a circle like this:</p>
  <p><a href="https://i.stack.imgur.com/XNlj1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XNlj1.png" alt="enter image description here" /></a></p>
  <p>Now I need to have a green color circle around the above <code>Avatar</code> to make the <code>Avatar</code> looks like having a green thick border around it. How to achieve that?</p>
  <p><strong>==== update ====</strong></p>
  <p>I tried:</p>
  <pre><code>&lt;Avatar
    size=&quot;small&quot;
    rounded
    title=&quot;User&quot;
    avatarStyle={{
      borderWidth: 3,
      borderColor: 'green',
    }}
  /&gt;
  </code></pre>
  <p>on iOS it looks like:
  <a href="https://i.stack.imgur.com/fG5Z4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fG5Z4.png" alt="enter image description here" /></a></p>
  <p>on Android it looks like :
  <a href="https://i.stack.imgur.com/9FDc3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9FDc3.png" alt="enter image description here" /></a></p>
  <p>So, on Android it doesn't look like a circle border, how to resolve that issue on Android?</p>