react-native-simple-tab

A React Native Tab Navigation, made for simplicity, works on both Android and iOS.

iOS (Left) | Android (right)

onlyIcon props on Nav set to true

Features

• worked with (react-native-router-flux) or any kind of navigation solutions
• cross-platform icons by default
• simple and clean UI

Inspiration

Salestock Indonesia

Installation

• npm install --save react-native-simple-tab react-native-vector-icons

After Installation (this step is required)

• react-native link

Basic Usage

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { Nav, Tab } from 'react-native-simple-tab';

class MyExample extends Component {
  constructor() {
    super();

    this.state = {
      page: 0,
    };

    this._onTabChange = this._onTabChange.bind(this);
  }

  _onTabChange(tabIndex) {
    this.setState({ page: tabIndex });
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.myPackage}>
          react-native-cross-platform-tab
        </Text>
        <View style={{ flex: 1 }}>
          <Text style={styles.myText}>
            Selected Tab Index
          </Text>
          <Text style={styles.myTabIndex}>
            {this.state.page}
          </Text>
        </View>
        <Nav
          selected={this.state.page}
          onTabChange={this._onTabChange}>
            <Tab name="home" label="Home" />
            <Tab name="heart" label="Favorite" />
            <Tab name="cart" label="Cart" />
            <Tab name="shirt" label="Custom" />
            <Tab name="menu" label="Menu" />
        </Nav>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    fontSize: 20,
    textAlign: 'center',
    marginTop: 40,
  },
  myPackage: {
    flex: 1,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  myText: {
    textAlign: 'center',
  },
  myTabIndex: {
    fontSize: 20,
    textAlign: 'center',
    fontWeight: 'bold',
  },
});

export default MyExample;

More Icons

Check Out Here and use it's name into Tab name props.

Nav props

| Props | Type | Default | Description | | --- | --- | --- | --- | | selected | number | - | used to determine what tabIndex that currently selected | | onTabChange | function | () => {} | event onTabChange with param tabIndex | | backgroundColor | string | 'white' | Nav background color | | borderTopColor | string | '#DDDDDD' | Nav border top color | | height | number | 42 | Nav height | | onlyIcon | boolean | false | display only icon or icon with label | | pressOpacity | number | 0.7 | opacity when Tab be pressed (min: 0, max: 1) | | activeColor | string | 'black' | active color on all Tabs | | unActiveColor | string | 'gray' | unactive color on all Tabs | | iconSize | number | 22 | icon size on all Tabs | | fontSize | number | 11 | font size on all Tabs | | style | object | - | your own custom style for Nav wrapper |

Tab props

| Props | Type | isRequired? | Description | | --- | --- | --- | --- | | name | string | Required | used for icon name | | label | string | Optional | Tab label | | fontStyle | object | Optional | your own custom style for each Text on Tab | | style | object | Optional | your own custom style for Tab wrapper |

License

MIT