Android Negative Margin

Question

I am working on a React Native application that has a user avatar component with an overlapping effect:

I managed to get it to work on iOS, as it allows negative fields, but when you use negative fields on Android, it captures the last image as follows:

Here are the styles that I use:

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.

What is the best approach that works on both platforms to achieve the desired style?

Answer 1

I tried with your setting + flexbox and everything seems to work fine.

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
  }
}