How to customize the bottom bar in react native?

I am using a bottom bar in react native. How do I change the background color and make the active bar highlighted with a line at bottom as shown in the image?

Code -

export const InternalStacks = TabNavigator({
    Home: { screen: HomeStack },    
    Graph: { screen: GraphStack }
},{
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            switch(routeName){
                case 'Home':
                    iconName = require('../assets/icons/home.png');
                    iconNameFocused = require('../assets/icons/home.png');
                    break;
                case 'Graph':
                    iconName = require('../assets/icons/chart.png');
                    iconNameFocused = require('../assets/icons/chart.png');
                    break;
            }
            if(focused)
            return ( <Image style={{width: 20, height: 20, tintColor }} source={iconNameFocused} /> );
            else
            return ( <Image style={{width: 20, height: 20, tintColor }} source={iconName} /> );
        }
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: '#FBC530',
      inactiveTintColor: 'black',
    },
    animationEnabled: false,
    swipeEnabled: false,
  });

Current design - Current Design

Required Design - Required Design


Tried with the below,

tabBarColor: '#E64A19',
backgroundColor: 'white',

but none of the worked. What is the better way to achieve the required design?

PS - Not worried about the icons.

1 answer

  • answered 2018-05-16 16:25 Sara Inés Calderón

    You have access to more tabBarOptions that might help. Here's how we style ours:

      {
        tabBarPosition: 'bottom',
        tabBarOptions: {
          showLabel: false,
          showIcon: true,
          activeTintColor: black,
          inactiveTintColor: gray,
          activeBackgroundColor: white,
          inactiveBackgroundColor: white,
          style: {
            backgroundColor: white,
          },
          tabStyle: {
            backgroundColor: white,
          },
        },
      }
    

    as far as adding the bottom bar, you can toggle icons when they are focused like this:

      HOME: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor, focused }) => <HomeIcon focused={focused ? UnderlinedIcon : RegularIcon } />,
    },
    

    },

    So maybe in one of the icons you add a line at the bottom and in the other you don't, and then they'll toggle when focused. Hope this helps!!