Thursday, March 16, 2023
HomeReactTake away backside border or shadow on header in React Navigation by...

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


Take away backside border or shadow on header in React Navigation

Printed on Jun 5, 2022

2 min learn

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:

ss1

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

ss2

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.

ss3

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:

ss4

ss5

Conclusion

🔗

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


I am a software program developer and a technical author. On this weblog, I write about Technical writing, Node.js, React Native and Expo.

At present, working at Expo. Beforehand, I’ve labored as a Developer Advocate, and Senior Content material Developer with corporations like Draftbit, Vercel and Crowdbotics.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments