Take away backside border or shadow on header in React Navigation by Aman Mittal

React Navigation is an incredible navigation library in React Native ecosystem. I’ve been an enormous fan as a result of it permits plenty of customization when utilizing totally different navigators (equivalent to Stack, Tab, or Drawer).

One of many customizations that may be carried out is to take away the border on the backside of the header. By default, the Stack and Tab Navigators on this library add a header on a display screen. This header has a default backside border or shadow.

Right here is an instance of a border on the header on iOS:

The orange arrows are used to focus on the shadow. Equally, on Android, the width is skinny and exhausting to note.

To make it extra seen, you may populate the screenOptions of the navigator as proven under:

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

Rising the worth of the property borderBottomWidth will make the border thicker.

At instances, the UI of the display screen won’t require a header border or shadow in any respect. In such instances, you may at all times customise the screenOptions by including the property headerShadowVisible and setting it to false.

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

You’re going to get the specified output each on iOS and Android:

🔗

React Navigation docs are an amazing asset for studying extra concerning the library and what customization choices it offers.

Additionally, try my different submit on tips on how to take away the underside tab bar border in React Navigation.

Supply code accessible at GitHub