DEV Community

Subramanya Chakravarthy
Subramanya Chakravarthy

Posted on

React Navigation Fix header height in iOS

Have you ever faced large header height for iphones??

Like this one

large-header

Well then you can fix this easily with one line of code

In your navigator's default navigation options add this

headerForceInset: { top: "never", bottom: "never" }

So It will be something like

const awesomeNavigator = createStackNavigator({
    // all screens
}, {
    defaultNavigationOptions: {
        headerForceInset: { top: "never", bottom: "never" }
    }
})

Now it changes to

normal-header

Discussion (2)

Collapse
drmas profile image
Mohamed Shaban

This usually happen because of embedding SafeArea in top of the navigation container, which results in double padding, although what you mentioned is a fix, may be the better one will be to make sure you don't have double SafeAreas

Collapse
chakrihacker profile image
Subramanya Chakravarthy Author

I agree whatever you said is a better solution, but I am too #lazy or didn't want to refactor my #workplace app when I wrote this article, so πŸ€·πŸ»β€β™‚οΈ

Thanks for pointing it out