title: React Native Android Negative Margins
body: <p>I'm working on a React Native app that has a user avatar component with an overlap effect:</p>
  
  <p><a href="https://i.stack.imgur.com/3O08i.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/3O08i.jpg" alt="enter image description here"></a></p>
  
  <p>I was able to get it working on iOS since it allows negative margins, but when you use negative margins on Android, it clips the last image like this: </p>
  
  <p><a href="https://i.stack.imgur.com/8OPDj.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/8OPDj.jpg" alt="enter image description here"></a></p>
  
  <p>Here are the styles I'm using:</p>
  
  <pre><code>avatarContainer: {
      borderRadius: 20,
      width: 40,
      height: 40,
      marginRight: -11
  },
  
  avatar: {
      borderRadius: 20,
      width: 40,
      height: 40
  },
  </code></pre>
  
  <p>avatarContainer is the white circle behind the image and avatar is the image itself.</p>
  
  <p>What is the best approach that works on both platforms to accomplish the desired styling?</p>