react-native custom header navigator has unwanted margins-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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',
},
})

CodePudding user response：

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