# react-native-awesome-tabbar

> The awesome tabbar made with react native

Latest version **1.0.9** (published 2019-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-awesome-tabbar
pnpm add react-native-awesome-tabbar
yarn add react-native-awesome-tabbar
bun add react-native-awesome-tabbar
```

## 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.9 |
| Published | 2019-08-15 |
| First published | 2019-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 4.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Nguyễn Thanh Lộc |
| Maintainers | loc254 |
| Keywords | react, native, tabbar, awesome, extended, custom, beautyful, interaction |

## Links

- npm: https://www.npmjs.com/package/react-native-awesome-tabbar
- Repository: https://github.com/xtek-asia/react-native-awesome-tabbar
- Homepage: https://github.com/xtek-asia/react-native-awesome-tabbar#readme
- Issues: https://github.com/xtek-asia/react-native-awesome-tabbar/issues
- npm.io page: https://npm.io/package/react-native-awesome-tabbar

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Recent versions

- 1.0.9 (latest) — 2019-08-15
- 1.0.8 — 2019-07-24
- 1.0.7 — 2019-07-24
- 1.0.6 — 2019-07-20
- 1.0.4 — 2019-07-20
- 1.0.3 — 2019-07-20
- 1.0.2 — 2019-07-18
- 1.0.1 — 2019-07-18
- 1.0.0 — 2019-07-18

## README

## React Native Awesome Tabbar

The awesome tabbar made with React Native.

[![npm version](https://badge.fury.io/js/react-native-awesome-tabbar.svg)](https://badge.fury.io/js/react-native-awesome-tabbar)

<!-- <img src="https://cdn.dribbble.com/users/1233499/screenshots/4844696/preview.gif" > -->

## Add it to your project

1. Run `npm install react-native-awesome-tabbar --save`
2. `import TabBar from "react-native-awesome-tabbar";`

## Basic Usage

```js

import TabBar from "react-native-awesome-tabbar";
...
  render() {
      return (
        <TabBar onChangeTab={(childen, index) => {}} backgroundColor="">
          <TabBar.Item title="Home" icon={require("./home.png")} activeColor="#5b37b7">
            <View>{/* Page Content */}</View>
          </TabBar.Item>
          <TabBar.Item title="Search" icon={require("./search.png")} activeColor="#e6a919">
            <View>{/* Page Content */}</View>
          </TabBar.Item>
          <TabBar.Item title="Profile" icon={require("./profile.png")} activeColor="#1194aa">
            <View>{/* Page Content */}</View>
          </TabBar.Item>
          <TabBar.Item
            title="Notification"
            icon={require("./notification.png")}
            activeColor="#c9379d"
            count={{ number: 999 }}
          >
            <View>{/* Page Content */}</View>
          </TabBar.Item>
        </TabBar>
      );
    }
```

## Props

| prop            | value        | required/optional | description                  |
| --------------- | ------------ | ----------------- | ---------------------------- |
| title           | string       | required          | title of item                |
| icon            | image source | required          | icon of item                 |
| activeColor     | string       | optional          | color when item is focus     |
| onChangeTab     | function     | optional          | callback when switching tabs |
| backgroundColor | string       | optional          | background color of tab      |
| count           | object       | optional          | for badge of icon            |

## LICENSE!

react-native-awesome-tabbar is [MIT-licensed](https://github.com/xtek-asia/react-native-awesome-tabbar/blob/master/LICENSE).

## Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to locnguyen99dev@gmail.com and do let us know if you have any questions or suggestion regarding our work.

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