CODEWITHSUNDEEP
reactjsreact-nativereact-navigationnative-base
merry-go-round
merry-go-round

Reputation: 4615

Can't change native base tabs' height

Tab is working correctly. But I can't change the underline and the height of <Tabs> like the image below

enter image description here

I'm using Native-Base to handle tabs. But I can't think of any way to change its default height. 

<Tabs initialPage={0}
  tabBarUnderlineStyle={styles.tabBarUnderlineStyle}
  style={{height:40}}
>
  <Tab 
    heading="Following"
    tabStyle={styles.tabStyle}
    activeTabStyle={styles.activeTabStyle}
    activeTextStyle={styles.activeTextStyle}
    textStyle={styles.textStyle}
  >
    <FeedScreen navigation={this.props.navigation}/>
  </Tab>

Should I use another navigation? native-base is terrible to customize.. :(

UPDATE as request, I'm sharing my style

  tabStyle : {
    // backgroundColor: theme.colors.navbar,
    backgroundColor: 'white',
    justifyContent: 'center',
    width: 120,
    height: 40,
  },
  activeTabStyle: {
    backgroundColor: 'white',
    height: 40,
  },
  textStyle: {
    // color: 'white',
    color: "#968D8A"
  },
  activeTextStyle: {
    // color: 'white',
    color: theme.colors.navbar
  },
  tabBarUnderlineStyle: {
    backgroundColor: theme.colors.navbar,
    height: 2
  }

Upvotes: 3

Views: 4720

Answers (1)

akhil xavier
akhil xavier

Reputation: 1847

Use tabContainerStyle prop of <Tabs/> to adjust the height. Same way use tabBarUnderlineStyle prop to style the tab indicator.

<Tabs
      tabContainerStyle={{ height: 60 }}
      tabBarUnderlineStyle={{
        backgroundColor: "black",
        height: 5,
      }}
    />

Upvotes: 12

Related Questions