react-native-material-bottom-navigation: elevation doesn't work properly

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.

@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

How do I solve the problem when the elevation is on top of the view?

Very interesting, thank you. Seems like a broader issue than I initially thought. I’m planning a rewrite of the BottomNavigation (see https://github.com/timomeh/react-native-material-bottom-navigation/issues/31#issuecomment-310229009), and I’ll keep an eye on the elevation issue, so it becomes less of a problem in the future… at least for the standalone version – hopefully for the react-navigation version, too.

@nonameolsson The elevation should be on the style inside bottomNavigationOptions, so try this: 🙂

  // ...
  tabBarOptions: {
    bottomNavigationOptions: {
      style: {
        borderTopWidth: 0,
        elevation: 8
      },
      labelColor: '#fff',
      rippleColor: '#fff',
     // ...

Also note that the elevation is not as visible as in the material guidelines, since it’s mostly a shadow to the bottom, as I described earlier.