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?

Are you trying to change on a specific screen or do you want the change the whole header on all the screens? — Luís Mestre, Jan 16 '21 at 11:30
are you having an issue with the overlapping header into the status bar? — Vishal Dhanotiya, Jan 21 '21 at 13:04

Vishal Dhanotiya · Answer 1 · 2021-01-25T11:32:24.930

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

Thanks，what about the bottom line I asked in my question? – Leem.fin Jan 25 '21 at 09:49 — Leem.fin, Jan 25 '21 at 09:49
@Leem.fin Please check the updated code for the bottom line – Vishal Dhanotiya Jan 25 '21 at 11:25 — Vishal Dhanotiya, Jan 25 '21 at 11:25

S.N.B · Answer 2 · 2021-01-16T16:52:29.620

I don't think it is possible to add margin or padding to default navigation options, but there is one thing we can do, is create a custom Header component and pass to navigationOptions such as,

navigation.setOptions({
 header:props => <HeaderComponent {...props} />,
})

and our Header Component

export function HeaderComponent(props) {
    return(
        <View style = {{
            
            height:80,
            backgroundColor: '#f4511e',
            borderBottomWidth:1,
            borderBottomColor:'black',
            marginVertical:10,
            borderBottomWidth:5,
        }}>
            <View style={{flex:1, justifyContent:'center'}}>
                <Text style={{fontSize:20, textAlign:'center'}}>{props.scene.route.name}</Text>
            </View>
        </View>
    )
}

Also you can use React-Native-Elements , It is easy to use highly customizeable.

https://reactnativeelements.com/docs/header

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

2 Answers2