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

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 2

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 3

In v5 you can do the following

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

Answer 4

For React Native Navigation 5

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

Or

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

Answer 5

The shadow is achieved via elevation, use:

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

Answer 6

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