React Native Android Negative Margins

android, flexbox, javascript, react-native, reactjs

Solution

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

Problem

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?

Original source