search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.3k stars 4.97k forks source link

Cannot style shadow in react navigation header #11970

Closed demoox closed 2 weeks ago

demoox commented 2 weeks ago

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:

obtained

Expected behavior

expected

Reproduction

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

Platform

Packages

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[bot] commented 2 weeks ago

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

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

demoox commented 2 weeks ago

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 commented 2 weeks ago

Anyone have a solution?

satya164 commented 2 weeks ago

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

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

github-actions[bot] commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

@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).