# @farbod_/react-native-tab

> React Native Tab Component

Latest version **0.3.0** (published 2018-09-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @farbod_/react-native-tab
pnpm add @farbod_/react-native-tab
yarn add @farbod_/react-native-tab
bun add @farbod_/react-native-tab
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2018-09-23 |
| First published | 2018-09-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | feri |
| Maintainers | farbod_ |

## Links

- npm: https://www.npmjs.com/package/@farbod_/react-native-tab
- Repository: https://github.com/Farbod-dev/react-native-tab
- Homepage: https://github.com/Farbod-dev/react-native-tab#readme
- Issues: https://github.com/Farbod-dev/react-native-tab/issues
- npm.io page: https://npm.io/package/@farbod_/react-native-tab

## Recent versions

- 0.3.0 (latest) — 2018-09-23
- 0.2.0 — 2018-09-08
- 0.1.4 — 2018-09-08
- 0.1.3 — 2018-09-07

## README

# React Native Tab

<!-- [![NPM Version](https://badge.fury.io/js/esta.svg?style=flat)](https://npmjs.org/package/@feri/react-native-tab) -->
[![NPM Version](0.3.0)

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"

<a href="https://raw.githubusercontent.com/farbd-dev/react-native-tab/master/demo/tabScroll.mp4"><img src="https://raw.githubusercontent.com/farbod-dev/react-native-tab/master/demo/tabScroll.gif" width="360"></a>

mode="normal"

<a href="https://raw.githubusercontent.com/farbd-dev/react-native-tab/master/demo/tabNormal.mp4"><img src="https://raw.githubusercontent.com/farbod-dev/react-native-tab/master/demo/tabNormal.gif" width="360"></a>

### 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) |

---
_Source: https://npm.io/package/@farbod_/react-native-tab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._