How to use custom width for each tabs in BottomTabBar react navigation?

Question

I'm using react navigation V3 and I have a bottom tab navigation in my app as follow:

export default createBottomTabNavigator({
profile: {
    screen: ProfileUser,
    navigationOptions:{
      title : 'Profile',          
    }  
  },
  leaderboard :{
      screen : Leaderboard,
      navigationOptions:{          
      title : 'Leaderboard',       
    } 
  },
home :{
      screen : Homeboard, 
      navigationOptions:{
        title : 'Home',
        tabBarIcon: ({tintColor}) => (
          <BattleTabIcon              
              width={30}
              height={30}
          />
        ),        
      },  
  },
  store :{
      screen : AppStore,
      navigationOptions:{
        title : 'Store',
      }           
  },
  setting :{
    screen : Settings,
    navigationOptions:{
      title : 'Setting',     
    }           
},
},{
  tabBarOptions: {
      scrollEnabled : true,
      upperCaseLabel: false,
      activeTintColor: '#fff',
      activeBackgroundColor :'#1f1f3c',
      inactiveTintColor: '#8583a9',
      showLabel: false,
      style: {          
          backgroundColor: '#131332',
          height: 50,
          borderTopWidth: 2,
          borderTopColor: '#aeaeae',                      
      },      
      labelStyle: {
          fontSize: 12,
          fontFamily : 'Questrial-Regular',
          marginBottom: 5
      },
  },
  initialRouteName : 'home',


});

I have 5 tabs, I want to have more width for my center tab, also I need to have border for each on but I dont know how to do that.

please help me with your advices.

Thanks.

Answer 1

You could always create a custom tab component and do it yourself:

const MainTabNavigator = TabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Tab2: {
    screen: EmptyTab,
  },
  Tab3: {
    screen: EmptyTab,
  }
}, {
  initialRouteName: 'Home',
  tabBarPosition: "bottom",
  tabBarComponent: props => {
    return <TabNavigation {...props}
    items={[
      {
        text: "Home", icon: { name: "home", type: "Entypo" },
        route: "Home"
      },
      {
        text: "Tab2", icon: { name: "data-usage", type: "MaterialIcons" },
        route: "Tab2",
        expand: true
      },
      {
        text: "Tab3", icon: { name: "package", type: "Octicons" },
        route: "Tab3"
      }
    ]}
    />
  }
});

And then use the expand prop of that item to control the style. This is my TabNavigation:

class TabNavigation extends React.PureComponent {

    route = (route) => {
        this.props.navigation.navigate(route);
    }

    render(){

        let tabs = this.props.items.map((item, index) => {

            let active = ((this.props.navigationState && this.props.navigationState.index === index) || (this.props.navigation && this.props.navigation.state && this.props.navigation.state.index === index));

            let icon, text = null;

            if (item.icon){
                let iconStyle = {
                    color: active ? this.props.theme.navBarTextColorActive : this.props.theme.navBarTextColor,
                    size: 23
                };

                if (item.icon.size)
                    iconStyle.fontSize = item.icon.size;
                if (item.icon.color)
                    iconStyle.color = item.icon.color;

                icon = this.props.getIcon(item.icon.type, item.icon.name, iconStyle.size, iconStyle.color);
            }

            if (item.text)
                text =  <Text active={active}>{item.text}</Text>;

            return (<TouchableOpacity key={index} onPress={() => this.route(item.route)} style={{flex: 1}}>
                    <View style={styles.buttonWrapper}>
                        {icon}
                        {text}
                    </View>
                </TouchableOpacity>)

        });

        if (tabs.length == 0)
        return null;
        else
        return (<NavBar>{tabs}</NavBar>)

       }

}

You will need to add the logic there for the styles.