Is it possible to add icons to Native Base tabs?

Question

Native Base docs only shows how to change background color, text color and font size. But it seems not possible to add icons to tabs.

Is it possible or I will need to fork and implement myself?

Thank you.

Answer 1

With NativeBase 2.0 and above you can add icons to Tabs using TabHeading tags inside heading property.

<Content>
    <Tabs>
        <Tab heading={<TabHeading><Icon name='settings'/></TabHeading>}>
        <Tab heading={<TabHeading><Icon name='home'/></TabHeading>}>
     </Tabs>
</Content>

Answer 2

You need to implement yourself. I have implemented this functionality. Please have a look if that would be help you.

Create tabs.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,RefreshControl
} from 'react-native';
import IconTabs from 'react-native-vector-icons/Ionicons';
import NavigationBar from 'react-native-navbar';
import { Container, Header, Title, Button,Icon } from 'native-base';

const Tabs = React.createClass({
  tabIcons: [],

  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,
  },

  componentDidMount() {
    this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
  },

  setAnimationValue({ value, }) {
    this.tabIcons.forEach((icon, i) => {
      const progress = (value - i >= 0 && value - i <= 1) ? value - i : 1;
    });
  },


  render() {
      return (
      <View>

      <View style={[styles.tabs, this.props.style, ]}>
        {this.props.tabs.map((tab, i,) => {
          return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}>
            <IconTabs
              name={tab}
              size={20}
              color={this.props.activeTab === i ?  'rgb(255,255,255)' : 'rgb(189, 224, 250)'}
              ref={(icon) => { this.tabIcons[i] = icon; }}
            />
          <Text style={{fontWeight:'bold', fontSize:10, color:this.props.activeTab === i ? 'rgb(255,255,255)' : 'rgb(189, 224, 250)'}}>{`${this.props.name[i]}`}</Text>
          </TouchableOpacity>;
        })}
      </View>
      </View>
    );
    },
  });

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },
  tabs: {
    height: 50,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 0,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    backgroundColor: '#2196F3',
  },
});

export default Tabs;

And use this component in your view like following.

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,Navigator
} from 'react-native';

import ScrollableTabView from 'react-native-scrollable-tab-view';


import Tabs from './tabs';

export default class LeavesTab extends Component{

  constructor(props) {
    super(props);

  }


  _navigate(name) {
    this.props.navigator.push({
      name: name,
      passProps: {
        name: name
      }
    })
  }

  render() {
    let Tabname = ["Tab1","Tab2","Tab3","Tab4"];
    return (
          <ScrollableTabView
          initialPage={this.props.index}
          renderTabBar={() => <Tabs name={Tabname} navigator={this.props.navigator} showHeader={true} />}
          >
          <ScrollView tabLabel="md-calendar">
            <Requests tabLabel='Requests' navigator={this.props.navigator} />
          </ScrollView>
          <ScrollView tabLabel="md-checkbox">
            <LeaveList tabLabel='Approved' navigator={this.props.navigator} />
          </ScrollView>
          <ScrollView tabLabel="md-time">
            <LeaveList tabLabel='Pending' navigator={this.props.navigator} />
          </ScrollView>
          <ScrollView tabLabel="md-close-circle">
            <LeaveList tabLabel='Rejected' navigator={this.props.navigator} />
          </ScrollView>
        </ScrollableTabView>

  );
  }
}

const styles = StyleSheet.create({
});

Answer 3

Santosh's answer is right, but I found a cleaner way to implement this based on Native Base tabs.

A rendering tab component is necessary, like in Santosh's example.

But in the component, instead of using the ScrollableTabView, I can use React Native's Tabs component. An example:

export default class App extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>Header</Title>
        </Header>

        <Content>
          <Tabs renderTabBar={() => <TabBar />}>
            <One tabLabel="video-camera" />
            <Two tabLabel="users" />
          </Tabs>

        </Content>

        <Footer>
          <FooterTab>
            <Button transparent>
              <Icon name="ios-call" />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

EDIT @KumarSanketSahu said that version 2.0 is comming with the ability of changing icons in the tabs. My answer above is for version 0.5.x.