Cross button react-native-CodePudding

I thought this would be simple to produce but I can't seem to get it looking right, I just want an X button - created 2 Views with 45deg rotation but for some reason they dont look equal length.

Header.js

<View style={styles.hamburgerContainer}>
    <View style={[styles.hamburgerLine, styles.crossLine1]}></View>
    <View style={[styles.hamburgerLine, styles.crossLine2]}></View>
</View>

const styles = StyleSheet.create({
  hamburgerContainer: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
},
hamburgerLine: {
    height: 3,
    width: 30,
    marginVertical: 3,
    backgroundColor: Colors.primary,
},
crossLine1: {
    marginVertical: 0,
    transform: [{rotate: '45deg'}],
},
crossLine2: {
    marginVertical: 0,
    transform: [{rotate: '-45deg'}],
},

})

Result:

Appreciate any help here

CodePudding user response：

Make the position absolute for the lines so they start on the same axis and can overlap:

hamburgerLine: {
    height: 10,
    width: 300,
    marginVertical: 3,
    backgroundColor: Colors.primary,
    position: 'absolute' //add this
},