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

Question

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

Answer 1

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.

Answer 2

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}}
/>

Answer 3

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,
}
}
});

Answer 4

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
},
},
})

Answer 5

In v5 you can do the following
<Stack.Navigator>
<Stack.Screen
name="Example"
component={ExampleComponent}
options={{
headerStyle: {
elevation: 0,
shadowOpacity: 0
},
}}
/>
</Stack.Navigator>

Answer 6

Good afternoon, React Navigation 6:
<Stack.Navigator screenOptions={{headerShadowVisible:false}}>

Answer 7

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
}
}
);

Answer 8

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, },
}}
>

Answer 9

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

Answer 10

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
}
}

Answer 11

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,
},
},
},
);

Answer 12

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

Answer 13

it is:
options: {{
headerShadowVisible: false,
}}
check the docks for more info:
https://reactnavigation.org/docs/native-stack-navigator

Answer 14

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
}
}
}
});

Answer 15

The shadow is achieved via elevation, use:
headerStyle: {
backgroundColor: 'white',
shadowColor: 'transparent',
elevation: 0,
},

Answer 16

For React Native Navigation 5
<Stack.Screen
name={"Profile"}
component={Profile}
options={{
headerTitle: "Profile",
headerHideShadow: true,
}}
/>
Or
<Stack.Navigator
screenOptions={{
headerHideShadow: true,
}}
>