react-native custom header navigator has unwanted margins

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.sstatic.net/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

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%'
     }
   }}
/>