# react-native-tab-bar-footer

> Navigation tab bar footer component with animation

Latest version **1.0.5** (published 2018-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-tab-bar-footer
pnpm add react-native-tab-bar-footer
yarn add react-native-tab-bar-footer
bun add react-native-tab-bar-footer
```

## 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 | 2018-09-12 |
| First published | 2018-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 284.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Artem Kosiakevych |
| Maintainers | tema4uk |
| Keywords | tab-bar, react-component, react-native-tab-bar, react-native-tabs, react-native-footer, react-native-tab-bar-footer, tabBar, footer |

## Links

- npm: https://www.npmjs.com/package/react-native-tab-bar-footer
- Repository: https://github.com/ArtemKosiakevych/react-native-tab-bar-footer
- Issues: https://github.com/ArtemKosiakevych/react-native-tab-bar-footer/issues
- npm.io page: https://npm.io/package/react-native-tab-bar-footer

## Dependencies (1)

- [react-native-material-ripple](https://npm.io/package/react-native-material-ripple.md) ^0.8.0

## Recent versions

- 1.0.5 (latest) — 2018-09-12
- 1.0.4 — 2018-08-10
- 1.0.3 — 2018-08-09
- 1.0.2 — 2018-08-05
- 1.0.1 — 2018-08-04
- 1.0.0 — 2018-07-29

## README

[ripple]: https://github.com/n4kz/react-native-material-ripple

# react-native-tab-bar-footer
[![npm version](http://img.shields.io/npm/v/react-native-tab-bar-footer.svg?style=flat-square)](https://npmjs.org/package/react-native-tab-bar-footer "View this project on npm")
[![npm version](http://img.shields.io/npm/dm/react-native-tab-bar-footer.svg?style=flat-square)](https://npmjs.org/package/react-native-tab-bar-footer "View this project on npm")

Navigation TabBar footer component for IOS and Android with slide animation which contains tab icon (normal and active) and title. You can use custom `hat` React Element (component above the active tab), if you use custom `hat` please provide also `hatWidth` and `hatHeight`.

In this lib I'm using [Ripple][ripple] component.

## Installation
`yarn add react-native-tab-bar-footer`

![](./src/demo-ios.gif)
![](./src/demo-android.gif)

# Usage

```js

import TabBar from 'react-native-tab-bar-footer'
...
  const tabs = [
    {
      icon: star,
      activeIcon: starActive,
      title: 'Favorites'
    },
    {
      icon: play,
      activeIcon: playActive,
      title: 'Play'
    },
    {
      icon: user,
      activeIcon: userActive,
      title: 'Profile'
      
    },
  ]
  render() {
    return <TabBar onTabChange={(index) => alert(index)} tabs={tabs} />
  }
```

## Props

| Prop  | Default  | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| tabs | [] | `Array<Tab>` | Tab objects |
| initialIndex | 0 | `number` | Initial active tab |
| onTabChange | undefined | `func` | onClick tab |
| slideSpeed | 25 | `number` | tabBar animation speed |
| slideBounciness | 10 | `number` | tabBar bounciness |
| tabSize | 30 | `number` | tab size |
| barColor | 'white' | `color` | tabBar color |
| height | 60 | `number` | tabBar height |
| titleStyle | - | `style` | title custom style |
| iconStyle | - | `style` | icon custom style |
| animationDuration | 200 | `number` | animation duration |
| rippleProps | `rippleCentered` | `object` | [Ripple][ripple] component props |
| hat | `<View/>` | `React.Element<*>` | Custom active hat component |
| hatWidth | 78 | `number` | Active hat component width |
| hatHeight | 78 | `number` | Active hat component height |

Tab object structure: 

```js
type Tab = { 
  icon: string|number, 
  activeIcon: string|number, 
  title: string
}
```

## Questions or suggestions?

Feel free to [open an issue](https://github.com/ArtemKosiakevych/react-native-tab-bar-footer/issues)

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