react-nativereact-navigation

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


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


Solution

  • 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.