Try to add vertical margin for my navigation header but not working & how to add bottom line for navigation header

Question

I am using React Navigation v5. I try to add some vertical margins for my header. This is what I tried:

navigation.setOptions({
  headerStyle: {
      backgroundColor: '#f4511e',
      marginVertical: 10
    },

    headerTitleContainerStyle: {
      marginVertical: 10,
    },

    headerTitleStyle: {
      marginVertical: 10,
    },
})

I hoped at least one of the above style options can have some effect, but my header has no vertical margin still. How to add vertical margin to my navigation header?

Another question is that I would like to show a bottom line of my header, how to do that?

Answer 1

First, You need to increase the header height then you can add margin into the header content. Please try the following code.

   this.props.navigation.setOptions({
      
      headerStyle: {
          backgroundColor: '#6ff',
          height:100,
          marginVertical: 10
        },
    
        headerTitleContainerStyle: {
          backgroundColor:'red'
        },
    
        headerTitleStyle: {
          backgroundColor:'yellow',
          marginVertical: 20,
        },
    })

You can get default header height in React V5 by using the following code and then you can add more height as per the requirement:-

React navigation V5

import { useHeaderHeight } from '@react-navigation/stack';
const headerHeight = useHeaderHeight()+ `HeightYouWant`;

For the Bottom Line, your can use borderBottomColor and borderBottomWidth style inside headerStyle

   headerStyle: {
      backgroundColor: '#6ff',
      height:100,
      marginVertical: 10,
      borderBottomColor:"#FF00FF",
      borderBottomWidth:5
    },