Installation
Add the dependency:
npm i react-native-tab-barsPeer 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
-
LICENSE - Dotted Tab Bar Component Option
- Animation
-
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.