CODEWITHSUNDEEP
react-nativereact-navigation
Pan
Pan

Reputation: 2101

createBottomTabNavigator setting the tabBar height causes the top line to disappear

Before I set the height,it looks like this, notice there is a line above the tabBar.

enter image description here

I change the tabBar height like this

{
    initialRouteName: "Find",
    tabBarOptions: {
        activeTintColor: '#0a0a0a',
        labelStyle: {
            fontSize: ScreenUtil.scale(14),
        },
        style: {
            backgroundColor: '#f7f7f7',
            //----------add this line------------------------//
            height: 70;
        },
    }
}

And it comes out like this, the line has now disappeared.

enter image description here

What should I do if I want to change the tabBar height and keep the line?

Upvotes: 0

Views: 10259

Answers (1)

nika95
nika95

Reputation: 325

You can use custom tabbar or just try to set the border. This is the example to show the custom tabbar.

export const MainTabNavigator = TabNavigator({
  Home: { screen: HomeScreen },
  Activity: { screen: ActivityScreen },
  Contacts: {screen: ContactsScreen },
  More: { screen: MoreScreen }
}, {
  tabBarComponent: TXTabBar, // custom tabbar component
  tabBarPosition: 'bottom',
});

Here is code to set the border.

{
    initialRouteName: "Find",
    tabBarOptions: {
        activeTintColor: '#0a0a0a',
        labelStyle: {
            fontSize: ScreenUtil.scale(14),
        },
        style: {
            backgroundColor: '#f7f7f7',
            //----------add this line------------------------//
            height: 70;
            borderTopWidth: 1,
            borderTopColor: 'red'
        },
    }
}

Upvotes: 8

Related Questions