Remove bottom border or shadow on header in React Navigation

Published on Jun 5, 2022

2 min read


React Navigation is an amazing navigation library in React Native ecosystem. I have been a big fan because it allows a lot of customization when using different navigators (such as Stack, Tab, or Drawer).

One of the customizations that can be done is to remove the border at the bottom of the header. By default, the Stack and Tab Navigators in this library add a header on a screen. This header has a default bottom border or shadow.

Here is an example of a border on the header on iOS:


The orange arrows are used to highlight the shadow. Similarly, on Android, the width is thin and hard to notice.


To make it more visible, you can populate the screenOptions of the navigator as shown below:

2 headerStyle: {
3 borderBottomWidth: 4,
4 },

Increasing the value of the property borderBottomWidth will make the border thicker.


At times, the UI of the screen might not require a header border or shadow at all. In such cases, you can always customize the screenOptions by adding the property headerShadowVisible and setting it to false.

2 headerShadowVisible: false,

You will get the desired output both on iOS and Android:





React Navigation docs are a great asset for learning more about the library and what customization options it provides.

Also, check out my other post on how to remove the bottom tab bar border in React Navigation.

Source code available at GitHub

More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. In this blog, I write about Technical writing, Node.js, React Native and Expo.

Currently, working at Expo. Previously, I've worked as a Developer Advocate at Draftbit, and Senior Content Developer at Vercel.

Copyright ©  2019-2023 Aman Mittal · All Rights Reserved.