Remove bottom border or shadow on header in React Navigation

Published on Jun 5, 2022

2 min read

REACT-NATIVE

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:

ss1

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

ss2

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

1screenOptions={{
2 headerStyle: {
3 borderBottomWidth: 4,
4 },
5}}

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

ss3

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.

1screenOptions={{
2 headerShadowVisible: false,
3}}

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

ss4

ss5

Conclusion

🔗

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

Share this article on Twitter


More Posts

Browse all posts

Join 1300+ devs & subscribe to my newsletter!

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, a Developer Advocate at Draftbit.


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