React Native Tab

[

Tab Component for React-Native (android & ios)

Installation

$ npm install --save @farbod_/react-native-tab

Usage

Add Tab and pass children to it.

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet
} from 'react-native';
import Tab from '@farbod_/react-native-tab';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Tab>
          <View
            name="First"
            style={{ flex: 1, backgroundColor: '#0f0' }}
          >
            <Text>Tab 1</Text>
          </View>

          <View
            name="Second"
            style={{ flex: 1, backgroundColor: '#f00' }}
          >
            <Text>Tab 2</Text>
          </View>

          <View
            name="Third"
            style={{ flex: 1, backgroundColor: '#00f' }}
          >
            <Text>Tab 3</Text>
          </View>

          <View
            name="Fourth"
            style={{ flex: 1, backgroundColor: '#f0f' }}
          >
            <Text>Tab 4</Text>
          </View>
        </Tab>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

By default tab buttons scrolling. For Change, Pass 'mode' prop to component.

mode="scroll"

mode="normal"

Tab Props

| Prop | Values | Action | | --------------- |:----------------:| ----------------------------------------:| | style | style object | extra styles for tab component container | | tabBarStyle | style object | extra styles for tab bar | | buttonTextStyle | style object | extra styles for tab buttons text | | rollStyle | style object | extra styles for tab buttons roll | | mode | normal, scroll | make tab buttons static or scrollable | | reverse | true, false | direction of tab Buttons and Views |

View Props

| Prop | Values | Action | | --------------- |:----------------:| ----------------------------------------------------------------------:| | name | string | show name of tab | | onPress | function | action we need accur when click on tab (body not render for this view) |