react-native-simple-tab v1.0.8

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

Tab props

License

MIT