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.