SolvedNativeBase Style Tabbar with Icons

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

16 Answers

✔️Accepted Answer

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

Other Answers:

Active tab style does not apply probably since you are importing react native Text. Try to import Text from native base instead.

@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

More Issues: