elevation doesn't work properly

The elevation prop applied to the bottom navigation bar doesn’t seem to work in the integration with react-navigation.

Possible workaround, apply also borderTopWidth: 0 to the style.

[timomeh]

Thanks for moving the issue over here. 🙂

One thing which really bugs me in the Material Design Guidelines, is that the elevation-shadow in the Bottom Navigation is inconsistent. In some examples you can clearly see a shadow. In others you can’t. The examples in the Behaviour Section look like there is no shadow at all. Maybe a half-transparent border. Since the elevation is mostly a bottom-shadow (besides affecting the order of overlapping views), this clearly visible shadow just can’t be achived with the elevation API.

Uuuuuggggh, sorry, this really drives me nuts. 😄

Nonetheless it’s veeery strange that the elevation is only visible with a border-style, even if it’s 0. And it’s not a Problem with the react-navigation integration, the standalone version has the same thing going on.

@alvaromb My initial thought was, that it may be related to { overflow: 'hidden' } in ./lib/BottomNavigation.js#L156. I removed it, but the behaviour is still the same. If you have any idea why this could happen, or have some time to track this, I would be more than happy. 😃

For anybody having trouble with setting the elevation

Use style: { borderTopWidth: 0, elevation: 8 }. I don’t know why.

[YasirSherzad]

@timomeh nvm, I solved the problem doing this:

tabBarOptions: {
      style: {
          marginBottom: 1
      }
}

none of the elevation worked out for me, I still prefer a decent solution with elevation