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


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, and Senior Content Developer with companies like Draftbit, Vercel and Crowdbotics.


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