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)