How do I hide the shadow under react-navigation headers?
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,
}
}
});
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}}
/>
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.