React Native Android Negative Margins
<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>