Problem with custom header in react navigation

I’m trying to make a custom header with react navigation but i can’t get proper resoult. I want red view to cover all of the blue one but I can’t figure it out.

Here is a picture

My HomeStack.js:

const screens = {
  Home: {
    screen: HomeScreen,
  }
}

const options = {
  defaultNavigationOptions: {
    headerTitle: () => <Header/>,
    headerStyle: {
      backgroundColor: 'lightblue',
      height: 60,
      }
  }
}

const HomeStack = createStackNavigator(screens, options)

const Navigator = createAppContainer(HomeStack)

export default Navigator

My Header.js:

class Header extends Component {
  render() {
    return(
      <View style={style.conteiner}>
        <Text style={style.text}>Text</Text>
      </View>
    )
  }
}


const style = StyleSheet.create({
  conteiner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
  },
  text: {
    color: '#fff',
    fontSize: 20,
  }
})


export default Header

Answer

If I understand you correctly, then you want to define a custom component for the entire header. You are using your custom header component to set headerTitle:

const options = {
    defaultNavigationOptions: {
    headerTitle: () => <Header/>, <-- here
    headerStyle: {
    backgroundColor: 'lightblue',
    height: 60,
}

This is what the documentation says about headerTitle:

Sometimes you need more control than just changing the text and styles of your title — for example, you may want to render an image in place of the title, or make the title into a button. In these cases you can completely override the component used for the title and provide your own.

This option is only intended for replacing the title component, not the entire header. Unless you have some very specific requirements, you can likely achieve what you are looking for using a combination of headerStyle, headerTintColor and headerTitle.