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.

Answer 1

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

Answer 3

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

Answer 5

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 6

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