CODEWITHSUNDEEP
androidreact-native
Abhishek D
Abhishek D

Reputation: 475

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.

Upvotes: 1

Views: 4415

Answers (1)

Sara In&#233;s Calder&#243;n
Sara In&#233;s Calder&#243;n

Reputation: 1150

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!!

Upvotes: 4

Related Questions