DEV Community

loading...

React Navigation Fix header height in iOS

chakrihacker profile image Subramanya Chakravarthy ・1 min read

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

pic
Editor guide
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