Remove bottom border or shadow on header in React Navigation or Expo Router

Published on Sep 24, 2023

2 min read

REACT-NATIVE

Update: This blog post was originally written on June 5, 2022. It is now up-to-date to include Expo Router relevant information.

Expo Router and React Navigation are both amazing navigation libraries in the React Native ecosystem. I have been a big fan of React Navigation as I have used it for a while but lately, I have started using Expo Router.

Both libraries share screenOptions since Expo Router is built on top of React Navigation. Using these options, the border at the bottom of the header can be removed. By default, the Stack and Tab Navigators in the React Navigation library add a header on the screen. Expo Router version 2 also follows the same pattern. The example described on this blog post applies to both libraries.

Header with a shadow

🔗

The 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

Disable the shadow

🔗

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

🔗

To learn more about navigation in React Native apps, React Navigation docs are a great asset for learning more about the library and what customization options it provides. Also, see Expo Router documentation if you want to implement file-based routing.

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


More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working as the documentation lead at 𝝠 Expo. Read more about me on the About page.


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