react-native custom header navigator has unwanted margins - react-native

Question

I have drawer and stack navigator. I disabled header of drawer and stack navigators. And create my own header component but I cannot rid of the edge margins of my custom header component.
[Screenshot]
https://i.stack.imgur.com/5jWv3.png
const styles = StyleSheet.create({
header: {
backgroundColor: 'purple',
width: '100%',
height: '100%',
flexDirection: 'row',
alignItems: 'center',
},
headerText: {
fontWeight: 'bold',
fontSize: 21,
letterSpacing: 1,
paddingLeft: 45,
paddingBottom: 2,
},
icon: {
fontSize: 30,
color:"white",
position: 'absolute',
zIndex: 3,
}});
 
return (
<View style={styles.header}>
<View style={styles.header}>
<MaterialIcons style={styles.icon} name="menu" onPress={openMenu}/>
<Text style={styles.headerText}>{titleName}</Text>
</View>
</View>
)

Answer 1

This is your header Component. Have you checked if the Main Container does not have a paddingHorizontal in the Screen?

Answer 2

Solution #1
Change:
return (
<View style={styles.header}>
<View style={styles.header}>
<MaterialIcons style={styles.icon} name="menu" onPress={openMenu}/>
<Text style={styles.headerText}>{titleName}</Text>
</View>
</View>
)
to:
return (
<View style={styles.header}>
<MaterialIcons style={styles.icon} name="menu" onPress={openMenu}/>
<Text style={styles.headerText}>{titleName}</Text>
</View>
)
Solution #2
import {Dimensions} from 'react-native'
let width=Dimensions.get('screen').width
let height=Dimensions.get('screen').height
then:
const styles = StyleSheet.create({
header: {
backgroundColor: 'purple',
width: width,
height: height,
flexDirection: 'row',
alignItems: 'center',
},
})

Answer 3

I fixed the issue with opening the app on web to see styles of parent the element. In this case my parent element is the <Stack.screen> home tab.
I just checked the styles on web which is
marginLeft: 16,
marginRight: 16,
maxWidth: 470,
and override these styles with
marginLeft: 0,
marginRight: 0,
maxWidth: '100%',
screenshot of the solution result
<Stack.screen
options={{headerBackgroundContainerStyle: {
marginLeft: 0,
marginRight: 0,
maxWidth: '100%'
}
}}
/>