https://github.com/alinz/react-native-tabbar

Tab bar with more freedom
https://github.com/alinz/react-native-tabbar

Last synced: 19 days ago
JSON representation

Tab bar with more freedom

• Host: GitHub
• URL: https://github.com/alinz/react-native-tabbar
• Owner: alinz
• License: mit
• Created: 2015-06-25T13:31:09.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-26T03:00:24.000Z (over 7 years ago)
• Last Synced: 2024-11-06T00:08:38.605Z (about 1 month ago)
• Language: JavaScript
• Size: 1.65 MB
• Stars: 265
• Watchers: 11
• Forks: 49
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-tabbar ★261 - Tab bar with more freedom (Components / UI)
• awesome-reactnative-ui - react-native-tabbar - native-tabbar/master/./tabbar-orientation.gif)| (Others)
• awesome-react-native - react-native-tabbar ★261 - Tab bar with more freedom (Components / UI)
• awesome-react-native - react-native-tabbar ★261 - Tab bar with more freedom (Components / UI)
• awesome-reactnative-ui - react-native-tabbar - native-tabbar/master/./tabbar-orientation.gif)| (Others)
• awesome-react-native - react-native-tabbar ★261 - Tab bar with more freedom (Components / UI)
• awesome-react-native-ui - react-native-tabbar ★214 - Tab bar with more freedom (Components / UI)

README

        
## react-native-tabbar

React-Native Tab bar with more freedom

### Introduction

I have decided to remove all the abstraction from this module. Now there is only

one component, and that is `Tabbar`. All the children inside `Tabbar` component will

be rendered inside of it. There are no `TabItem`, `WithIcon` or anything else. what you put into `Tabbar` will be displayed as tabs. By doing that, you can attach it to your

favourite state managements such as `Redux`, or `Mobx`. This module should be use as a first base block for more sophisticated tabbar. Please take a look at examples folder as I added couple of common usage.

### Installation

```bash

npm install react-native-tabbar

```

### Methods

| name | arguments | description |

|----|----|----|

| hide | duration | shows the tabbar with animations, default duration is 200 ms |

| show | duration | shows the tabbar with animations, default duration is 200 ms |

| updateHeight | scrollY position | pass the value of onScroll y position to show or hide tabbar |

| recalculate | none | once your orientation changes, call this method to re calculate the correct position of tabbar |

### Props

| name | type | default value | description |

|----|----|----|----|

| height | number | 50 | the height of tabbar |

| offset | number | 150 | how far you have to scroll before tabbar starts to disappear |

| step | number | 0.25 | the lower the number the slower the tabbar disappear |

| show | boolean | true | if you want to not show the tabbar at the start, pass false to this prop |

| disable | boolean | false | disables the progress show/hide tabbar |

### examples

- Tabbar changes based on Orientation

![](./tabbar-orientation.gif)