6

I'm using React Navigation to construct a tab bar based type of an app in ReactNative.

  • "react-native": "0.44.0",
  • "react-navigation": "^1.0.0-beta.9",

I've got the navigation part pinned down and working. But with regards to styling I'm seeing a shadow on the StackNavigator (navigation controller) inside tab bar. Refer image below.

enter image description here

I'm not used to seeing this kind of a shadow on native iOS apps (I'm an iOS mobile dev trying out RN)

upon further investigation I saw that there are 'shadow' properties specified in 'Card.js' in ReactNavigation. So I manage to fixed the issue by passing in some overriding cardStyle like so

cardStyle: { shadowColor: 'transparent' }

Given all the above, I have two questions

Question 1 Why is this the default behaviour/styling?

To debug the issue, I decided to do a quick view debugging in Xcode and found that 'shadow' does not show up in there. enter image description here

Question 2 Why is this happening?. Since RN app is essentially a native app (native iOS in this instance), isn't view debugging a reliable way to debug these kind of view related issues?

hdsenevi
  • 953
  • 2
  • 14
  • 27
  • Thanks, this helped me. Even though this is older, we are on this older version of react-navigation and yeah not sure why this is the default values on the card. I'm assuming they fixed this in new versions – Sean Wang Jan 03 '19 at 17:31

0 Answers0