Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Style Tabbar with Icons

See original GitHub issue

Hi, I have a Tabbar with icons and Text i am facing 2 problems: 1-Text doesn’t go to the bottom of the icon 2-ActiveTabStyle doesn’t apply on tabs so i can’t style my tabs her is my code `

     <Tabs tabBarPosition = "bottom" {...tabProps}>

                    <Tab heading = {<TabHeading>
                            <Icon name="home"/>
                        <Text>Acheter</Text>
                    </TabHeading>}
                         tabStyle = {{backgroundColor: 'transparent'}}
                         activeTabStyle = {{backgroundColor: 'transparent'}}
                         activeTextStyle = {{fontWeight:'bold', color: '#651FFF', fontSize:17}}
                         textStyle = {{color: '#7C4DFF', fontWeight: 'bold', fontSize:16}}
                    >
                        <ProduitsScene style ={{ marginTop: -2}}/>
                    </Tab>

                    <Tab heading = {<TabHeading><Icon name="briefcase"/></TabHeading>}>
                    </Tab>

                    <Tab heading = {<TabHeading><Icon name="ios-menu-outline"/></TabHeading>}>
                    </Tab>

                    <Tab heading = {<TabHeading><Icon name="ios-compass-outline"/></TabHeading>}>
                    </Tab>

                    <Tab heading = {<TabHeading><Icon name="person"/></TabHeading>}>
                    </Tab>
                </Tabs>

her is a screen of my tabs capture d ecran 2017-06-13 a 15 45 28

Issue Analytics

State:
Created 6 years ago
Comments:15 (2 by maintainers)

Top GitHub Comments

5reactions

shivrajkumarcommented, Jun 20, 2017

try <TabHeading style={{ flexDirection: 'column' }}><Icon name="briefcase"/><Text>Tab Text</Text></TabHeading>

4reactions

akhil-gacommented, Mar 6, 2018

@PdxMehmet @Elitebigboss90 posting code for the common case without <TabHeading/>

Code

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs, Text } from 'native-base';
export default class TabsExample extends Component {
  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs initialPage={1} >
          <Tab heading="Tab1" tabStyle={{ backgroundColor: 'transparent' }}
            activeTabStyle={{ backgroundColor: 'transparent' }}
            activeTextStyle={{ fontWeight: 'bold', color: '#651FFF', fontSize: 17 }}
            textStyle={{ color: '#7C4DFF', fontWeight: 'bold', fontSize: 16 }}>
            <Text>Tab one</Text>
          </Tab>
          <Tab heading="Tab2"
            tabStyle={{ backgroundColor: 'transparent' }}
            activeTabStyle={{ backgroundColor: 'transparent' }}
            activeTextStyle={{ fontWeight: 'bold', color: '#651FFF', fontSize: 17 }}
            textStyle={{ color: '#7C4DFF', fontWeight: 'bold', fontSize: 16 }}>
            <Text>Tab two</Text>
          </Tab>
          <Tab heading="Tab3"
            tabStyle={{ backgroundColor: 'transparent' }}
            activeTabStyle={{ backgroundColor: 'transparent' }}
            activeTextStyle={{ fontWeight: 'bold', color: '#651FFF', fontSize: 17 }}
            textStyle={{ color: '#7C4DFF', fontWeight: 'bold', fontSize: 16 }}>
            <Text>Tab three</Text>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

Gif

tab styling

handling style programmatically while using <Tabheading/>

Code

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs, Text, TabHeading, Icon } from 'native-base';
import { StyleSheet } from 'react-native'
export default class TabsExample extends Component {

  constructor(props) {
    super(props)
    this.state = { page: 1 }
  }

  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs initialPage={1} onChangeTab={({ i }) => this.setState({ page: i })}>
          <Tab heading={<TabHeading style={this.state.page === 0 ? styles.activeTabStyle : styles.tabStyle}>
            <Icon name="camera" />
            <Text style={this.state.page === 0 ? styles.activeTextStyle : styles.textStyle}>Camera</Text>
          </TabHeading>}>
            <Text>Tab one</Text>
          </Tab>
          <Tab heading={<TabHeading style={this.state.page === 1 ? styles.activeTabStyle : styles.tabStyle}>
            <Text style={this.state.page === 0 ? styles.activeTextStyle : styles.textStyle}>No Icon</Text>
          </TabHeading>}>
            <Text>Tab two</Text>
          </Tab>
          <Tab heading={<TabHeading style={this.state.page === 2 ? styles.activeTabStyle : styles.tabStyle}>
            <Icon name="apps" />
          </TabHeading>}>
            <Text>Tab three</Text>
          </Tab>
        </Tabs>
      </Container >
    );
  }
}

const styles = StyleSheet.create({
  tabStyle: { backgroundColor: 'transparent' },
  activeTabStyle: { backgroundColor: 'transparent' },
  activeTextStyle: { fontWeight: 'bold', color: '#651FFF', fontSize: 17 },
  textStyle: { color: '#7C4DFF', fontWeight: 'bold', fontSize: 16 }
})

Gif

tab styling2