# @tickid/react-native-tabs

> A small library that uniquely handles simple tab operations

Latest version **1.0.5** (published 2019-09-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @tickid/react-native-tabs
pnpm add @tickid/react-native-tabs
yarn add @tickid/react-native-tabs
bun add @tickid/react-native-tabs
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-09-21 |
| First published | 2019-09-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | sondnpt00343 |
| Maintainers | mycvvn, thangph96, thuclh |
| Keywords | react native tab view, react native tab, tabs react native, react native tabs |

## Links

- npm: https://www.npmjs.com/package/@tickid/react-native-tabs
- Repository: https://github.com/mycvvn/react-native-tabs
- Homepage: https://github.com/mycvvn/react-native-tabs#readme
- Issues: https://github.com/mycvvn/react-native-tabs/issues
- npm.io page: https://npm.io/package/@tickid/react-native-tabs

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-native-button](https://npm.io/package/react-native-button.md) ^2.4.0

## Recent versions

- 1.0.5 (latest) — 2019-09-21
- 1.0.4 — 2019-09-20
- 1.0.3 — 2019-09-20
- 1.0.2 — 2019-09-20
- 1.0.1 — 2019-09-20
- 1.0.0 — 2019-09-20

## README

## Demo
<img src="https://raw.githubusercontent.com/mycvvn/react-native-tabs/master/demo/demo.gif" width="360">

## Installation
Yarn:
```sh
$ npm i @tickid/react-native-tabs --save
```
or NPM:
```sh
$ yarn add @tickid/react-native-tabs
```

## Usage
Sample code to use this simple library:
```jsx
import React, { Component } from 'react';
import { Text } from 'react-native';
import { Tabs, Tab } from '@tickid/react-native-tabs';

export default class TabsExample extends Component {
  render() {
    return (
      <Tabs>
        <Tab heading="Tab one">
          <Text>Content of #tabOne</Text>
        </Tab>

        <Tab heading="Tab two">
          <Text>Content of #tabTwo</Text>
        </Tab>

        <Tab heading="Tab three">
          <Text>Content of #tabThree</Text>
        </Tab>
      </Tabs>
    );
  }
}
```

## Props:

## `<Tabs>`
| Property | Type | Default | Description |
|-------------|----------|--------------|----------------------------------------------------------------|
| `tabIndex`     | `Number` | `0` | The default tab index is active. (optional)|
| `tabChangeDuration`     | `Number` | `100` | Slider speed in milliseconds. (optional)|
| `tabTitleStyle`     | `Style` |  | Style applied to tab title. (optional)|
| `activeTabTitleStyle`     | `Style` |  | Style applied to active tab title. (optional)|
| `tabContainerStyle`     | `Style` |  | Style applied to tab container. (optional)|
| `activeTabContainerStyle`     | `Style` |  | Style applied to active tab container. (optional)|
| `tabBodyStyle`     | `Style` |  | Style applied to tab body (Wrap <Tab>). (optional)|
| `containerStyle`     | `Style` |  | Style applied to wrap of this library. (optional)|
| `activeLineColor`     | `String` | `#355587` | Specifies the background color for active tab. (optional)|
| `onChangeTab`     | `Function` |  | Called when the tab change. (optional)|


## `<Tab>`
| Property | Type | Default | Description |
|-------------|----------|--------------|----------------------------------------------------------------|
| `heading`     | `String` |  | The title of the tab. (required)|
| `containerStyle`     | `Style` |  | Styles are applied individually to each tab. (optional)|

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