Custom Header becomes narrow in React Native

I have the following problem. When I successfully log in to my account and go to the HomeScreen page my Header gets narrow. Screenshot. The header before login What's the reason of that? Screenshot. The header after login

And after logout the Header remains the same. Screenshot. The header after login

App.js:

const Stack = createNativeStackNavigator();

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator
          screenOptions={{
            headerTitle: (props) => <Header {...props} /> 
         }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
      <FlashMessage position="top" />
    </NavigationContainer>
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    
  },
});

Header.js:

const Header = (props) => {
    return (
     <View style={styles.header}>
      <Image
        style={styles.image}
        source={require('../assets/logo_1.png')} 
      />
     </View>
    );
  }

  export default Header;

  const styles = StyleSheet.create({
    header: {
      
      width: '100%',
      height: 118,
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#E4B062',
      marginRight: 35,
      marginTop: -Constant.statusBarHeight
    },
    image: {
      position: 'absolute',
      width: 70, 
      height: 63, 
      left: 15,  
    }
  });