Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
June 27, 2016 20:13
June 25, 2015 16:16
July 31, 2016 13:45


React-Native Tab bar with more freedom


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.


npm install react-native-tabbar


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


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


  • Tabbar changes based on Orientation