elevation doesn't work properly

[alvaromb]

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.

[alvaromb]

@timomeh please ping me if I can help you track and solve this one 😉

[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.

[nonameolsson]

I have tried your suggestion @timomeh but I can't get it to work. This is my navigator:

import { Platform } from 'react-native'
import { NavigationComponent } from 'react-native-material-bottom-navigation'
import { TabNavigator } from 'react-navigation'

import CurrentContainer from '../containers/currentContainer'
import OffersContainer from '../containers/offersContainer'
import BookingsContainer from '../containers/bookingsContainer'

const Home = TabNavigator({
  Current: { screen: CurrentContainer },
  Offers: { screen: OffersContainer },
  Bookings: { screen: BookingsContainer }
}, {
  tabBarComponent: NavigationComponent,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    style: {
      borderTopWidth: 0,
      elevation: 8, 
      position: 'absolute', 
      left: 0, 
      bottom: 0,
      right: 0,
    },
    bottomNavigationOptions: {
      labelColor: '#fff',
      rippleColor: '#fff',
      tabs: {
        Current: {
          barBackgroundColor: '#e36d2a',
        },
        Offers: {
          barBackgroundColor: '#3f51b5'
        },
        Bookings: {
          barBackgroundColor: '#9c27b0',
        }
      }
    }
  }
})

export default Home

I use style: { borderTopWidth: 0, elevation: 8}, as you can see. But i'm unable to get any elevation at all. Is it not possible to add elevation, or am I doing anything wrong here?

Thanks for a great library 👍

[timomeh]

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

[Algram]

It does not work for me even when setting the style correctly. Below is my code. I am using a little hack to display the bar without text, but other than that it should be a default configuration.

const BottomBarNavigator = TabNavigator({
  Log: { screen: LogScreen },
  Community: { screen: CommunityScreen },
  Milestone: { screen: MilestoneScreen },
  Analysis: { screen: AnalysisScreen }
}, {
  backBehavior: 'none',
  tabBarComponent: NavigationComponent,
  tabBarPosition: 'bottom',
  lazy: true,
  swipeEnabled: false,
  animationEnabled: false,
  tabBarOptions: {
    bottomNavigationOptions: {
      labelColor: COLOR.SECONDARY,
      activeLabelColor: '#FFFFFF',
      backgroundColor: COLOR.PRIMARY,
      rippleColor: '#FFFFFF',
      style: { borderTopWidth: 0, elevation: 8 },
      innerStyle: { marginBottom: -15 },
      shifting: false,
      tabs: {
        Log: {
          label: ' ',
          icon: <Icon style={{ color: COLOR.SECONDARY }} name="book" />,
          activeIcon: <Icon style={{ color: '#FFFFFF' }} name="book" />
        },
        Community: {
          label: ' ',
          icon: <Icon style={{ color: COLOR.SECONDARY }} name="people" />,
          activeIcon: <Icon style={{ color: '#FFFFFF' }} name="people" />
        },
        Milestone: {
          label: ' ',
          icon: <Icon style={{ color: COLOR.SECONDARY }} name="trophy" />,
          activeIcon: <Icon style={{ color: '#FFFFFF' }} name="trophy" />
        },
        Analysis: {
          label: ' ',
          icon: <Icon style={{ color: COLOR.SECONDARY }} name="stats" />,
          activeIcon: <Icon style={{ color: '#FFFFFF' }} name="stats" />
        }
      }
    }
  }
});

[jakst]

I am trying to apply shadow to a regular top tab navigation on Android, but failing as well. I've tried multiple variations to get shadow, but none seem to apply shadow. Shouldn't this work?

const Navigation = TabNavigator({
    Tab1: { screen: Screen1 },
    Tab2: { screen: Screen2 }
},
{
    tabBarOptions: {
        style: {
            elevation: 8
        }
    }
})

[timomeh]

@Jakst Did you try it with borderTopWidth: 0 as explained in https://github.com/timomeh/react-native-material-bottom-navigation/issues/8#issuecomment-282780313?

It should work with

tabBarOptions: {
  bottomNavigationOptions: {
    style: { borderTopWidth: 0, elevation: 8 }
  }
}

[timomeh]

@Algram Does it work without your marginBottom: -15 hack? Also please notice that the elevation is mostly a shadow to the bottom, so the top shadow isn't that much visible, as explained in https://github.com/timomeh/react-native-material-bottom-navigation/issues/8#issuecomment-282780313.

If nothing of that works, which react-navigation and react-native version are you using?

[jakst]

@timomeh Nvm my problem. I didn't have this component applied to my tabNavigator.

[waquidvp]

If this might help in any way, I was experimenting with this issue. It seems when you add a margin to the top of the Bottom Navigation, then the elevation is visible but this then creates the problem of the screen being cut off a bit.

bottomNavigationOptions: {
     style: {
          borderTopWidth: 0,
          elevation: 4,
          marginTop: 4
     },
     ...
}

Could this be a problem with the View that react-navigation renders the tabBarComponent inside?

[waquidvp]

I was doing some experimenting, and I came to a conclusion that this issue is to do with react-navigation. I rolled back to react-navigation version 1.0.0-beta.9 and the elevation worked with no problem. I am on version 1.0.0-beta.11 now and it is not working for the default tab bar either.

The issue can be found in the react-navigation repo: https://github.com/react-community/react-navigation/issues/1615

[waquidvp]

Tried the latest branch of the react-navigation repo, this fixed the elevation problem but it still requires the borderTopWidth for elevation to work.

style: {
     borderTopWidth: 0,
     elevation: 8,
}

[timomeh]

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.

[YasirSherzad]

Hi, I have the same problem with tab bar being at the top, there is no elevation applied, I am using react native 0.48, here is my code

import { TabNavigator } from 'react-navigation';

import TabPersonalNavigation from '../../components/tabPersonal/Screens/TabPersonalNavigation';
import TabContactNavigation from '../../components/tabContact/Screens/TabContactNavigation';
import TabEmployerNavigation from '../../components/tabEmployer/Screens/TabEmployerNavigation';
import TabBioNavigation from '../../components/tabBio/Screens/TabBioNavigation';

const routeConfiguration = {
    TabPersonalNavigation: { screen: TabPersonalNavigation },
    TabContactNavigation: { screen: TabContactNavigation },
    TabEmployerNavigation: { screen: TabEmployerNavigation },
    TabBioNavigation: { screen: TabBioNavigation },
  }

const tabBarConfiguration = {
    tabBarPosition: 'top',
    tabBarOptions:{
        activeTintColor: 'rgb(52,113,157)',
        inactiveTintColor: 'rgb(146,148,151)',
        showIcon: true,
        style: {
            backgroundColor: 'rgb(255,255,255)',
        },
        indicatorStyle: {
            backgroundColor: 'rgb(67,126,181)',
        },
        iconStyle: {
            width: 28,
            height: 28
        },
        labelStyle: {
            fontSize: 11,
        },
    }
}

export const TabBarUser = TabNavigator(routeConfiguration, tabBarConfiguration)

each of those Tabs are in turn a stackNavigator. can someone help! thanx

[timomeh]

@YasirPanjsheri You don't have any elevation defined in your example.

[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

[timomeh]

@YasirPanjsheri I wrote something about the elevation and a simple fix in the second comment of this thread, see: https://github.com/timomeh/react-native-material-bottom-navigation/issues/8#issuecomment-282780313

[timomeh]

Does anyone still notice this issue or can it be closed?

[timomeh]

Since the last comment is 9 months ago and this isn't really an issue with the bottom navigation, I'm going to close it.

[duarte-evocorp]

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