How do I hide the shadow under react-navigation headers?

Question

How do I hide the shadow under react-navigation headers?
They look like this.

GollyJer · Accepted Answer · 2018-05-24T14:11:50.020

75

Add the following to the navigationOptions header style.

const AppNavigation = StackNavigator(
  {
    'The First Screen!': { screen: FirstScreen },
  },
  {
    navigationOptions: {
      header: {
        style: {
          elevation: 0, // remove shadow on Android
          shadowOpacity: 0, // remove shadow on iOS
        },
      },
    },
  },
);

The documentation isn't great yet, but you can learn about navigationOptions in the React Navigation Docs.

edited May 24 '18 at 14:11

answered Mar 10 '17 at 03:35

GollyJer

23,857
16
106
174

1

This gives me error: ```ExceptionsManager.js:63 Objects are not valid as a React child (found: object with keys {style}). If you meant to render a collection of children, use an array instead. in View (at CardStack.js:391)``` – zarcode Jun 22 '17 at 09:39

Anas · Answer 2 · 2021-09-10T09:47:40.303

in react navigation V5 this how you can do it: to do it for all screens apply screenOptions prop to <Stack.Navigator>

in example:

      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            elevation: 0,
            shadowOpacity: 0
          },
        }}
      />
      </Stack.Navigator>

to do it for a specific screen apply options prop to <Stack.Screen>

in example:

      <Stack.Screen
        name="Example"
        component={ExampleComponent}
        options={{
          headerStyle: {
            elevation: 0,
            shadowOpacity: 0
          },
        }}
      />

UPDATE V6:

since released React Navigation V6, you can't hide header shadow using headerStyle option. instead of that you can use bolean option headerShadowVisible and set it to be false like example bellow:

    <Stack.Screen
      name="Example"
      component={ExampleComponent}
      options={{headerShadowVisible: false}}
    />

Even with this option there is still a slight tint of a line — Andreas Bergström, Sep 29 '22 at 09:28

score 26 · Answer 3 · answered Dec 29 '17 at 19:44

The following works for me as the original Stylesheet uses "borderBottomWidth" on iOS:

const navigator = StackNavigator(screens, {
  navigationOptions: {
    headerStyle: {
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0,
    }
  }
});

score 20 · Answer 4 · answered May 10 '19 at 20:37

I don't know how much this answer will value, but sharing my code to let you know that this worked for me for react-navigation version: 3.9.1

const AppNavigation = StackNavigator(
{
  FirstScreen,
},
{
 defaultNavigationOptions: {
  headerStyle: {
    elevation: 0, //for android
    shadowOpacity: 0, //for ios
    borderBottomWidth: 0, //for ios
  },
},
})

score 9 · Answer 5 · answered Aug 07 '20 at 07:28

9

In v5 you can do the following

<Stack.Navigator>
      <Stack.Screen
        name="Example"
        component={ExampleComponent}
        options={{
          headerStyle: {
            elevation: 0,
            shadowOpacity: 0
          },
        }}
      />
</Stack.Navigator>

answered Aug 07 '20 at 07:28

Sjonchhe

790
8
16

This is exactly right to achieve in V5 of React Navigation. Thanks a lot! – ppulwey Feb 23 '21 at 15:23

score 8 · Answer 6 · edited Nov 15 '21 at 15:51

8

Good afternoon, React Navigation 6:

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

edited Nov 15 '21 at 15:51

Alberto Perez

2,561
1
14
21

answered Nov 15 '21 at 12:03

Ambesh Tiwari

648
7
11

score 4 · Answer 7 · answered Jun 23 '17 at 11:07

4

This works for me:

export const AppNavigator = StackNavigator(
    {
      Login: { screen: LoginScreen },
      Main: { screen: MainScreen },
      Profile: { screen: ProfileScreen },
    },
    navigationOptions: {
        headerStyle: {
            elevation: 0,
            shadowOpacity: 0,
        }
    }
);

or

export const AppNavigator = StackNavigator(
    {
      Login: { screen: LoginScreen },
      Main: { screen: MainScreen },
      Profile: { screen: ProfileScreen },
    },
    header: {
        style: {
            elevation: 0, //remove shadow on Android
            shadowOpacity: 0, //remove shadow on iOS
        }
    }
);

answered Jun 23 '17 at 11:07

zarcode

2,465
17
31

@GregBenner try adding code inside components, example `Login.navigationOptions = { headerStyle: { elevation: 0, shadowOpacity: 0, } }` – zarcode Sep 12 '17 at 11:12
const stackNavigatorLoggedInConfig = { cardStyle: { shadowColor: 'transparent' }, headerStyle: { height: 0, padding: '0', border: 'none' }, } – Greg Benner Oct 03 '17 at 20:30

score 3 · Answer 8 · answered May 02 '20 at 10:58

in react-navigation version 5.x.x:

      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: colors.darkGray,
          labelStyle: { fontSize: 12 },
          style: { backgroundColor: colors.white, borderTopWidth: 0, elevation: 0, shadowOpacity: 0, },
        }}
      >

Xavier Fabregat Pous · Answer 9 · 2023-02-27T12:28:26.640

3

it is:

options: {{
  headerShadowVisible: false,
}}

check the docs for more info:

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

edited Feb 27 '23 at 12:28

answered Jun 10 '22 at 16:00

Xavier Fabregat Pous

31
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 13 '22 at 21:59

score 2 · Answer 10 · answered Sep 11 '17 at 20:15

2

Try passing cardStyle: { shadowColor: 'transparent' }

export const AppNavigator = StackNavigator(
{
  Login: { screen: LoginScreen },
  Main: { screen: MainScreen },
  Profile: { screen: ProfileScreen },
},
cardStyle: { shadowColor: 'transparent' }

As per this question React Navigation Stack Navigator default shadow styling

answered Sep 11 '17 at 20:15

Greg Benner

668
7
15

Thanks, I tried every flavor of changing headerStyle to no effect. This did the trick at the bottom of my stack navigator! – SashaStojanovic Oct 25 '18 at 10:20

score 1 · Answer 11 · edited Mar 30 '18 at 19:39

1

I have been trying to solve this problem for the past couple of hours and have finally found the solution. The problem in my case was that the header was in a different Z position than the rest of the other components.

try:

const styles = {
  headerStyle: {
    zIndex: 1
  }
}

edited Mar 30 '18 at 19:39

LarsTech

80,625
14
153
225

answered Mar 30 '18 at 19:35

Jonathan Bencomo

79
2

score 1 · Answer 12 · answered May 05 '19 at 08:06

As of 2019 this answer doesn't work in version 3.

The new way of doing it is:


const AppNavigation = StackNavigator(
  {
    'The First Screen!': { screen: FirstScreen },
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        elevation: 0,
        shadowOpacity: 0,
      },
    },
  },
);

score 1 · Answer 13 · answered Jul 31 '20 at 08:57

I'm using react navigation v5, i use this code :

 const HomeStackScreen = ({navigation}) => (
  <HomeStack.Navigator
    initialRouteName="Home"
    headerMode="screen"
    mode="modal"
    screenOptions={{
      headerStyle: {
        backgroundColor: COLORS.WHITE,
        elevation: 0, // remove shadow on Android
        shadowOpacity: 0, // remove shadow on iOS
        borderBottomWidth: 0,
      },
      headerTintColor: COLORS.GREY,
      headerTitleStyle: {
        fontFamily: 'Montserrat-SemiBold',
        fontWeight: '600',
        fontSize: 18,
      },
    }}>
    <HomeStack.Screen
      name="Home"
      component={Home}
      options={{
        title: 'Expanded',
        headerLeft: () => <RenderHeaderLeft />,
        headerRight: () => <RenderHeaderRight navigation={navigation} />,
        headerTitleAlign: 'left',
      }}
    />
    <HomeStack.Screen name="HomeDetails" component={HomeDetails} />
  </HomeStack.Navigator>
);

put shadowOpacity and elevation inside headerStyle

score 1 · Answer 14 · answered May 02 '23 at 06:43

1

As of 2023, what works for me is:

options={{
    headerShadowVisible: false,
}}

answered May 02 '23 at 06:43

Patrick Ngandu Mudiayi

21
1

score 0 · Answer 15 · answered Mar 03 '18 at 17:37

You can try this, and it worked for me !

export const SignedOut = StackNavigator({
  SignIn: {
    screen: SignInScreen,
    navigationOptions: {
      title: "SignIn",
      headerStyle: {
        shadowOpacity: 0, // This is for ios
        elevation: 0 // This is for android
      }
    }
  }
});

score 0 · Answer 16 · edited Feb 05 '19 at 14:59

0

The shadow is achieved via elevation, use:

 headerStyle: {
     backgroundColor: 'white',
     shadowColor: 'transparent',
     elevation: 0,
 },

edited Feb 05 '19 at 14:59

Pingolin

3,161
6
25
40

answered Feb 05 '19 at 13:01

Peter Mugendi

565
6
15

score -2 · Answer 17 · answered Jan 27 '21 at 08:35

For React Native Navigation 5

<Stack.Screen
      name={"Profile"}
      component={Profile}
      options={{
        headerTitle: "Profile",
        headerHideShadow: true,
      }}
    />

Or

<Stack.Navigator
    screenOptions={{
      headerHideShadow: true,
    }}
  >

How do I hide the shadow under react-navigation headers?

17 Answers17

Linked