My hamburger menu lines are not aligned what to do - css

Question

My hamburgers are not aligning on the screen
I have visited different style methods like alignItems but still no results. concerning margins positioning I cannot go further left separating each line (all 3 of them) by about 2 px each.
the main problem is the horizontal alignment of each line.
Can someone help, please?
import React from 'react';
import {AppRegistry, StyleSheet, View} from "react-native" ;
export default class MenuButton extends React.Component {
render() {
return(
<View style={menuIcon.mainLine}>
<View style={menuIcon.line2}>
<View style={menuIcon.line3}>
</View>
</View>
</View>
)
}
}
const menuIcon = StyleSheet.create({
mainLine: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 4,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 40,
marginLeft : 25,
alignItems : "stretch",
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
},
line2: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 7,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 0,
marginLeft : 0,
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
},
line3: {
flex: 1,
backgroundColor : 'rgba(255, 255, 255, 1)',
top : 7,
height : 6.5,
width : 35,
position : 'absolute',
marginTop : 0,
marginLeft : 0,
left : 0,
right : 0,
borderRadius : 20,
borderStyle : 'solid',
borderWidth : 1,
borderColor : 'rgba(205, 205, 205, 1)'
}
})
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

Answer 1

i recommend using react-native-vector-icons for that.
but if you want to implement it yourself do this changes in your render function
render() {
return(
<View>
<View style={menuIcon.mainLine}></View>
<View style={menuIcon.line2}></View>
<View style={menuIcon.line3}></View>
</View>
)
}

Answer 2

usually we dont write hamburger code by our self .. or any other buttons icons.
We use icons or images inside view and apply onPress on view itself
with react-native we use react-native-vector-icons library. Installation basic usage guide here
https://www.npmjs.com/package/react-native-vector-icons