Custom Header don't take full space in stack bar

Question

So i made a custom header component and tried to put it in the stack bar title, but the view doesn't take the full space even when passing the width and height to 100%.i also tried flex :1 but that doesn't work also

// header.js
import React from 'react';
import {View,Text,Button,StyleSheet} from 'react-native'
//class Header extends React.Component {
    //render(){
export default function Header(){    
    return (
        <View style={styles.header}>
          <View> 
            <Text style={styles.text}>MEDICLIC</Text>   
          </View>
        </View>
    )
  }


const styles = StyleSheet.create({
  header: {
      width:'100%',
      height:'100%',
      flexDirection:'row',  
      alignItems:'center',
      justifyContent:'center',
      backgroundColor:'#3498db',

    },
  text:{
    fontWeight: '600',
    color:'#ecf0f1',
    fontSize: 32,
  }
});
//export default Header 

this is my app.js code where i used also a drawer navigation,

// APP.js
import React from 'react';
import Header from './Components/Header'
import { createDrawerNavigator } from 'react-navigation-drawer'
import {createAppContainer } from 'react-navigation'
import {createStackNavigator } from 'react-navigation-stack'
import  ConnectionScreen from './Screens/ConnectionScreen';
import  AccueilScreen from './Screens/AccueilScreen';
import  AboutScreen from './Screens/AboutScreen';
export default class App extends React.Component {
  render(){
    return (
      <AppNavigator/>
        );
  }

}
const AppDrawerNavigator = createDrawerNavigator({
  Accueil:{
    screen: AccueilScreen
  },
  SeConnecter: {
    screen:ConnectionScreen} ,
  Apropos : {
    screen: AboutScreen
  }, 
});
const screens = {
  Accueil:{ 
    screen : AppDrawerNavigator
  },
  SeConnecter: {
    screen:AppDrawerNavigator
  } ,
  Apropos : {
    screen: AppDrawerNavigator
  },  
}
const AppStackNavigator = createStackNavigator(screens,{
  defaultNavigationOptions:{
    headerTitle: () => <Header/>,
    headerTintColor :'#fff',
    headerStyle :{
      backgroundColor:'#fff',
      height: 100,
    },

  }
});
const AppNavigator= createAppContainer(AppStackNavigator);

What i see on my android device

enter image description here

Answer 1

I came across this problem today also, but after searching for solution for more than a hour, I finally get a way around it. The problem was that react native doesn't allow full access on the way the header component works anymore, you can only put the component that you want, but not override the header. Therefore, to configure the stack header to your preference, you have to configure the header from the stack headerStyle property from the options prop. For mine, I configure the background from the stack headerStyle property so as to fill the whole header,

import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/home";
import ReviewDetails from "../screens/reviewDetails";
import Header from "../shared/header";

const Stack = createStackNavigator();

export default function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerTitle: () => <Header />,
          headerStyle: {
            backgroundColor: "coral",
          },
        }}
      />
      <Stack.Screen name="ReviewDetails" component={ReviewDetails} />
    </Stack.Navigator>
  );
}

Then I use the absolute position on the header component style to put it in the middle accordingly. Note: percent are still not working for the absolute positioning, so you still have to use pixels.

import { StyleSheet, Text, View } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";

const Header = () => {
  return (
    <View style={styles.cont}>
      <MaterialIcons name="menu" size={30} />
      <View>
        <Text style={styles.text}>GameZone</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  cont: {
    flex: 1,
    position: "absolute",
    left: 80,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
  },
  text: {
    fontSize: 24,
    fontFamily: "nunito-bold",
    letterSpacing: 2,
  },
});

export default Header;

Here is the preview from android mobile preview of the code

Answer 2

     <View style={{  flexDirection: "row", justifyContent: 'center' ,backgroundColor: 'red' ,width:360 }}>

///... 3 views and text in them 

    </View>

I did this, hard coded the width to main view of component using in place of title. about width 360 takes complete width having equal width on both left and right end. Please do mention if you find a better way to sort the things. Thanks in advance.