Cannot style shadow in react navigation header

[demoox]

Current behavior

I tried this:

screenOptions={{
  headerShown: true,
  headerStyle: {
    backgroundColor: '#4aceaf',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 1,
    shadowRadius: 5,
    elevation: 5
  },
  headerTitle: 'Home', 
  headerTintColor: '#000',
  headerTitleStyle: {
    fontSize: 15, 
  }, 
  headerShadowVisible: false
}}

I also tried this:

screenOptions={{
  headerShown: true,
  headerStyle: {
    backgroundColor: '#4aceaf
  },
contentStyle: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 1,
    shadowRadius: 5,
    elevation: 5
},
  headerTitle: 'Home', 
  headerTintColor: '#000',
  headerTitleStyle: {
    fontSize: 15, 
  }, 
  headerShadowVisible: false
}}

no shadow appears:

Expected behavior

Reproduction

https://snack.expo.dev/@demoox/cannot-style-shadow-header

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

package	version
@react-navigation/native	"^6.0.2"
@react-navigation/native-stack	"^6.9.17"
@react-navigation/stack	"^6.3.29"
react-native-gesture-handler	"~2.14.0"
react-native-safe-area-context	"4.8.2"
react-native-screens	"~3.29.0"
react-native	"0.73.6"
expo	"~50.0.14"

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.0.2, latest: 6.1.17)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[demoox]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.0.2, latest: 6.1.17)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

The problem persists

[demoox]

Anyone have a solution?

[satya164]

As documented on this page, the only supported property is backgroundColor

https://reactnavigation.org/docs/native-stack-navigator/#headerstyle

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[demoox]

ds

Comme indiqué sur cette page, la seule propriété prise en charge estbackgroundColor

https://reactnavigation.org/docs/native-stack-navigator/#headerstyle

@satya164 Can you provide a clearer answer or solution instead of simply closing the topic?
Is it possible to add a custom shadow other than in headerStyle? because many apps do it

[satya164]

As I already wrote, the only supported property is backgroundColor. "only" means there's nothing else that's supported, which means shadow is not supported. Please try to read next time.

[satya164]

@demoox native stack is less customizable as mentioned on top of the page and only supports what's supported by Android/iOS. If you want more customization you either need to use a custom header with the header option, or use JS stack (@react-navigation/stack).