Awesome Open Source
Awesome Open Source
React Native Tab Bars

Battle Tested ✅

Fully customizable navigation tab bar for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Tab Bars React Native Tab Bars

Installation

Add the dependency:

npm i react-native-tab-bars

Peer Dependencies

IMPORTANT! You need install them
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.34"

Usage

Import

import { SolidTabBar } from "react-native-tab-bars";

Usage

<SolidTabBar
  initial={0}
  onChange={(data) => console.log(data)}
  tabs={[
    { id: 0, text: "All" },
    { id: 1, text: "Birds" },
    { id: 2, text: "Fishes" },
    { id: 3, text: "Tigers" },
  ]}
/>

Tabs Object Array Format

[
  { id: 0, text: "All" },
  { id: 1, text: "Birds" },
  { id: 2, text: "Fishes" },
  { id: 3, text: "Tigers" },
];

Configuration - Props

Property Type Default Description
tabs array object array you have to set your object array with formatted example as above
initial number null default selected tab
onPress function default set your own logic when a tab is pressed
onChange function default set your own logic when selected tab is changed
tabWith number 60 change the each tab's width value
tabPadding number 5 change the each tab's padding value
shadowStyle style shadow set your own shadow style for selected tab
shadowColor color #757575 change the current shadow color
activeColor color #fbd000 change the selected tab's color
inActiveColor color transparent change the unselected tabs' color
activeTextColor color #fff change the selected tab's text color
inactiveTextColor color #000 change the unselected tabs' text color
Container component View change the main container's component type
style style default change or override the main container's style object

Future Plans

  • [x] LICENSE
  • [ ] Dotted Tab Bar Component Option
  • [ ] Animation
  • [x] Typescript Challenge!
  • [ ] Write an article about the lib on Medium

Credits

Design inspired by Sina Amiriyam

Author

FreakyCoder, [email protected]

License

React Native Tab Bars is available under the MIT license. See the LICENSE file for more info.



Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Java (385,725
Reactjs (161,116
Google (36,842
Tabs (12,108
Apple (8,345
Shadow (3,368
Mobile App (3,012
Mobile Development (2,393
Tabbar (820