React Native Android Negative Margins

Question

I'm working on a React Native app that has a user avatar component with an overlap effect:

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:

Here are the styles I'm using:

avatarContainer: {
    borderRadius: 20,
    width: 40,
    height: 40,
    marginRight: -11
},

avatar: {
    borderRadius: 20,
    width: 40,
    height: 40
},

avatarContainer is the white circle behind the image and avatar is the image itself.

What is the best approach that works on both platforms to accomplish the desired styling?

Answer 1

I've tried with pretty much your setup + flexbox and everything seems to work ok.

class App extends React.Component {
  render() {
    const { overlapContainer, avatarContainer, avatar} = styles;

    return (
        <View style={overlapContainer}>

          <View style={avatarContainer}>
            <Image style={avatar} source={{ uri: 'http://lorempixel.com/output/cats-q-c-100-100-3.jpg' }} />
          </View>

          <View style={avatarContainer}>
            <Image style={avatar} source={{ uri: 'http://lorempixel.com/output/cats-q-c-100-100-7.jpg' }} />
          </View>

          <View style={avatarContainer}>
            <Image style={avatar} source={{ uri: 'http://lorempixel.com/output/cats-q-c-100-100-3.jpg' }} />
          </View>

          <View style={avatarContainer}>
            <Image style={avatar} source={{ uri: 'http://lorempixel.com/output/cats-q-c-100-100-7.jpg' }} />
          </View>

        </View>
    );
  }
}


const styles = {
  overlapContainer: {
    flexDirection: 'row-reverse',
    justifyContent: 'flex-end',
    marginTop: 50,
    marginRight: 50
  },
  avatarContainer: {
    borderRadius: 33,
    height: 66,
    width: 66,
    marginLeft: -15,
    borderStyle: 'solid',
    borderWidth: 3,
    borderColor: 'white'
  },
  avatar: {
    borderRadius: 30,
    height: 60,
    width: 60
  }
}