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

Join 1300+ devs & subscribe to my newsletter!


🔗 Subscribe on Revue

Aman Mittal author

Software Developer and Technical Writer since 2017. Loves learning and writing about Node.js, React, React Native & Expo. Previously, worked as Developer Advocate, independent consultant, and technical writer with companies like Draftbit, Vercel and Crowdbotics.

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