How remove bottom border of header

[Piero87]

Current Behavior

In react navigation 4 I could remove the bottom border of the header, in version 5 I can't, this is a screen of the border:

And this is the code I use:

    <Stack.Navigator
      initialRouteName="Page1"
      screenOptions={{
  headerStyle: {
    backgroundColor: commonStyles.mainBGColor,
    borderBottomWidth: 0,
  },
  headerTintColor: '#fff',
  headerTitleStyle: commonStyles.headerText,
}}
    >

Expected Behavior

I want remove the bottom border i add some arrow to indicate the border to make my self more clear:

Your Environment

software	version
iOS
@react-navigation/stack
react-native-gesture-handler
react-native-safe-area-context
react-native-screens
react-native
yarn

[WoLewicki]

It looks like the prop connected with it is shadowOffset here (for iOS):

react-navigation/packages/stack/src/views/Header/HeaderBackground.tsx

Line 38 in 4578849

shadowOffset: {

so you can change it by providing something like shadowOffset: { height: 0, width: 0 }

[pmadruga]

This is what worked for me:

screenOptions={{
        headerHideShadow: true
      }}

EDIT: If you're using native-stack.

[WoLewicki]

@pmadruga I am afraid it worked for you in native-stack, not in stack. Am I right?

[hkadyanji]

@Piero87 adding shadowColor: 'transparent' in headerStyle worked for me

[Mangor1no]

@Piero87 adding shadowColor: 'transparent' in headerStyle worked for me

This solution works for me! Thank you a lot!

[pmadruga]

@pmadruga I am afraid it worked for you in native-stack, not in stack. Am I right?

You're right, @WoLewicki - thanks for pointing it out.

[NishargShah]

screenOptions={{
    headerStyle: { elevation: 0 }
}}

works fine in android 😄

[goodryanboy]

borderBottomColor: 'transparent' works for me ios

[dereknahman]

Here's what I did for my use case (i.e., the header had to have the exact same colour as the screen's backgroundColor):

 options={{
          title: false,
          headerTransparent: true,
        }}

...haven't tested on Android yet but it works on iOS.

[darrylyoung]

The following worked for me:

headerStyle: {
  ... // your other styles
  shadowColor: 'transparent',
}

[gtallen13]

headerTransparent:true, worked for me

[hungdev]

The following worked for me:

headerStyle: {
  ... // your other styles
  shadowColor: 'transparent', // ios
  elevation: 0  // android
}

thank you. it worked for me. React navigation version 5

[russiann]

headerShadowVisible works for me:

https://reactnavigation.org/docs/native-stack-navigator/#headershadowvisible

<Stack.Navigator
  initialRouteName="home"
  screenOptions={{
    headerShadowVisible: false
  }}
>

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[fmacedoo]

@russiann
headerShadowVisible works for me:

https://reactnavigation.org/docs/native-stack-navigator/#headershadowvisible

<Stack.Navigator
  initialRouteName="home"
  screenOptions={{
    headerShadowVisible: false
  }}
>

Worked pretty well at "@react-navigation/native-stack": "^6.2.5".
No other option replied here worked.

[ashkan-esz]

headerShadowVisible works for me:

https://reactnavigation.org/docs/native-stack-navigator/#headershadowvisible

<Stack.Navigator
  initialRouteName="home"
  screenOptions={{
    headerShadowVisible: false
  }}
>

tnx , this one woked for me.

[alamothe]

I have the opposite problem with native stack navigator. When I do headerTransparent: true, the "shadow" disappears:

		<MyStack.Navigator
			screenOptions={{
				headerTransparent: true,
				headerBlurEffect: "systemChromeMaterialLight",
				headerShadowVisible: true,
			}}
		>

Do you know how to get it back? The native iMessage app on iOS still has the "shadow" even though it uses transparent background.

[varda-altusnova]

@alamothe have u managed to resolve that?